I have a list a and want to use (CSR) Jslink to change the view but multiple fields

Question

I have a list but want to use CSR - jslink to change the view of multiple fields. Can a jslink have multiple fields to change. Looking at the samples
here
Would like to merge 2 or 3 script in one to do multiple things. Is this a best practice?
Thanks in Advance
Code snippet here below(tried this but not working for me.Sure im missing something): Trying to combine the prioritycolor and percentagecomplete together but not working
// Create object that have the context information about the field that we want to change it's output render
var fieldsContext= {};
fieldsContext.Templates = {};
fieldsContext.Templates.Fields = {
// Apply the new rendering for Priority field on List View
"Priority": { "View": priorityFiledTemplate },
"PercentComplete": {
"View": percentCompleteViewFiledTemplate,
"DisplayForm": percentCompleteViewFiledTemplate,
"NewForm": percentCompleteEditFiledTemplate,
"EditForm": percentCompleteEditFiledTemplate
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldsContext);
// 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>";
// This function provides the rendering logic for View and Display form
function percentCompleteViewFiledTemplate(ctx) {
var percentComplete = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
return "<div style='background-color: #e5e5e5; width: 100px; display:inline-block;'> \
<div style='width: " + percentComplete.replace(/\s+/g, '') + "; background-color: #0094ff;'> \
&nbsp;</div></div>&nbsp;" + percentComplete;
// This function provides the rendering logic for New and Edit forms
function percentCompleteEditFiledTemplate(ctx) {
var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
// Register a callback just before submit.
formCtx.registerGetValueCallback(formCtx.fieldName, function () {
return document.getElementById('inpPercentComplete').value;
return "<input type='range' id='inpPercentComplete' name='inpPercentComplete' min='0' max='100' \
oninput='outPercentComplete.value=inpPercentComplete.value' value='" + formCtx.fieldValue + "' /> \
<output name='outPercentComplete' for='inpPercentComplete' >" + formCtx.fieldValue + "</output>%";

Answer 1

Hi Patrick,
It works in my test environment using your code.
I suggest follow the steps as below:
1. Save the following code as a js file (TaskListView.js) and upload it into the SiteAssets Document Library.
2. Edit the list view page.
3. Edit the list web part. Go to Miscellaneous -> JS Link.
4. Add the following URL into the JS Link textbox.
~site/SiteAssets/TaskListView.js
5. Click "OK" and save the page.
If it still not works, please check whether active the Minimal Download Strategy feature in site feature or not.
Best Regards
Dennis Guo
TechNet Community Support