1

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!

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>

enter image description here

1
  • Thank you ! It works fine now ! – SmithBZ Sep 9 '19 at 11:41
1

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.

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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