JSLink: Edit and New Form

This is my second post on JSLink and I will show how to customize "New" and "Edit" forms using JavaScript and JSLink. I will not spend time on setup and deployment, which I briefly touched on my last post here.

As a ShaePoint developer, most of us have worked on customizing New or Edit form using JavaScript which works but it's a workaround, not an elegant solution. But with JSLink, we don't have to add Content Editor web part to OOTB NewForm.aspx or EditForm.aspx, instead we just have edit the page and set JSLink property.

In this post I am using the same Tasks list as in previous post and will enhance the new and edit forms, by replacing "% Complete" input control with dropdown list with predefined values. Here is the final result:



To achieve this result, create JavaScript file and copy/paste following code snippets. See comments for explanation:

// JavaScript source code
(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};

    //override 'PercentComplete' field and provide custom rendering functions
    //for NewForm.aspx and EditForm.aspx pages.
    overrideCtx.Templates.Fields = {
        'PercentComplete': { 'NewForm': customField, 'EditForm': customField }
    }

    //register our override
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function customField(ctx) {
    //get form context for our field
    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);

    //local vars:
    var fldName = "cbo_" + formCtx.fieldName;    //used to set id of dropdown
    var fldValue = parseInt(formCtx.fieldValue); //get current value for edit form

    //register value callback. this function is called before submitting form
    //returned value will be saved in PercentComplete field. make sure the 
    //return type is compatible with field data type.
    formCtx.registerGetValueCallback(formCtx.fieldName, function () {
        var cbo = document.getElementById(fldName);
        return cbo.options[cbo.selectedIndex].value;
    });

    //return <select> html to replace input control
    var html = [];
    html.push("<select id='" + fldName + "'>");</select>
    html.push(getSelectItem(0, fldValue));
    html.push(getSelectItem(25, fldValue));
    html.push(getSelectItem(50, fldValue));
    html.push(getSelectItem(75, fldValue));
    html.push(getSelectItem(100, fldValue));
    
    return html.join('');
}

//build <option> tag 
function getSelectItem(value, selValue) {
    if (value === selValue) 
        return "<option selected='selected' value='" + value + "'>" + value + "'</option>";
    return "<option value='" + value + "'>" + value + "</option>";
}

Upload JS file to Master Page library and set metadata as below:

Content Type	JavaScript Display Template
Target Control Type	Form
Standalone	Override
Target Scope	Server relative URL of site
Target List Template Id	List template Id (optional)

At this point only task remaining is to edit "NewForm.aspx" / "EditForm.aspx" pages and set JSLink proerty of "ListFormWebPart". You can do this through UI (edit page), Feature receiver or PowerShell script.

Go back to Tasks list and add or edit item to see customization. In next post, will see how we can add custom field validation.

Hope this help.

-Javed