Client Side Rendering (CSR) is one of the new concepts introduced by Microsoft in SharePoint 2013. With the help of this new feature you don’t have to write XSLT to style SharePoint elements like list views, fields etc. Using this technique you simply have to make use of HTML and JavaScript to change the user interface.
As cited in MSDN “Client-side rendering provides a mechanism that you can use to produce your own output for a set of controls that are hosted in a SharePoint page. This mechanism enables you to use well-known technologies, such as HTML and JavaScript, to define the rendering logic of custom field types. In client-side rendering you can specify your own JavaScript resources and host them in the data storage options available to your farm solution, such as the _layouts folder.”
Client side rendering is like a templating mechanism that you use to customize the UI.
When we talk about client side rendering, then there are two things that requires a mention here are:
Display templates are used in webparts that are based upon search technology. They are used for handling the rendering of the search results on the page. We can customize how the search results will appear to the end user.
The second one i.e. the JSLink, is of our interest in the scope of this article. JSLink is one amongst the many cool features introduced by Microsoft in SharePoint 2013.
It is a property that is available on many SharePoint objects like content types, lists, views, fields and web part properties. We simply point this property to a JavaScript file that will do a magic on our page. In other words, will simply transform our page into whatever way we want to render all at the client side.
You might have encountered scenarios where your customers have approached you to display lists with a custom look and feel without writing any piece of code. Consider for example you have a list holding contact details of the users that needs to be displayed in a card like manner as opposed to the traditional screen. And all this has to be done without writing any server side code. Though this might seem to be tricky but it can be achieved very easily using a simple mechanism and i.e. JSLink.
JSLink has tremendous power. It can transform your entire site into an attractive piece without writing any server side code. It is like an on-off switch. If you don’t like it, you can simply remove the value of the jslink property and you will get back the original default behaviour.
To see the actual strength of this property, let us actually dig some code and cover some scenarios.
As cited in MSDN “Client-side rendering provides a mechanism that you can use to produce your own output for a set of controls that are hosted in a SharePoint page. This mechanism enables you to use well-known technologies, such as HTML and JavaScript, to define the rendering logic of custom field types. In client-side rendering you can specify your own JavaScript resources and host them in the data storage options available to your farm solution, such as the _layouts folder.”
Client side rendering is like a templating mechanism that you use to customize the UI.
When we talk about client side rendering, then there are two things that requires a mention here are:
- Display Templates
- JSLink
Display templates are used in webparts that are based upon search technology. They are used for handling the rendering of the search results on the page. We can customize how the search results will appear to the end user.
The second one i.e. the JSLink, is of our interest in the scope of this article. JSLink is one amongst the many cool features introduced by Microsoft in SharePoint 2013.
It is a property that is available on many SharePoint objects like content types, lists, views, fields and web part properties. We simply point this property to a JavaScript file that will do a magic on our page. In other words, will simply transform our page into whatever way we want to render all at the client side.
You might have encountered scenarios where your customers have approached you to display lists with a custom look and feel without writing any piece of code. Consider for example you have a list holding contact details of the users that needs to be displayed in a card like manner as opposed to the traditional screen. And all this has to be done without writing any server side code. Though this might seem to be tricky but it can be achieved very easily using a simple mechanism and i.e. JSLink.
JSLink has tremendous power. It can transform your entire site into an attractive piece without writing any server side code. It is like an on-off switch. If you don’t like it, you can simply remove the value of the jslink property and you will get back the original default behaviour.
To see the actual strength of this property, let us actually dig some code and cover some scenarios.
To read the complete post click click on the link here
