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?

Cheers 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 (function () {

    // 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 }
    }
 var percentCompleteFiledContext = {};
percentCompleteFiledContext.Templates = {};
percentCompleteFiledContext.Templates.Fields = {
    // Apply the new rendering for PercentComplete field on List View, Display, New and Edit forms
    "PercentComplete": {
        "View": percentCompleteViewFiledTemplate,
        "DisplayForm": percentCompleteViewFiledTemplate,
        "NewForm": percentCompleteEditFiledTemplate,
        "EditForm": percentCompleteEditFiledTemplate
    }

    //};


    // Create object that have the context information about the field that we want to change it's output render 
    //var percentCompleteFiledContext = {};
    //percentCompleteFiledContext.Templates = {};
    //percentCompleteFiledContext.Templates.Fields = {
    //    // Apply the new rendering for PercentComplete field on List View, Display, New and Edit forms
    //    "PercentComplete": {
    //        "View": percentCompleteViewFiledTemplate,
    //        "DisplayForm": percentCompleteViewFiledTemplate,
    //        "NewForm": percentCompleteEditFiledTemplate,
    //        "EditForm": percentCompleteEditFiledTemplate
    //    }
    };


    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(percentCompleteFiledContext);
    })
    ();

// 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

You don't need to have separate namespace for each field you want to modify, you can gather them all in the same namespace. Try the following:

// 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 2

Yes. It is possible to change view of multiple fields using CSR. From the code sample you are referring, check ReadOnlySPControls.js.

Also you can check following sites:

https://www.martinhatch.com/2013/08/jslink-and-display-templates-part-2.html

Of course, you could specify multiple different fields or multiple different override methods, this uses simple JavaScript array principles and an example is shown below:

mjhOverrides.Templates.Fields =

{ 
  ‘MyCustomField: {
    ‘DisplayForm’: mjh.displayMethod,
    ‘View’: mjh.viewMethod
  },  
  ‘Title’: {
    ‘DisplayForm’: mjh.displayMethod,
    ‘View’: mjh.viewTitleMethod
  }

};

http://msdn.microsoft.com/en-us/magazine/dn745867.aspx