Use JSLink to edit layout of Document library webpart

[Mike Jansen]

This is the first time I try to develop something using JSLink so I struggle a bit ;)

I have a standard document library web-part on my page with a few fields. For my test I want to change the custom field "LinkTest". My ultimate goal is to change the icon of a certain content-type. But I cut this challenge in pieces. The first part is to change the "LinkTest" field.

I have this piece of code:

(function() {
  
var mjh = mjh || {};
mjh.displayMethod = function (ctx) {
  return '<div>Hello World</div>';
}

var mjhOverrides = {};
  mjhOverrides.Templates = {};
  mjhOverrides.Templates.Fields = {  
    'LinkTest': {
      'DisplayForm': mjh.displayMethod
    }
  };

  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(mjhOverrides );
})();

When I debug I see that the code is executed without (visual) errors.

But ..... nothing happens.

What is wrong in my approach?

Thanks, Mike

[#2]

Tested your code and it works! Just make sure that you are using the right internal name of the field and you are actually looking at the display form (view properties page). 

Try using Cisar chrome plugin! Makes it a lot easier to create and test jslink script.

[#3]

Ah, my code is fine ;) Happy to hear.

However, seems I'm making another misstake.

I guess it is the display form.

What I want to change is the appearance of the items in an web-part on a team site. So I need to change the "All documents" view. Is this my missake? Instead changing the display form I need to change a view?

Thanks, Mike

[#4 · Accepted solution]

Yes! Just change "DisplayForm" to "View" and make sure to configure the jslink file on the all documents webpart.

[#5]

@Deleted Thanks a lot.

This did the trick.

My misstake was to have the JSLink on the teamssite webpart. Not on the all documents view.

[#6]

@Deleted

I've got one more question. This is my code now:

(function() {
  
var mjh = mjh || {};
mjh.displayMethod = function (ctx) {
	var _fileType = ctx.CurrentItem.File_x0020_Type;
	if (_fileType == 'msg')
	{
		return "<img src='../../../SiteAssets/Images/green.png'/>";
	}
}

var mjhOverrides = {};
  mjhOverrides.Templates = {};
  mjhOverrides.Templates.Fields = {  
    'DocIcon': {
      'View': mjh.displayMethod
    }
  };

  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(mjhOverrides );
})();

When I have an email message I want to change the Icon to something custom. That's working fine. However when I do not have an email message I want the icon to be the default.

If email

   change icon

else

  show the default icon

In my current code there is no icon at all is it is not an email message.

Can you help me out?

[#7]

File icon can be found in this property: ctx.CurrentItem["HTML_x0020_File_x0020_Type.File_x0020_Type.mapico"]. It is populated when the item is a file. Just make sure to check whether the items is a folder or file (for example by checking the content type property). Icons are located in the folder: /_layouts/15/images/

[#8]

Ah, thanks.

I did: "ctx.CurrentItem.HTML_x0020_File_x0020_Type.File_x0020_Type.mapico" which ended up in an error.

Working now!

[#9]

Use Andrei Markeevs Cisar Chrome Extension and you will save yourself some CSR headaches

https://github.com/andrei-markeev/cisar