JSLink: Add client side rendering to a field

Please note that JSLink / Client side rendering is only available in SharePoint 2013.

Use this code to set the JSLink property of a field in a list or library. This enables you to override the default rendering of the field in NewForm, DispForm, EditForm and list views. See below for links to example files you can apply to the field.

Get the code

Get the code here, and add it to a script editor web part in a page in the site where you want to use it.

How to add a web part page in SP2013

Go to “All site contents” and change the URL like this:

.../_layouts/15/spcf.aspx

Configure the JSLink on the field

Connect to a list to change the JSLink property:

JSLink examples

Please note that the JSLink override script files must be placed in a document library in the same site as you plan to use it. When you link to the field, use the “~site” prefix to refer the current site.

Translate choice column

This example let you translate a choice column in NewForm, DispForm, EditForm and list view. Modify the function “spjs_JSLinkLocalize” in the top of the file, and the column name “Status” in the bottom of the file to match your field name (FieldInternalName).

/*
        SPJS JSLink example: Translate choice column in NewForm, DispForm, EditForm and list view.
        --------------------------
        Author: Alexander Bautz / SPJSBlog.com
*/

/* Change the "spjsJSLinkTranslations" object to match your choices */
function spjs_JSLinkLocalize(){
        switch(_spPageContextInfo.currentLanguage){
                case 1044:
                        spjsJSLinkTranslations = {
                                "New":"Ny",
                                "In progress":"Pågår",
                                "Closed":"Lukket"
                        };
                break;
                case 1031:
                        spjsJSLinkTranslations = {
                                "New":"Neu",
                                "In progress":"In Bearbeitung",
                                "Closed":"Geschlossen"
                        };
                break;
        }
}

function spjs_JSLinkFieldOverride(t,ctx){
        var a = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx), b, c, h, s, img = _spPageContextInfo.webServerRelativeUrl+"/_layouts/15/images/loadingcirclests16.gif";
        switch(t){
                case "preRender":
                        if(typeof spjsJSLinkData === "undefined"){
                                spjsJSLinkTranslations = {};
                                spjsJSLinkData = {
                                        "ticker":0
                                };
                                if(typeof $ === "undefined"){
                                        spjs_jQueryLoading = true;
                                        h = document.getElementsByTagName('head')[0];
                                        s = document.createElement('script');
                                        s.src = "http://ift.tt/1Jna9vQ";
                                        h.appendChild(s);
                                }
                                spjs_JSLinkLocalize();
                        }
                break;
                case "postRender":
                        // Nothing here at the moment
                break;
                case "newform":
                case "editform":
                        if(a.fieldSchema.FieldType === "Choice"){
                                c = a.fieldSchema.FormatType;
                                b = "<span class='spjs_JSLinkHiddenField' style='display:none'>"+SPFieldChoice_Edit(ctx)+"</span><img src='"+img+"' onload='spjs_JSLinkTranslate(this,"+c+");' />";
                        }else if(a.fieldSchema.FieldType === "MultiChoice"){
                                c = 2;
                                b = "<span class='spjs_JSLinkHiddenField' style='display:none'>"+SPFieldMultiChoice_Edit(ctx)+"</span><img src='"+img+"' onload='spjs_JSLinkTranslate(this,"+c+");' />";
                        }
                break;
                case "dispform":
                case "view":
                        if(spjsJSLinkTranslations[ctx.CurrentItem[ctx.CurrentFieldSchema.Name]] !== undefined){
                                b = spjsJSLinkTranslations[ctx.CurrentItem[ctx.CurrentFieldSchema.Name]];
                        }else{
                                b = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
                        }
                break;
        }
        return b;
}

function spjs_JSLinkTranslate(elm,type){
        if(typeof $ === "undefined"){
                if(spjsJSLinkData.ticker > 50){
                        alert("Failed to load jQuery");
                }else{
                        setTimeout(function(){
                                spjs_JSLinkTranslate(elm,type);
                        },100);
                }
        }else{
                switch(type){
                        case 0:
                                $(elm).parent().find("option").each(function(i,o){
                                        if(spjsJSLinkTranslations[$(o).text()] !== undefined){
                                                $(o).text(spjsJSLinkTranslations[$(o).text()]);
                                        }
                                });
                        break;
                        case 1:
                                $(elm).parent().find("input:radio").each(function(i,o){
                                        if(spjsJSLinkTranslations[$(o).next().text()] !== undefined){
                                                $(o).next().text(spjsJSLinkTranslations[$(o).next().text()]);
                                        }
                                });
                        break;
                        case 2:
                                $(elm).parent().find("input:checkbox").each(function(i,o){
                                        if(spjsJSLinkTranslations[$(o).next().text()] !== undefined){
                                                $(o).next().text(spjsJSLinkTranslations[$(o).next().text()]);
                                        }
                                });
                        break;          
                }               
                $(elm).fadeOut(200,function(){
                        $(elm).parent().find(".spjs_JSLinkHiddenField").fadeIn(200);
                });
        }
}

var spjsJSLink = {}; 
spjsJSLink.Templates = {}; 
spjsJSLink.Templates.OnPreRender = function(ctx){return spjs_JSLinkFieldOverride("preRender",ctx);};
spjsJSLink.Templates.OnPostRender = function(ctx){return spjs_JSLinkFieldOverride("postRender",ctx);}; 
spjsJSLink.Templates.Fields = { 
        "Status": {
                "View":function(ctx){return spjs_JSLinkFieldOverride("view",ctx);},
                "NewForm":function(ctx){return spjs_JSLinkFieldOverride("newform",ctx);},
                "DisplayForm":function(ctx){return spjs_JSLinkFieldOverride("dispform",ctx);},
                "EditForm":function(ctx){return spjs_JSLinkFieldOverride("editform",ctx);}
        }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(spjsJSLink);

Use the forum for discussions

JSLink Forum

by Alexander Bautz via SharePoint JavaScripts