Quantcast
Channel: SharePoint 2013 - Development and Programming forum
Viewing all articles
Browse latest Browse all 7589

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

$
0
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?

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

}




Viewing all articles
Browse latest Browse all 7589

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>