In the previous posts we introduced the Client Side Rendering and we tried to get familiar with this framework, redefining the rendering (only by visualization for now) in one of the default fields of SharePoint 2013. As you have noticed, we can redefine the UI in SharePoint fields by means of Javascript functions and a specific object (our template) that is inserted into the page by the new rendering system introduced in the Microsoft product. During the definition of these rendering functions I suggest to use the Javascript namespaces. We gathered then that the visualization of a field can be redefined by assigning a new function to the propriety "view" of the field that we are redefining. In the first example we used an in-line Javascript function. ( function () { var ctx = {}; ctx.Templates = {}; ctx.Templates.Fields = { 'PercentComplete' : { 'View' : function () { return 'Hello from <b>CSR</b>!' ; }, 'DisplayForm' : function () { return 'Hello from <b>CSR!</b>' ; }, 'EditForm' : function () { return 'Hello from <b>CSR!</b>' ; }, 'NewForm' : function () { return 'Hello from <b>CSR!</b>' ; }, } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx); })(); This function is perfect to avoid name conflicts into the page, but also increases the memory that the page uses in the browser since the in-line function is instantiated every time the field appears in the grid. There is a performance enhancement if rather than using the in-line function we save the function in a global variable and we assign to it the "View" propriety of the template. function PercentCompleteCustomRendering() { return 'Hello from <b>CSR</b>!' ; }; ( function () { var ctx = {}; ctx.Templates = {}; ctx.Templates.Fields = { 'PercentComplete' : { 'View' : PercentCompleteCustomRendering, 'DisplayForm' : PercentCompleteCustomRendering, 'EditForm' : PercentCompleteCustomRendering, 'NewForm' : PercentCompleteCustomRendering, } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx); })(); The use of a global variable is conceptually wrong since name conflicts may appear in the page if the same name is used inside other Javascript scripts. This is why I advise you to always create your own custom namespaces. In this way you can sure to avoid name conflicts. The Javascript namespaces are nothing else then objects inside other objects. Here the script optimized: window.D4S = window.D4S || {}; window.D4S.SP2013 = window.D4S.SP2013 || {}; D4S.SP2013.PercentCompleteCustomRendering = function () { return 'Hello from <b>CSR</b>!' ; }; ( function () { var ctx = {}; ctx.Templates = {}; ctx.Templates.Fields = { 'PercentComplete' : { 'View' : PercentCompleteCustomRendering, 'DisplayForm' : PercentCompleteCustomRendering, 'EditForm' : PercentCompleteCustomRendering, 'NewForm' : PercentCompleteCustomRendering, } }; ctx.ListTemplateType = undefined ; ctx.BaseViewID = undefined ; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx); })(); I hope this helps!
