How to add CSR based JS file in JS link in Edit form Webpart in SharePoint office 365

SharePoint Developer

August 24, 2016

Rate this article

Views

9294

Let us look at the functionality of CSR client side rendering which is one of the new concepts in SharePoint 2013 online. To change the behavior of view & its appearance, new form, Edit Form and Display Form at runtime, jquery used in the SharePoint 2007 and its later version.

In SharePoint 2013 office 365, we have a concept called Client side rendering and its easy way of debugging code will help to achieve tasks such as changing the behavior of view and form (New, Edit & Display) rendering and Search Result etc.,.

To edit the page, ToolPaneView=2 would be used at the end the url.

In SharePoint online, ToolPaneView=2 won’t work in usual way.

In order to edit the Edit form page, go to Advance setting in the list setting and select the option 1

1. Classic Experience(Select)

2. New experience

3. Default Experience.

Edit form page get loaded with edit mode once Sharepointurl/editform.aspx?ID=2&ToolPaneView=2 is entered in the browser

Prepare a CSR based js file and placed in the asset library. Go to web part properties of Edit form and paste the path of the js file in the JSlink text box

(

function () {

var overrideCtx = {};

overrideCtx.Templates ={};

overrideCtx.Templates.Fields = {

‘Change_x0020_Comments’ : { ‘EditForm’ : Testing } For Reader: “Change_x0020_Comments” is a internal name. Testing is the function name.

};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

}) ();

function Testing(ctx) {

var fieldval = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; For Reader: It has the reference of comment field, which will be manipulated as per logic

var TestTitle = fieldval.toString().replace(" ", "");

TestTitle=’<textarea rows="25" cols="20" id="Change_x0020_Comments_ab250304-f850-4895-86d3-0a2721427864_$TextField" title="Change Comments" class="ms-long"></textarea>’;

return TestTitle;

}

The code in the box takes reference of the comments field “Change Comments” and replaces the existing value as blank while loading Edit form of sharepoint list

TestTitle=’<textarea rows="25" cols="20" id="Change_x0020_Comments_ab250304-f850-4895-86d3-0a2721427864_$TextField" title="Change Comments" class="ms-long">Here is the value for Comment field</textarea>’;

This function is building up an object, which is then used to register a template override.

(

function () {

var overrideCtx = {};

overrideCtx.Templates ={};

overrideCtx.Templates.Fields = {

‘Change_x0020_Comments’ : { ‘EditForm’ : Testing } For Reader: “Change_x0020_Comments” is a internal name. Testing is the function name.

};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

}) ();

The object takes the following properties:

· View

· Header

· Body

· Footer

· Group

· Item

· Fields

· OnPreRender

· OnPostRender

The CSR code must be the adhere to the following rules

· FieldName – This is the internal name of the field you want to override.

· Scope – This defines when to override the field. The choices are “View”,”DisplayForm”,”EditForm”, and “NewForm”

· Override – The actual override. This can be a HTML string with JavaScript embedded, or a function to be executed. In the former, it should be in the format: “

The code in the box takes reference of the comments field “Change Comments” during the Edit form loading and replace the value blank.