Forum Discussion
JS link OOB option.
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>";
}
} 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) ); }
Its not working for both.
Use the browser's developer tool to debug your script and ensure that the value of priority is what you expect.
Kind regards
John
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
- I am sure you have, but have you published the js file?
- 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 - Use the developer toolbar F12 and verify that the file is being loaded into the browser.
- If No, try:
- Verify that the file is added to the correct folder and site level
- Specify the link as such: ~sitecollection/folder/file.js.
- If Yes, try:
- Debugging the script
