Thursday, October 20, 2016

client side rendering in sharepoint - Part 2

This post continues of the Client Side Rendering Part 1

To learn more about display template or Client Side Rendering in the SharePoint 2013,we must know the DNA of the SharePoint List.

SharePoint List made of the Site Column or List Column (SPFields),Content Types,Forms (New,Edit and View Pages) and Views.

SharePoint 2013 - Display Templates,CSR, JS Link

On this image,the rounded artifacts can be customised using the CSR by using Javascript snippets, called JSLink property.

By default,When you open the SharePoint List either (AllItems.aspx or NewItem.aspx), the default template(JavasScript code) has been applied.

You can find the default clienttemplate.js file under

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS

For better understanding of the scenario, I could compare the AngularJS's template or component or widget but with Javascript.

You can create dynamically the templates in AngularJS or pointing the html file URL to render the View in the browser based on the business logic.

That's how the SharePoint Client Side Rendering works but with advanced JSOM based code snippets.

All columns including the taxonomy, forms, view, list view webpart and content types and their UI can be overwrite. This is the added advantage and again SharePoint 2013 ecosystem open up the opportunities for UI and UX developer.

And also CSR supporting the couple of event "OnPreRender" and "OnPostRender".

To ingrain the CSR topic technically and theoretically  , just think of the ASP.NET page's Render and PreRender event and also over riding the method in the Feature Event Receiver.

All you need is a simple java script function with UI tweak and assign to these event and over riding the fields,views,header,footer,body,group by registering the template.