1

I'm attempting to override the rendering of a Select column in a list web part that provides filter values to another list web part. In the code below, I'm attempting to not display the Selector icon for the list web part providing the filter values when the first 7 characters of the "Proficiency_x0020_Level" contain the value "Level 3". When that value is "Level 3", I want to display the text "NA". Otherwise, I would like to see the default selector icons displayed for the "Select" column.

In the code below, the logic for what to do when the value is "Level 3" works just fine. My problem is that I can't figure out how to return the default format (i.e., the selector icon and it's underlying link) for the "SelectTitle" column. When using CSR, how does one enable the default rendering of a field? Thanks!


(function () {

// Create an object that have the context information about the fields that we want to change the rendering of. 
 var SLevlFieldContext = {}; 
 SLevlFieldContext.Templates = {}; 
 SLevlFieldContext.Templates.Fields = {

// Apply the new rendering for these fields on List View 
 "SelectTitle": { "View": SLevlFieldTemplate} 
};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(SLevlFieldContext);

})();

// This function provides the rendering logic for the list view 
function SLevlFieldTemplate(ctx) {

  var _SLevlvalue = ctx.CurrentItem["Proficiency_x0020_Level"];
  var _subSLevlvalue = _SLevlvalue.substring(0,7)

 switch (_subSLevlvalue) { 
 case "Level 3": 
 return "<center>NA</center>";
 break; 
  default:
 return ctx.CurrentItem.SelectTitle;
 break;
 }
}

Added the screenshot below to illustrate the outcome I experienced attempting to use Abdul's recommendation of RenderFieldValueDefault(ctx)

Screenshot added 3/23/2018

2 Answers 2

0

I dont know if this helps but in pre render you can filter the view by the value of another looup multiselect column and a pram in the url like this:

(function () {
function parseURLParams(url) {
    var queryStart = url.indexOf("?") + 1,
        queryEnd = url.indexOf("#") + 1 || url.length + 1,
        query = url.slice(queryStart, queryEnd - 1),
        pairs = query.replace(/\+/g, " ").split("&"),
        parms = {}, i, n, v, nv;

    if (query === url || query === "") return;

    for (i = 0; i < pairs.length; i++) {
        nv = pairs[i].split("=", 2);
        n = decodeURIComponent(nv[0]);
        v = decodeURIComponent(nv[1]);

        if (!parms.hasOwnProperty(n)) parms[n] = [];
        parms[n].push(nv.length === 2 ? v : null);
    }
    return parms;
}

function listPreRender(renderCtx, ctx) {


    //get url param

    var data = parseURLParams(window.location.href);
    var queryData = "";
    if (data != null) {
        queryData = data["URLParam"][0];//Get the value
    }

    var rows = renderCtx.ListData.Row; //get current rows
    var filteredRows = new Array();


    for (var i = 0; i < rows.length; i++) {
        var column = rows[i]["ColumnName"];
        var filter = false;
        for (var e = 0; e < sitios.length; e++) {
            if (column[e].lookupValue == queryData) {
                filter = true;
            }
        }
        if (filter) {
            filteredRows.push(rows[i]);
        }

    }
    renderCtx.ListData.Row = filteredRows;
    renderCtx.ListData.LastRow = filteredRows.length;
    return renderCtx;  //update ListData.LastRow property so you dont get problems in the sorting
}


function registerListRenderer() {
    var context = {};
    context.Templates = {};
    context.Templates.OnPreRender = listPreRender;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);

}
ExecuteOrDelayUntilScriptLoaded(registerListRenderer, 'clienttemplates.js');})();
-1

You can write return RenderFieldValueDefault(ctx) in the default which will render the default rendering of the field assuming this is in a List view.

(function () {

// Create an object that have the context information about the fields that we want to change the rendering of. 
 var SLevlFieldContext = {}; 
 SLevlFieldContext.Templates = {}; 
 SLevlFieldContext.Templates.Fields = {

// Apply the new rendering for these fields on List View 
 "SelectTitle": { "View": SLevlFieldTemplate} 
};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(SLevlFieldContext);

})();

// This function provides the rendering logic for the list view 
function SLevlFieldTemplate(ctx) {

  var _SLevlvalue = ctx.CurrentItem["Proficiency_x0020_Level"];
  var _subSLevlvalue = _SLevlvalue.substring(0,7)

 switch (_subSLevlvalue) { 
 case "Level 3": 
 return "<center>NA</center>";
 break; 
  default:
 return RenderFieldValueDefault(ctx); // Changed this statement


break;
 }
}

For a full list of these method values for NewForm/EditForm/DisplayForm and List Views refer this and this answers.

3
  • Abdul, thank you for responding! Although I copied the code with the revision you recommended (I wanted to ensure I didn't mistype anything), for some still unknown reason, RenderFieldValueDefault(ctx) is not returning anything. The case for the value "Level 3" executes, but the default switch condition doesn't seem to execute. I simply get an empty table cell where that selector graphic and supporting "on-click" logic should be appearing. Might there be something I've overlooked? Thanks! :) Mar 24, 2018 at 0:16
  • In default case, what exactly you want to happen? Mar 26, 2018 at 6:39
  • In the default case, I want the field to render as a selector icon, including the underlying "onclick" response. The column that I'm attempting to override with this logic is generated by SharePoint as a result of exercising a list web part option wherein a row selected in the table provides a Filter value to one or more other list web parts on the same web part page. Thanks! Mar 28, 2018 at 12:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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