Please note that JSLink / Client side rendering is only available in SharePoint 2013.
Change log
July 26, 2015
Updated the code for the JSLink tool to let you pick the field from the list so you don’t have to know the FieldInternalName. The tool is now in v1.1, but I have not updated the pictures below.
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
![IMG]()
Connect to a list to change the JSLink property:
![IMG]()
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).
July 26, 2015:
Code example updated with a fix for NewForm and EditForm when used in a root site.
/*
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 !== "/" ? _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 = "https://code.jquery.com/jquery-1.11.3.min.js";
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
