SharePoint 2013 - Use JSLink to Create Custom Field Type

One of the things that we used to be able to do with server farm solution is to create custom field type and custom field type control.  With the App Model approach, we'll need an alternative way to give us the custom form that we need.

SharePoint is using JSLink for a lot of displaying option.  You can specify a JavaScript to be used in a  web part or for a field.  The example below shows how you can create custom displaying field.  The example do the following:

1. It customize the displaying of the Is Separator field to add onclick event handling
2. if the URL field is the default value, it sets the default value for both the URL and the description text box

Sample form

Below is the JavaScript sample code and I saved it in isSeparator.js

//IsSeparator Display

(function () {

    // Create object that have the context information about the field that we want to change it's output render
    var isSeparatorFieldCtx = {};
    isSeparatorFieldCtx.Templates = {};
    isSeparatorFieldCtx.Templates.Fields = {
        // Apply the new rendering for Age field on New and Edit forms
        "IsSeparator": {
            "NewForm": separatorFiledTemplate,
            "EditForm": separatorFiledTemplate
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(isSeparatorFieldCtx);

})();


// This function provides the rendering logic
function separatorFiledTemplate(ctx) {

    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);

    // Register a callback just before submit. To let SharePoint know how to get field value so it can save it.
    formCtx.registerGetValueCallback(formCtx.fieldName, function () {
        return $('#IsSeparator').prop('checked');
    });
 
    //in case it's the edit form, need to preset the checkbox value
    var checkedValue = "";
    if (formCtx.fieldValue == 1)
        checkedValue = "checked";

    //return the html to display the field
    return "";
}

function setUrlField(isSeparator)
{
    if ($get("IsSeparator").checked)
    {

        var descBox = $("input[id$=UrlFieldDescription]");
        var urlBox = $("input[id$=UrlFieldUrl]");
        //only update the URL field value when it's default value
        if (descBox.val() == "" || urlBox.val() == "http://")
        {
            $("input[id$=UrlFieldDescription]").val("Separator");
            $("input[id$=UrlFieldUrl]").val("http://#");
        }
     
    }
}


Once the JavaScript is saved and uploaded to a custom library calls Scripts, I wrote code to set the JSLink property of the IsSeparator field.  The sample server side code below.  I wrote the code in a console app.

SPField field = list.Fields.GetFieldByInternalName("IsSeparator");
field.JSLink = "~sitecollection/Scripts/IsSeparator.js";
field.Update();