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
(34)
15,789 times
Add to favorites
3/19/2015
E-mail Twitter del.icio.us Digg Facebook
Sign in to ask a question


  • Is possible to "live save" with JSLink?
    1 Posts | Last post September 12, 2017
    • Hi,
      I know that the title is strange so I am gonna to try to explain the better I can:
      I have an sharepoint hosted add in that get data from a list and show it rendered in a table on other page. The idea is that when the user click on a cell this cell chage its background color. Now I am looking for a way to save the state of the cells, right now if I reload the page the selected cells returns to the original state. 
      I am wondering if Client-side rendering has a way to check which cells has changed its background and save it. 
      
      How Client-side rendering could help me to do that?
      
      Best regards
      Americo
  • Not working in SharePoint 2016 on premise
    2 Posts | Last post September 08, 2017
    • Hello Friend, 
      
      I have tried 3-4 example accordion,BasicRepeater,Confidential Document etc. but no one is working for me. Is there any other process I need to follow in on premises 2016. 
      Please confirm! 
      Also share your mail ID for better communication. 
      
      Thanks in advance !  
    • Could yo show more detial?
  • How effective is it?
    1 Posts | Last post September 08, 2017
  • Announcement (better using JSLink)
    2 Posts | Last post September 08, 2017
    • Hello, do you guys have an equivalent functionality as this:
      https://www.c5insight.com/Resources/Blog/tabid/88/entryid/653/how-you-make-sharepoint-announcements-grab-attention-easily-using-csr.aspx
      
      I can't seem to make this work on my end... I'm guessing our company blocks it.  I just get "undefined" on my WebPart when it renders.
      
      Thanks.
    • So am I.
  • usage of mquery?
    2 Posts | Last post June 03, 2017
    • Hi
      
      In your examples you use jquery to do some manipulations. What's your advise in using mquery? 
      I've used the 'Hide fields example' but changed the jquery to mquery (I'm working on SharePoint 2013)
      
      m$(".csrHiddenField").closest("tr").attr("style","display:none;");
      
      Thanks.
      Kr
      Jelle Ferret
    • mQuery is valid to use, it is not as advanced as jQuery (doesn't have Sizzle selectors) It was never documented by Microsoft that SharePoint includes it. So if you call on Microsoft support they won't give you any. But it is one of those gems that has been around for a long time... thing with undocumented gems... Microsoft can delete them at will... Then again.. they killed all of CSR in Modern Experiences.. so you can't also rely on officially documented technologies.
  • How to show the HTML content on the List View
    1 Posts | Last post September 27, 2016
    • I have some SP2010 Lists migrated to SP2013. In SP2010, I used the texttohtml jscript to show the html content on the list view. I would like to migrate it to JS Link in SP2013. Below is a sample of the html content in a column called "Project Plan URL":
      
      <span>Title of the Project<a href='http://sp.abc.net/sites/spfffvla/ProjectDocument/ProjectPlan.xlsx' target='_blank'>Plan</a></span> | <span><a href='http://sp.abc.net/sites/spfffvla/ProjectDocument/MeetingMinutes.docx' target='_blank'>Minutes</a></span>
      
      I am totally new in SP2013, please help to provide the JS Link.
      
      Thanks in advance.
      
  • Shaded Style
    1 Posts | Last post June 24, 2016
    • hi, I have a list using default style and it is using grouping. I want to add a code using JS link in order to change the style to shaded but without changing the default style (because I dont want to loose the quick search box from the view), How can I do that? thank you for your help. How do I add a JS link.
  • How do I apply color coding to multiple columns
    2 Posts | Last post February 10, 2016
    • Thanks for the code samples. I was successfully able to use the sample #1 (Task priority Color) on my list. I'd like to know how do I apply such color coding to multiple columns to the same list view. Thanks.
    • okay.. figured out .. simply create multiple objects with their context information.. and a function for each that applies the rendering..!
  • How do you set a user field to the current user?
    2 Posts | Last post July 27, 2015
    • I've been trying to figure out how to set a user field in the new form. I have the JSLink setup correctly with the NewForm function pointing to setDefaultOwner, shown below. The default value looks correct, but when I try to save the form it displays an error message: "The user does not exist or is not unique". If I type in the value, and have the GUI select the same account, it works as expected. Thanks for any help on this.
      
      // Sample method to set the default value of a user field
      function setDefaultOwner(ctx) {
          //Set user default value
          ctx.CurrentFieldValue = [{
              Description: "sp2013\administrator",
              DisplayText: "Administrator",
              EntityGroupName: "",
              EntityType: "",
              HierarchyIdentifier: null,
              IsResolved: true,
              Key: "1",
              MultipleMatches: [],
              ProviderDisplayName: "",
              ProviderName: ""
          }];
      
          return SPClientPeoplePickerCSRTemplate(ctx);
      }
      
    • I was finally able to figure it out. Below is the code, in case anyone was interested. Please let me know if this follows best patterns and practices.
      
      function setDefaultOwner(ctx) {
          var currentUser = null;
      
          // Get the current form context
          var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
      
          // Get the current user
          $.ajax({
              async: false,
              headers: { "accept": "application/json; odata=verbose" },
              method: "GET",
              url: formCtx.webAttributes.WebUrl + "/_api/web/CurrentUser",
              success: function (data) {
                  // Set the current user
                  currentUser = data.d;
              }
          });
      
          // Ensure the current user exists
          if (currentUser != null) {
              var loginName = currentUser.LoginName.replace("\\", "\\\\");
      
              //Set user default value
              ctx.CurrentFieldValue = [{
                  Description: loginName,
                  DisplayText: currentUser.Title,
                  EntityGroupName: "",
                  EntityType: "",
                  HierarchyIdentifier: null,
                  IsResolved: true,
                  Key: loginName,
                  MultipleMatches: [],
                  ProviderDisplayName: "",
                  ProviderName: ""
              }];
          }
      
          // Return the html for the user field
          return SPClientPeoplePickerCSRTemplate(ctx);
      }
  • 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.
1 - 10 of 20 Items