Pages

Monday, September 1, 2014

Client Side Rendering using JSLink – Post 01 – Starting Over

Introduction

In SharePoint 2010, we use XSLT in order to customize the style of search results and view of list and list items. In SharePoint 2013 and for SharePoint Online it is recommended to use Client side rendering. Obliviously CSR is through JavaScript (of course; including CSS and HTML as well). Again, if you are familiar with XSLT you can still use it in SharePoint 2013 but note that XSLT falls under server side rendering.

Client Side rendering can be done via two methods.

Display Template: Used to style search results.
JS Link: Used to style the view of list, list items, fields, content type, List default pages (NewForm.aspx, EditForm.aspx, DispForm.aspx, AllItems.aspx ), List view web parts.

image

In this post I will just describe how to override a column field with our custom value and in future I will go in details with styling and all.

 

Advantages of Client Side rendering over using XSLT

  • Avoid unnecessary loads on server: JavaScript, HTML and CSS render on client browser and they avoid unnecessary loads on the server.
  • Easy to Debug: We use JavaScript for client side render. Modern browser supports debugging facility which XSLT is not providing.
  • More Libraries: We can use other JavaScript libraries as we needed (such as JQuery)
  • Easy to learn: SharePoint developers are becoming comfortable with JavaScript because of the trend of SharePoint hosted apps. So most developers are comfortable with JavaScript and feel easier to learn JavaScript than XSLT.
  • Flexibility: We can override particular fields, header, footer or the entire view of the list as we needed.

Disadvantages

  • Depends on client browser: If a user use old version of browser it may take long time to process the view; and if the user has disabled JavaScript or blocked JavaScript the rendering will not work. In case we use XSLT will work.
  • SEO Problem: Crawlers may not be able to understand the content generated by JavaScript.

Now lets cover some basic topics which we need

How to add JSLink to a List

Solution 01 – Through the browser user interface

  1. Go to the List.
  2. Click on edit page

    image

  3. Click on Edit Web Part
  4. At the bottom of the web part properties control there is a category called “Miscellaneous”. Expand it. At the bottom you can find a text box to add JS Link and there you can define the url for JS Link.

001

Solution 02 – Through Visual Studio

If you are trying to add a SharePoint list through visual studio declaratively this will be useful.

  1. Click on the schema.xml of your list

    image 

  2. Search for JSLink and you will see something like this. image

  3. Now you can give your own path of the JavaScript file. image

Basic Example

Now let’s create a basic JavaScript which overrides the value of our Body column of a announcement list.

Steps:

  1. Create an announcement list.
  2. Change the default view which displays the Body.
    • Modify view –> Select Body under the column name and click OK.image
  3. Now create a JavaScript file in side layouts folder inside 15 hive.
    • Usually the path will be C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\
    • In my case I created the JavaScript file as cutombody.js
  4. Now copy and paste the below code
  1. (function () {
  2.  
  3.     //   Initialize the variables for overrides objects
  4.     var overrideCtx = {};
  5.     overrideCtx.Templates = {};
  6.  
  7.     /*
  8.      * Using the Fields override leaves the rest of the rendering intact, but
  9.      * allows control over one or more specific fields in the existing view
  10.      */
  11.     overrideCtx.Templates.Fields = {
  12.         'Body': { 'View': 'Our Custom Value' }
  13.     };
  14.  
  15.     /*
  16.      * Register the template overrides.
  17.      */
  18.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
  19. })();

In the above code overrideCtx variables holds current context of the list item. overrideCtx.Templates.Fields enables to access the individual list field. SPClientTemplates.TemplateManager.RegisterTemplateOverrides function registers our customized template; so that our list can use it.

Here we are overriding the Body (the internal name of the field) with the value “Our Custom Value”. Here the view is the scope. The scope can be DisplayForm, View, EditForm, NewForm.

Now save the JavaScript and give the JSLink as I have mentioned above under Solution 01. Your url will can be something like this. /_layouts/15/cutombody.js

Now our Announcement list will only display “Our Custom Value” in body field.

image

Conclusion

Stay Calm I will update more post with different examples with the code in upcoming days.

I have attached a Visual Studio solution file with a custom announcement list and have added the the list to XsltListViewWebPart and define the JSLink for the web part as well as for the list through the schema.xml. Please download it and make use of it.

https://drive.google.com/file/d/0ByEnOE8DAdvhcnRkWFBsR3ByYjQ/edit?usp=sharing

Reference

http://msdn.microsoft.com/en-gb/library/jj220045.aspx

3 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Hi Suhail,

    In reference to your article: http://jsuhail.blogspot.com/2014/09/client-side-rendering-using-jslink-post.html


    I`m after adding eclipse for text more than 250 characters, so on the webpart it shows only text upto 250 characters and for rest it shows an eclipse (...)

    I have tried the following code and seems something gone missing, please assist.



    Code:


    (function () {

    // Create object that have the context information about the field that we want to change it's output render
    var bodyFieldContext = {};
    bodyFieldContext.Templates = {};
    bodyFieldContext.Templates.Fields = {
    // Apply the new rendering for Priority field on List View

    // update by Jason: name of the field: msg and view name : AllItems (List name: msgtext)
    "msg": { "AllItems": bodyFieldTemplate }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(bodyFieldContext);

    })();

    // This function provides the rendering logic for list view
    function bodyFieldTemplate(ctx) {

    var body = ctx.CurrentItem[ctx.CurrentFieldSchema.body];

    var bodyHTML="";
    if (body.toString().length > 250) {
    bodyHTML = body.toString().substring(0,250) + "...";
    }

    return bodyHTML;
    }

    ReplyDelete