ViewData filed in the Schema.xml is not defined in the JSLink script

Question

I have defined a site column which is rendered based on another column's information. Since I am not going to show that other column I define it in like:

    <ViewData>
      <FieldRef Name="MatterRagStatus" />
    </ViewData>

The column which I am going to show in the list view is defined like:

<ViewFields>
    <FieldRef Name="MatterIndicator" />
</ViewFields>

I have defined the JSLink where I defined this field in site columns:

<Field ID="{A5AE3A8A-E42A-4A87-9D7F-09E104FED180}"
     Name="MatterIndicator"
     StaticName="MatterIndicator"
     DisplayName="Indicator"
     Description="The column calculate matter status"
     Type="Text"
     ShowInEditForm="FALSE"
     ShowInNewForm="FALSE"
     ShowInListSettings="FALSE"
     Overwrite="TRUE"
     JSLink="~site/Scripts/MatterIndicator.js"
     Group="Evershed Site Columns">
<Default>•</Default>

here is my JSLink code:

(function () {
var hiddenFiledContext = {};
hiddenFiledContext.Templates = {};
hiddenFiledContext.Templates.Fields = {
    "MatterIndicator": {
        "View": IndicatorOverrideFun,
        "DisplayForm": IndicatorOverrideFun,
        "EditForm": IndicatorOverrideFun,
        "NewForm": IndicatorOverrideFun
        },
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(hiddenFiledContext);})();
function IndicatorOverrideFun(ctx) {
try {
    if (ctx.CurrentItem.MatterRagStatus == "1-Red")
        return "<span style='font-size: 300%; line-height: 10%;color: #FF0000;'>•</span>";
    else if (ctx.CurrentItem.MatterRagStatus == "2-Amber")
        return "<span style='font-size: 300%; line-height: 10%;color: #FFBF00;'>•</span>";
    else
        return "<span style='font-size: 300%; line-height: 10%;color: #00FF00;'>•</span>";
} catch (e) {
    console.log(e);
    return "";
}
}

When the page was being loaded I inspected the JSLink and the context object(ctx) had value but the field in ViewData was missing. I wonder what might be the reason for that?

Answer 1

JSlink has one nasty side-effect.

• Only the Fields included in the View are included in the ctx Object

In your use case I think you are mis-interpreting CSR/JSlink, there is no need to create a second MatterIndicator Field.
The whole point of CSR is that you override the display of the original MatterRagStatus Field.

If you do want separate field you either have to go get the missing data yourself with some 10 lines of Javascript I can not produce of the top of my head.

Or you can ditch JSlink and stuff this Formula in a Calculated Column (and set the datatype to Number)

="<span style=""font-size:300%;line-height:10%;"
&"color:#" 
& CHOOSE( LEFT( [MatterRagStatus] , 1) , "F00" , "FFBF00" , "0F0" )
&";"">•</span>" 

• You can reference all columns, even those not in the View.
• It will work anywhere it is used in a View, that saves you from having to attach JSlinks all over the place.
• But it does not work for Forms, you have to use CSR there.

http://www.viewmaster365.com/#/How explains all Pros and Cons