1

I found a few tutorials to do this, many of them point to using the jslink or content editor. I tried following the instructions in this site: CSR code samples #1 (Task Priority color) but it's not working for me.

I created a new list with the column called Priority, uploaded the js file into _catalogs/masterpage/displaytemplates and put the url (~site/_catalogs/masterpage/Display Templates/Text_Colour.js) into the JS Link field.

I didn't make any changes to the following code:

// List View – Priority Color Sample 
// Muawiyah Shannak , @MuShannak 

(function () { 

    // Create object that have the context information about the field that we want to change it's output render  
    var priorityFiledContext = {}; 
    priorityFiledContext.Templates = {}; 
    priorityFiledContext.Templates.Fields = { 
        // Apply the new rendering for Priority field on List View 
        "Priority": { "View": priorityFiledTemplate } 
    }; 

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext); 

})(); 

// This function provides the rendering logic for list view 
function priorityFiledTemplate(ctx) { 

    var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 

    // Return html element with appropriate color based on priority value 
    switch (priority) { 
        case "(1) High": 
            return "<span style='color :#f00'>" + priority + "</span>"; 
            break; 
        case "(2) Normal": 
            return "<span style='color :#ff6a00'>" + priority + "</span>"; 
            break; 
        case "(3) Low": 
            return "<span style='color :#cab023'>" + priority + "</span>"; 
    } 
} 

Is there any changes I need to make for this to work as expected?

I also tried added this script to the Script Editor web part and instead of running the script, it shows the text.

Script Editor/Content Editor attempt

Is there something I need to add or setting I need to change to make this work?

  • 1
    enclose the script in script tag i.e. <script>your script</script> – Deepmala Sep 25 '18 at 22:18
  • 1
    Make sure that the internal column name is "Priority" and not e.g. "Priority1". The easiest way to check the internal name is to edit the column and check the URL parameter. – Dennis Sep 26 '18 at 0:12
3

Add the following code into script editor web part in list view page.

<script type="text/javascript">
(function () { 

    // Create object that have the context information about the field that we want to change it's output render  
    var priorityFiledContext = {}; 
    priorityFiledContext.Templates = {}; 
    priorityFiledContext.Templates.Fields = { 
        // Apply the new rendering for Priority field on List View 
        "Priority": { "View": priorityFiledTemplate } 
    }; 

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext); 

})(); 

// This function provides the rendering logic for list view 
function priorityFiledTemplate(ctx) { 

    var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 

    // Return html element with appropriate color based on priority value 
    switch (priority) { 
        case "(1) High": 
            return "<span style='color :#f00'>" + priority + "</span>"; 
            break; 
        case "(2) Normal": 
            return "<span style='color :#ff6a00'>" + priority + "</span>"; 
            break; 
        case "(3) Low": 
            return "<span style='color :#cab023'>" + priority + "</span>"; 
    } 
}
</script>

enter image description here

Or save your code into a js file(colorField.js) and upload the file into Site Assets document library. And then use the JSLINK url below into the list view web part.

~site/SiteAssets/colorField.js

  • Thank you! It works when I add the code to the script editor, but it doesn't work when I upload the file into Site Assets and use the JSLINK url. – Jummi Sep 26 '18 at 14:19

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.