SharePointJSLink (2) Change the column color in the form

SharePointJSLink (2) Change the column color in the form

Check the document properties and find that the color of the Language column has not changed:

 

To change the color, make some changes. Register an event for displayForm:

 

 

(Function () {var FieldContext ={}; FieldContext. templates ={}; FieldContext. templates. fields = {// defines an override style method "Language": {"View": FieldTemplate, "DisplayForm": DisplayTemplate} For the columns whose colors are to be modified }}; // register Context to SharePoint SPClientTemplates. templateManager. registerTemplateOverrides (FieldContext );})();

 

Then add an implementation function. Here we set the background color for the Language column.

 

 

function DisplayForm(ctx) {    var Language = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];    switch (Language) {       case "English":           return "<span style='background-color :#D9D919'>" +Language + "</span>";           break;       case "Korean (Korea)":           return "<span style='background-color :#2D882D'>" +Language + "</span>";           break;                   }}

 

The final code is:

 

function DisplayForm(ctx) {    var Language = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];    switch (Language) {       case "English":           return "<spanstyle='background-color :#D9D919'>" + Language +"</span>";           break;       case "Korean (Korea)":           return "<span style='background-color :#2D882D'>" +Language + "</span>";           break;                   }}

 

Save the file and upload it to the Style Library ).

 

Find any list item, go to the view properties page, edit page, add JSLink to the webpart attribute of the display form.

 

The following results are displayed: