Forum Discussion

Mike Jansen's avatar
Mike Jansen
Iron Contributor
Jan 19, 2017

Use JSLink to edit layout of Document library webpart

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

  • Deleted's avatar
    Deleted
    Jan 20, 2017

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

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

    • Mike Jansen's avatar
      Mike Jansen
      Iron Contributor

      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

      • Deleted's avatar
        Deleted

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

Resources