0

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>%";

}
0

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

0

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>%";

}
  • 1
    Thanks Mohammed but that didnt work at all. Cheers – naijacoder Jan 21 '15 at 1:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.