locked
[Forum FAQ] Some examples about using JSLink in SharePoint 2013 RRS feed

  • General discussion

  • Introduction:

    Working with the SharePoint UI has always been something of a challenge for developers. However, a new feature in SharePoint 2013 called JSLink offloads the burden of using XSLT and provides a much easier and more responsive way to display custom fields on the client. JSLink is a property that controls rendering of fields, items and even Web Parts through a JavaScript file.

    This article will give three demo scenarios as many users want to achieve these goals.

    Ex1.

    Users want to open the document in edit mode directly in client application by clicking the Name of the file in SharePoint 2013 document library.

    Solution:

    (function () {
      var overrideCtx = {};
      overrideCtx.Templates = {};
      overrideCtx.Templates.Fields = {
        'LinkFilename': { 'View' : CustomLink }
      };
      SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();
    function CustomLink(ctx){
      var link = ctx.CurrentItem["LinkFilename"]; 
      var value = ctx.CurrentItem["FileLeafRef"]; 
      var link1=value.substring(0,value.lastIndexOf("/"));
      var html="";
      if((value.indexOf("."))>-1){
        var html="<a onclick='editDocumentWithProgID2('"+link+"', '', 'SharePoint.OpenDocuments', '0', '"+link1+"', '0')'>"+val+"</a>";
      }
      return html;
    }


    Ex2:

    Users want to change the column width using JSLink in SharePoint list/library view.

    Solution:

    (function () {
      var overrideCtx = {};
      overrideCtx.Templates = {};
      overrideCtx.OnPostRender = postRenderHandler;
      SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();
    function postRenderHandler(ctx){
      var ths = document.querySelectorAll('th.ms-vh2');
      for(var i=0;i<ths.length;i++)
      {
        if("Title"===ths[i].textContent.trim())//change “Title” to the column name which you want to change the column width
        {
          console.log(ths[i]);
          ths[i].setAttribute("width","300px");
          break;
        }
      }
    }
    

    Ex3:

    Users want to change the Title field to be a hyperlink as Name field for documents in Document library using JSLink.

    Solution:

    (function () {
      var overrideCtx = {};
      overrideCtx.Templates = {};
      overrideCtx.Templates.Fields = {
        'Title': { 'View' : CustomLink }
      };
      SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();
    function CustomLink(ctx){
      var link = ctx.CurrentItem["FileLeafRef"]; 
      var value =ctx.CurrentItem["Title"]
      var html="";
      if(value!=""){
        var html= "<a href='"+link+"'>"+value+"</a>";
      }
      return html;
    }
    


    Please click to vote if the post helps you. This can be beneficial to other community members reading the thread.

    Saturday, May 2, 2015 11:09 AM