Sharepoint 2013 - issue with using java script to format columns

Question

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.

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

enclose the script in script tag i.e. <script>your script</script> — Deepmala
– Deepmala, Commented Sep 25, 2018 at 22:18
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
– Dennis, Commented Sep 26, 2018 at 0:12

LZ_MSFT · Accepted Answer · 2018-09-26 01:37:14Z

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>

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
– Jummi, Commented Sep 26, 2018 at 14:19

Stack Exchange Network

Sharepoint 2013 - issue with using java script to format columns

1 Answer 1

Your Answer

Hot Network Questions

Sharepoint 2013 - issue with using java script to format columns

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions