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;'> \ </div></div> " + 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>%";
}