SOLVED

Use JSLink to edit layout of Document library webpart

%3CLINGO-SUB%20id%3D%22lingo-sub-40263%22%20slang%3D%22en-US%22%3EUse%20JSLink%20to%20edit%20layout%20of%20Document%20library%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-40263%22%20slang%3D%22en-US%22%3E%3CP%3EThis%20is%20the%20first%20time%20I%20try%20to%20develop%20something%20using%20JSLink%20so%20I%20struggle%20a%20bit%20%3B)%3C%2Fimg%3E%3C%2FP%3E%3CP%3EI%20have%20a%20standard%20document%20library%20web-part%20on%20my%20page%20with%20a%20few%20fields.%20For%20my%20test%20I%20want%20to%20change%20the%20custom%20field%20%22LinkTest%22.%20My%20ultimate%20goal%20is%20to%20change%20the%20icon%20of%20a%20certain%20content-type.%20But%20I%20cut%20this%20challenge%20in%20pieces.%20The%20first%20part%20is%20to%20change%20the%20%22LinkTest%22%20field.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20this%20piece%20of%20code%3A%3C%2FP%3E%3CPRE%3E(function()%20%7B%0A%26nbsp%3B%20%0Avar%20mjh%20%3D%20mjh%20%7C%7C%20%7B%7D%3B%0Amjh.displayMethod%20%3D%20function%20(ctx)%20%7B%0A%26nbsp%3B%20return%20'%26lt%3Bdiv%26gt%3BHello%20World%26lt%3B%2Fdiv%26gt%3B'%3B%0A%7D%0A%0Avar%20mjhOverrides%20%3D%20%7B%7D%3B%0A%26nbsp%3B%20mjhOverrides.Templates%20%3D%20%7B%7D%3B%0A%26nbsp%3B%20mjhOverrides.Templates.Fields%20%3D%20%7B%26nbsp%3B%20%0A%26nbsp%3B%26nbsp%3B%26nbsp%3B%20'LinkTest'%3A%20%7B%0A%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20'DisplayForm'%3A%20mjh.displayMethod%0A%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%7D%0A%26nbsp%3B%20%7D%3B%0A%0A%26nbsp%3B%20SPClientTemplates.TemplateManager.RegisterTemplateOverrides(mjhOverrides%20)%3B%0A%7D)()%3B%3C%2FPRE%3E%3CP%3EWhen%20I%20debug%20I%20see%20that%20the%20code%20is%20executed%20without%20(visual)%20errors.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBut%20.....%20nothing%20happens.%3C%2FP%3E%3CP%3EWhat%20is%20wrong%20in%20my%20approach%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%2C%20Mike%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-40263%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-47017%22%20slang%3D%22en-US%22%3ERe%3A%20Use%20JSLink%20to%20edit%20layout%20of%20Document%20library%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-47017%22%20slang%3D%22en-US%22%3E%3CP%3EUse%20Andrei%20Markeevs%20Cisar%20Chrome%20Extension%20and%20you%20will%20save%20yourself%20some%20CSR%20headaches%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fandrei-markeev%2Fcisar%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fandrei-markeev%2Fcisar%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-40804%22%20slang%3D%22en-US%22%3ERe%3A%20Use%20JSLink%20to%20edit%20layout%20of%20Document%20library%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-40804%22%20slang%3D%22en-US%22%3E%3CP%3EAh%2C%20thanks.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20did%3A%20%22ctx.CurrentItem.HTML_x0020_File_x0020_Type.File_x0020_Type.mapico%22%20which%20ended%20up%20in%20an%20error.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWorking%20now!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-40789%22%20slang%3D%22en-US%22%3ERe%3A%20Use%20JSLink%20to%20edit%20layout%20of%20Document%20library%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-40789%22%20slang%3D%22en-US%22%3E%3CP%3EFile%20icon%20can%20be%20found%20in%20this%20property%3A%26nbsp%3Bctx.CurrentItem%5B%22HTML_x0020_File_x0020_Type.File_x0020_Type.mapico%22%5D.%20It%20is%20populated%20when%20the%20item%20is%20a%20file.%20Just%20make%20sure%20to%26nbsp%3Bcheck%26nbsp%3Bwhether%20the%20items%20is%20a%20folder%20or%20file%20(for%20example%20by%20checking%20the%20content%20type%20property).%20Icons%20are%20located%20in%20the%20folder%3A%26nbsp%3B%2F_layouts%2F15%2Fimages%2F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-40761%22%20slang%3D%22en-US%22%3ERe%3A%20Use%20JSLink%20to%20edit%20layout%20of%20Document%20library%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-40761%22%20slang%3D%22en-US%22%3E%3CP%3E%40Deleted%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20got%20one%20more%20question.%20This%20is%20my%20code%20now%3A%3C%2FP%3E%3CPRE%3E(function()%20%7B%0A%20%20%0Avar%20mjh%20%3D%20mjh%20%7C%7C%20%7B%7D%3B%0Amjh.displayMethod%20%3D%20function%20(ctx)%20%7B%0A%20var%20_fileType%20%3D%20ctx.CurrentItem.File_x0020_Type%3B%0A%20if%20(_fileType%20%3D%3D%20'msg')%0A%20%7B%0A%20%20return%20%22%26lt%3Bimg%20src%3D'..%2F..%2F..%2FSiteAssets%2FImages%2Fgreen.png'%2F%26gt%3B%22%3B%0A%20%7D%0A%7D%0A%0Avar%20mjhOverrides%20%3D%20%7B%7D%3B%0A%20%20mjhOverrides.Templates%20%3D%20%7B%7D%3B%0A%20%20mjhOverrides.Templates.Fields%20%3D%20%7B%20%20%0A%20%20%20%20'DocIcon'%3A%20%7B%0A%20%20%20%20%20%20'View'%3A%20mjh.displayMethod%0A%20%20%20%20%7D%0A%20%20%7D%3B%0A%0A%20%20SPClientTemplates.TemplateManager.RegisterTemplateOverrides(mjhOverrides%20)%3B%0A%7D)()%3B%3C%2FPRE%3E%3CP%3EWhen%20I%20have%20an%20email%20message%20I%20want%20to%20change%20the%20Icon%20to%20something%20custom.%20That's%20working%20fine.%20However%20when%20I%20do%20not%20have%20an%20email%20message%20I%20want%20the%20icon%20to%20be%20the%20default.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20email%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%20change%20icon%3C%2FP%3E%3CP%3Eelse%3C%2FP%3E%3CP%3E%26nbsp%3B%20show%20the%20default%20icon%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20my%20current%20code%20there%20is%20no%20icon%20at%20all%20is%20it%20is%20not%20an%20email%20message.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECan%20you%20help%20me%20out%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-40379%22%20slang%3D%22en-US%22%3ERe%3A%20Use%20JSLink%20to%20edit%20layout%20of%20Document%20library%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-40379%22%20slang%3D%22en-US%22%3E%3CP%3E%40Deleted%26nbsp%3BThanks%20a%20lot.%3C%2FP%3E%3CP%3EThis%20did%20the%20trick.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EMy%20misstake%20was%20to%20have%20the%20JSLink%20on%20the%20teamssite%20webpart.%20Not%20on%20the%20all%20documents%20view.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-40378%22%20slang%3D%22en-US%22%3ERe%3A%20Use%20JSLink%20to%20edit%20layout%20of%20Document%20library%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-40378%22%20slang%3D%22en-US%22%3E%3CP%3EYes!%20Just%20change%20%22DisplayForm%22%20to%20%22View%22%20and%20make%20sure%20to%20configure%20the%20jslink%20file%20on%20the%20all%20documents%20webpart.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-40377%22%20slang%3D%22en-US%22%3ERe%3A%20Use%20JSLink%20to%20edit%20layout%20of%20Document%20library%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-40377%22%20slang%3D%22en-US%22%3E%3CP%3EAh%2C%20my%20code%20is%20fine%20%3B)%3C%2Fimg%3E%20Happy%20to%20hear.%3C%2FP%3E%3CP%3EHowever%2C%20seems%20I'm%20making%20another%20misstake.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20guess%20it%20is%20the%20display%20form.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat%20I%20want%20to%20change%20is%20the%20appearance%20of%20the%20items%20in%20an%20web-part%20on%20a%20team%20site.%20So%20I%20need%20to%20change%20the%20%22All%20documents%22%20view.%20Is%20this%20my%20missake%3F%20Instead%20changing%20the%20display%20form%20I%20need%20to%20change%20a%20view%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%2C%20Mike%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-40374%22%20slang%3D%22en-US%22%3ERe%3A%20Use%20JSLink%20to%20edit%20layout%20of%20Document%20library%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-40374%22%20slang%3D%22en-US%22%3E%3CP%3ETested%20your%20code%20and%20it%20works!%20Just%20make%20sure%20that%20you%20are%20using%20the%26nbsp%3Bright%20internal%20name%20of%20the%20field%20and%20you%20are%20actually%20looking%20at%20the%20display%20form%20(view%20properties%20page).%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ETry%20using%20Cisar%20chrome%20plugin!%20Makes%20it%20a%20lot%20easier%20to%20create%20and%20test%20jslink%20script.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Regular Contributor

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

8 Replies
Highlighted

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.

Highlighted

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

Highlighted
Solution

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

Highlighted

@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.

Highlighted

@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?

 

 

Highlighted

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/

Highlighted

Ah, thanks.

 

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

 

Working now!

Highlighted

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

 

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