JS link OOB option.

[null null]

I am trying to use JS link by uploading the js file to the style library and then going to task list, edit page, web part properties and miscellaneous-> paste the link to the js file.

However, i could see the execution taking place.

// List View – Priority Color Sample 
// Muawiyah Shannak , @MuShannak 
 
(function () { 
 
alert( "check jslink");

    // 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>"; 
    } 
} 

[#2]

are you using the classic UI? or the modern?

[#3]

Its not working for both.

[#4]

How do you implement it? are you using a script editor on the page or..

[#5]

Use the browser's developer tool to debug your script and ensure that the value of priority is what you expect.

Kind regards

John

[#6]

at console level i can see url appended by ?ctag=<some code>

So, if the url is :

<tenant name>/jslinkfiles/prioritycolor.js

when i check the console, it displays 404 error and when i click on the url. it displays

<tenant name>/jslinkfiles/prioritycolor.js?ctag=0$$16.0.6511.1207

How do i avoid this ctag to appear.

Thanks

[#7]

I am sure you have, but have you published the js file?

[#8]

are you getting the alert( "check jslink") or is the JS not even firing?
did you enter the jslink property value like the following?
~sitecollection/jslinkfiles/prioritycolor.js

[#9]

so it is working now or still not? 

when i see this<tenant name>/jslinkfiles/prioritycolor.js?ctag=0$$16.0.6511.1207 you are missing the library where you are putting the files.. why do you want to remove the ctag? i think it is something to reconize i am correct it refers to a csom version..

[#10]

jslinkfiles is the name of the document library.

Because i think ctag is making the problem.

i have copied the url with the ctag and pasted in the address bar and it did not work.

[#11]

Does the copied URL work without the ctag?
As Tanya Denton asked, did you publish the script (if you need to?)?
Clear the cache in the browser and try again.

[#12]

Does the copied URL work without the ctag?

I dont know if it will work but when i put it in the address bar without ctag , it works as its just the pure link.

yes, it was published.

This is not working for my organisations tenant.

I tried doing it in my personal tenant and it worked and becuase it worked, the url with the ctag is also not shown. So, i dont know if ctag is causing the issue but given the fact that it is appending to the item and putting it in address bar does not display the file makes me believe that.

What could be the difference between my personal tenant and my organisations tenant.

[#13]

Is there a difference in licensing? as i could think of you may be having a developer tenant or be a admin which you may not be on the other tenant. it is still strange dow

[#14]

Try to open the library in which your JS file is located and rename it! Then check in the JS link if the change is showing up there.

If the change is showing, test if it works!
If the change is not showing, try manually to correct the JS link, then test if it works!

Kindly inform us about the result :)

[#15]

So it worked when i created the list in the same location.

I have a subsite3 in

<serverlocation>/sites/sitecollection1/subsite1/subsite3 which hosts the list and the js file is hosted under

<serverlocation>/sites/sitecollection1/JSLinkFiles/PriorityColor.js

How do i put it in the js box for the list hosted under

<serverlocation>/sites/sitecollection1/subsite1/subsite3

if i use ~site it relaces current url.

thanks

[#16]

For CSR development always use Chrome and the Extension Cisar, it does the templating for you and manages all the JSLinks for you, it is the best thing since sliced bread..

https://chrome.google.com/webstore/detail/cisar/nifbdojdggkboiifaklkamfpjcmgafpo?hl=en

Then replace that MSDN code for a Status color in a View with:

function statusColor( ctx, CurrentFieldSchema, CurrentItem, ListSchema ){
        if (CurrentItem.hasOwnProperty(CurrentFieldSchema.Name + '.groupHeader')) { 
            //do nothing when this Choice field is used in a Group By 
            return CurrentItem[CurrentFieldSchema.Name];
        }
        var _status=CurrentItem[ CurrentFieldSchema.Name ].Label,            _html='<span style="color:{0}; font-weight:{1};">{2}</span>',            _color='none',            _weight='bold';
        switch(_status){
            case('Not Started'):
            case('OnHold'):                _color='gold';
                break;
            case('Active'):                _color='green';
                break;
            case('Completed'):                _color='blue';
                break;
            case('At Risk'):
            case('Cancelled'):
            case('Overdue'):                _color='red';
                break;
            default:                _html='{2}';
        }
        return( String.format(_html, _color, _weight, _status) );
}

[#17]

1. Use the developer toolbar F12 and verify that the file is being loaded into the browser.
2. If No, try:
   1. Verify that the file is added to the correct folder and site level
   2. Specify the link as such: ~sitecollection/folder/file.js.
3. If Yes, try:
   1. Debugging the script