JSLink Column Format is not taking action

Question

I have a list of type Classic Experience that contain column "Status" assume the following values: Approved, Pending, and Rejected. Each of these values contain a color format based on Javascript code. I added the file in SiteAssets library and i call my file by JSLink. After reloading the page and creating new items no action was taken. This is the code:

    (function () { 

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

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFiledContext); 

})(); 

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

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

    // Return html element with appropriate color based on priority value 
    switch (status) { 
        case "Approved": 
            return "<span style='color :#f00'>" + status + "</span>"; 
            break; 
        case "Pending": 
            return "<span style='color :#ff6a00'>" + status + "</span>"; 
            break; 
        case "Rejected": 
            return "<span style='color :#cab023'>" + status + "</span>"; 
    } 
}

and i check my console i got the following errors:

    GET https://static.sharepointonline.com/bld/_layouts/15/test//mysite/siteassets/prioritycolor.js net::ERR_ABORTED 404
4theming.js:1 Cannot find theme color: SubtleBodyText
theming.js:1 Cannot find theme color: SearchURL
theming.js:1 Cannot find theme color: SubtleBodyText
3theming.js:1 Cannot find theme color: ErrorText
2theming.js:1 Cannot find theme color: HeaderSubtleText
init.js:1 Exception while trying to access stylesheet rules: SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

Any idea what's the problem and how could i fix it ?

Thank you!

Answer 1

You need modify the code as below.

(function () {
    var statusFieldContext = {}; 
    statusFieldContext.Templates = {}; 
    statusFieldContext.Templates.Fields = { 
        // Apply the new rendering for Priority field on List View 
        "Status": { "View": statusFieldTemplate } 
    }; 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldContext); 
})(); 

// This function provides the rendering logic for list view 
function statusFieldTemplate(ctx) {
    var status = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 
    // Return html element with appropriate color based on priority value 
    switch (status) { 
        case "Approved": 
            return "<span style='color :#f00'>" + status + "</span>"; 
            break; 
        case "Pending": 
            return "<span style='color :#ff6a00'>" + status + "</span>"; 
            break; 
        case "Rejected": 
            return "<span style='color :#cab023'>" + status + "</span>"; 
    } 
}

and use the url as below in JSLINK.

~site/SiteAssets/prioritycolor.js

Or we can add the code below into script editor web part in list view page.

<script type="text/javascript">
(function () {
    var statusFieldContext = {}; 
    statusFieldContext.Templates = {}; 
    statusFieldContext.Templates.Fields = { 
        // Apply the new rendering for Priority field on List View 
        "Status": { "View": statusFieldTemplate } 
    }; 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldContext); 
})(); 

// This function provides the rendering logic for list view 
function statusFieldTemplate(ctx) {
    var status = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 
    // Return html element with appropriate color based on priority value 
    switch (status) { 
        case "Approved": 
            return "<span style='color :#f00'>" + status + "</span>"; 
            break; 
        case "Pending": 
            return "<span style='color :#ff6a00'>" + status + "</span>"; 
            break; 
        case "Rejected": 
            return "<span style='color :#cab023'>" + status + "</span>"; 
    } 
}
</script>

Answer 2

By looking at the errors, I think this issue is because your JSLink file is not loaded properly.

There is some specific syntax to give the path of .js file in JSLink, check below:

Path:

1. Save this JSLink.js file in same site and add path to miscellaneous --> as ~site/SiteAssets/JSLink.js. OR
2. Save this JSLink.js file in same site collection and add path to miscellaneous --> as ~sitecollection/SiteAssets/JSLink.js.

For more details, check my answer given at Color Coding List Item by Web Part based on value.