Tuesday, October 25, 2016

SharePoint Client Side Rendering - Part 3

This post continuation to "Client Side Rendering - Part 2"

SharePoint Client Side Rendering , to understand from the basic, Just wanted to see how the default CSR template works on SharePoint List.

I have created the simple list with and checked the html source view in Chrome Browser.

Here its look like,

SharePoint 2013 Client Side Rendering (CSR - Learning from the basics)

And one more tips to understand how the SharePoint list being rendered using the CSR approach.

I have checked the Account list using the Chrome Browser and inspected the List and it their HTML elements. This has been designed with id "CSRSaveAsNewViewDivWPQ1", On rendering time this whole DIV will be transformed to new UI as like and tweaked in JavaScript.


Here is how its look like


SharePoint 2013 Client Rendering Template (Default)




Again, this default list's client side rendering's script on the "clienttemplates.js", in this CSRSaveAsNewViewDiv, a html link has been added using the JavaScript's array method.
Like wise, you can customise this CSRSaveAsNewViewDiv as your wishes.


In next part of Client Side Rendering, I show you how to customise the list and its look and feel in very simplest way.

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.

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(yourtemplateVariable);





Wednesday, October 12, 2016

Client Side Rendering in SharePoint 2013

Client Side Rendering in SharePoint 2013

Client Side Rendering - Part 2
Client Side Rendering - Part 3

SharePoint 2013 is not just for traditional SharePoint developer or ASP.NET programmer,  The main success of the SharePoint 2013 is ,It allows the all non Microsoft developer
to develop their respective technologies and integrate them with the SharePoint framework.

Client Side Rendering is one of the new addition to SharePoint. We all aware that all controls in the SharePoint has been developed based on ASP.NET controls.
But when it comes to rendering it on the browser, all controls are treated as HTML controls.

Almost all developer and designer or any department IT guys knows the basics of HTML and JavaScript nowadays.

I have seen many times a hard core SharePoint developer lacks behind when it comes to Page design, Content Management (WCM) or any other UI/UX develoment on their site.

Often this task has been outsourced to other team who specialised in web design or web developer come into SharePoint team.

This is huge win for SharePoint and Microsoft.The new concept "Design Manager" in SharePoint 2013 is fully belongs web developer community.

In this posts,I am going to talk about all the scenario where web developer part of the SharePoint implementation.

Client Side Rendering is one of the breakthrough changes introduced in the SharePoint 2013.

The term CSR is all about how the SharePoint data has been transformed using the HTML and JavaScript instead of the XSL/XSLT in its predecessor.


So the performance on the page loading has been increased drastically. Earlier XSLT and CAML has been used and processed on the server and send back to client, this has been burden some to server.

Learning the XSLT was one of the toughest choice for  novice programmer.

All these problems has been addressed and answer is "Client Side Rendering" or "Display Template" in SharePoint 2013.

The word "Display Template" is being used only for formatting or controlling the SharePoint Search result on Page or WebPart. But still its considered to be CSR.


Ok, Now we get in to CSR or Display templates technical details.

Tuesday, October 04, 2016

Migrating the SharePoint 2007 List to SharePoint 2013

One of the elegant solution yet OTB solution available in SharePoint 2013, if you want to migrate the SharePoint list from the SharePoint 2010 or MOSS 2007 to SharePoint 2013.

Large list and item with attachment works charmingly with this solution.

Please check this link , and its really best solution, I would recommend to everyone instead of paying heft huge money for third party software for migrating the OTB stuffs.