Client-side rendering (JS Link) code samples

JSLink files have the ability to quickly and easily change how a list views and forms are rendered. More specifically how the fields in that list should be displayed. I wrote the following code samples to be easy to understand and to achieve learning purposes.

 
 
 
 
 
4.6 Star
(36)
19,108 times
Add to favorites
3/19/2015
E-mail Twitter del.icio.us Digg Facebook
Sign in to ask a question


  • How to work with non-english field names
    1 Posts | Last post May 19, 2015
    • I applied your code and all the OOB fields and English fields are working (e.g. Title, PhoneNo) but all the my Chinese fields are not working. 
      For instance, I have one Field=%5Fx9810%5F%5Fx89bd%5F%5Fx7e2e%5F%5Fx5716%5F
      I amend the code sample into:
      "%5Fx9810%5F%5Fx89bd%5F%5Fx7e2e%5F%5Fx5716%5F": {
                  "EditForm": readonlyFieldTemplate
              },
      It doens't work. I have tried type in Chinese and save the js file into UTF-8 still not work.
      
      May I know how to correctly convert the field name? Thanks.
  • Accordion js not working
    1 Posts | Last post May 18, 2015
    • HI, I created a custom list and added a multiline text "Description". In the "Form web parts", i selected "Default display form". I had previously downloaded the js file and added to shared documents. In webpart properties, under Miscellaneous - added the link of js file as "http://servername/sitename/Shared%20Documents/Accordion.js". click ok. There are 3 items in the custom list, but they are not displayed according to the demo.
      How to resolve this?
  • Attachment field is not working in CSR
    1 Posts | Last post May 17, 2015
    • Hi,
      
      Articles are pretty good, helped a lot. But major problem is when i enabled Attachment it is not working in new CSR form
      
      Just used custom form js and enabled attachment it is not working throwing span id part1 is not avail...., any approaches.
      Issue with Redirection of save click to custom page in CSR.
      your quick response is really appreciated.
  • DisplayForm.aspx CSR code samples #11 (Form Tabs)
    1 Posts | Last post May 08, 2015
    • Great work you are doing here! Thumbs up
      
      But I'm struggling with the Tabs.js a little bit.
      It works pretty good in the EditForm.aspx and the NewForm.aspx as I defined the tabsObj.
      
      But in the DispForm.aspx it still shows me all the colums. :(
      Do you have a idea what I'm doing wrong?
      
      Also I found, that in the Description you are talking about adding the "HideEmptyColumn.js" under Deployment Step 5. Just a info for you.
      
      Hopefully you are keeping up your awesome work!
  • Example of Group by Total
    1 Posts | Last post December 26, 2014
    • can you please share some sample related to group by total view. I am having trouble in removing the grand total in group by view using JSlink. I am not able to figure out which template is used by grand total.
  • Getting an error using your code sample
    1 Posts | Last post November 06, 2014
    • Good article. Appreciated a lot.
      I am getting this error while trying to customize a listview web part in a SPO site:
      
      ReferenceError: 'SPFieldLookup_Display' is undefined 
      
      Is there some script I need to inlcude? Thanks.
      
      Jimmy from Redmond, WA
  • Priority Color
    4 Posts | Last post November 05, 2014
    • I have a custom list with a field called Commercial Evaluation. The values in that field are either Not Approved, Approved, or Limited. If the value is Not Approved, I want the text (or cell) to be red. If Approved, I want the text (or cell) to be green. If limited, I want the text (or cell) to be yellow. How can I modify your Priority.js to do this? I tried the following but it is not working.
      
      // List View – Priority Color Sample
      // Muawiyah Shannak , @MuShannak
      
      (function () {
      
          // Create object that have the context information about the field that we want to change it's output render 
          var priorityFiledContext = {};
          priorityFiledContext.Templates = {};
          priorityFiledContext.Templates.Fields = {
              // Apply the new rendering for Priority field on List View
              "Commmercial Evaluation": { "View": priorityFiledTemplate }
          };
      
          SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);
      
      })();
      
      // This function provides the rendering logic for list view
      function priorityFiledTemplate(ctx) {
      
          var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
      
          // Return html element with appropriate color based on priority value
          switch (priority) {
              case "Not Approved":
                  return "<span style='color :#f00'>" + priority + "</span>";
                  break;
              case "Approved":
                  return "<span style='color :#33ff33'>" + priority + "</span>";
                  break;
              case "Limited":
                  return "<span style='color :#ffff33'>" + priority + "</span>";
          }
      }
      
    • Hi Michele,
      
      CSR template use internal column name, I think you should use: "Commmercial_x0020_Evaluation"
      
    • I changed Commmercial Evaluation to Commmercial_x0​020_Evaluation in priority.js and it is still not working. Do I need a priorty column in my list? I don't have one. I want the script to look at the value in the Commmercial_x0​020_Evaluation column. I have the javascript files uploaded into my site at /region/apr/SiteAssets/JavaScript/JavaScript/JSLink-Samples/PriorityColor.js. I edited the web part showing the list and put /region/apr/SiteAssets/JavaScript/JavaScript/JSLink-Samples/PriorityColor.js in the JS Link field under Miscellaneous. What else is there to do?
    • Instead of using a custom list, I decided to follow the steps exactly as listed in the instructions. I created a task list called Tasks. I modified the default view to include the Priority field. I created a task in the list. I uploaded the extracted, unmodified files from Client-side rendering (JS Link) code samples.zip into my site at /region/apr/Sit​eAssets/. Then I edited the web part page where the task list appears and entered /region/apr/Sit​eAssets/JavaScr​ipt/JavaScript/​JSLink-Samples/​PriorityColor.j​s in the JS Link field under Miscellaneous. I clicked Apply and stop editing with save. No colors.
  • Can you help?
    3 Posts | Last post October 30, 2014
    • I've been looking at the sample code and projects here and the are great but I'm having a problem and I was wondering if you could help?  When using CSR with JSLink I am getting undefined errors returned for any column I try to return that I have either renamed or created.  I have ensured that those items are included in the view but it's not helped at all.  Is this something you have come across before?
    • For which sample? did you debug it using IE developer tool?
    • Hi Michele,
      
      CSR template use internal column name, I think you should use: "Commmercial_x0020_Evaluation"
      
      Thanks Michele and thanks Yanayaya
  • JS Link when chaning the views
    1 Posts | Last post July 31, 2014
    • Hello Muawiyah,
      First of all congratulations for this excellent article. It is key now that SPD2013 doesn't have a Design View any more...
      I have a problem with a List that is customized (colour coding) with a JS Link.
      The List is showing the customization without problems but the issue is when I change the View to another one from the same list, the JS Link doesn't work any more. It seems that the JS Link only works when the whole page is loaded but when the View is changed, only the List frame is refreshed and the JS Link customization doesn't take effect.
      Do you know if there is any workaround to resolve this problem?
      
      Thank you.
      Regards,
      Alfredo.
  • Using 2 examples in single file
    2 Posts | Last post June 25, 2014
    • Thanks for these examples, really nice work.
      
      I'm trying to combine two of these .js files so I can have both the text change colour on priority and also display the percentage bar. I copied the code from one into the other but it still only displays the percent bar, the priority colouring does not apply. 
      
      Can you advise how to achieve this?
      
      Thanks
    • Apologies here, 
      
      it's now updated and I see both customisations pulled from one updated .js file. I wonder if it takes time for changes to these files to filter through in SharePoint Online?
      
      Thanks Again.
      
11 - 20 of 21 Items