{"id":11459,"date":"2016-05-24T06:06:00","date_gmt":"2016-05-24T06:06:00","guid":{"rendered":"https:\/\/viewmyprojects.com\/winwirewp\/?p=11459"},"modified":"2023-11-30T09:52:27","modified_gmt":"2023-11-30T09:52:27","slug":"sharepoint-2013-client-side-rendering","status":"publish","type":"post","link":"https:\/\/viewmyprojects.com\/winwirewp\/blog\/sharepoint-2013-client-side-rendering\/","title":{"rendered":"SharePoint 2013 Client-side rendering"},"content":{"rendered":"\n

Client-side rendering (JS Link)<\/strong><\/p>\n\n\n\n

You can use it to style complete List Views, Fields, Search Results and more. This makes it a lot simpler and more intuitive, especially for web developers who haven\u2019t used SharePoint before.
JSLink files have the ability to quickly and easily change how the list views and forms are rendered.
More specifically how the fields in that list should be displayed.<\/p>\n\n\n\n

Overview<\/strong><\/p>\n\n\n\n

Client-side rendering is a new concept in SharePoint 2013. It provides you with a mechanism that allows you to use your own output render for a set of controls that are hosted on a SharePoint page (list views, display, add and Edit forms).<\/p>\n\n\n\n

Client Site Rendering is simply when the data is transformed using the client rather than the server. This means using client-side technologies, such as HTML and JavaScript. It allows us to style SharePoint elements using JavaScript, rather than having to write XSLT.<\/p>\n\n\n\n

How to deploy the JSLink templates?<\/strong><\/p>\n\n\n\n

Below are the options to deploy JS Link.
1. Set the JS Link property on a List View Web Part
2. Set the SPField.JSLink property in the Field XML definition
3. Set the SPField.JSLink property using the Server-Side Object Model
4. Set the SPField.JSLink property using PowerShell<\/p>\n\n\n\n

Example on Client-side rendering (JS Link)
<\/strong>
Below sample shows deploying JSLink using list view web part.
Requirement: Update SharePoint list specific item by clicking specific row button as shown in below screenshot. (Rendering SharePoint list field as update button using Client-side rendering).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u2022 Create a custom list as shown in below screenshot<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u2022 Edit a web part to call the JSlink file.<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u2022 Below screenshot shows rendered hyperlink field as a button.<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u2022 Add the JS file path in the JS Link section shown below<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n


<\/p>\n\n\n\n

Note:<\/strong><\/p>\n\n\n\n

~site<\/strong>\u2013 if the .js file is located on the site where your list view Web Part exist.<\/p>\n\n\n\n

~sitecollection<\/strong>\u2013 if the .js file is located in the site collection level.<\/p>\n\n\n\n