2

I have the following JavaScript code attached to List's JSLink property:

(function () {

    var coloringFieldContext = {};
    coloringFieldContext.Templates = {};

    coloringFieldContext.Templates.Fields = {
        "FieldName": { "View": coloringFieldTemplate }
    };

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

function coloringFieldTemplate(ctx) {

    var currentFieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    var currentRefferedFieldValue = ctx.CurrentItem["RefferedField"];

    if (currentRefferedFieldValue === "Test") {
        return "<span style='background: red;'>" + currentFieldValue + "</span>";
    }
    else {
        return "<span style='background: green;'>" + currentFieldValue + "</span>";
    }
}

If the field RefferedField is in View, then everything works just fine but when the field is hidden in current View it doesn't work.

Is there any way to make this work without showing the RefferedField column on the View?

  • wonder what is the use-case for this. If the field is not going to be shown in view, it hardly matters whether it has background color added or not, – Nadeem Yousuf Jan 22 '15 at 13:30
  • 1
    @NadeemYousuf he is using that fields value to take a decision for formatting the UI. – Amal Hashim Jan 22 '15 at 13:31
  • @AmalHashim, the code looks like adding color to that field not the whole row, am I missing something? – Nadeem Yousuf Jan 22 '15 at 13:33
  • @NadeemYousuf the condition is if hidden field == Test then color code field with name CTX.CurrentFieldSchema.Name – Amal Hashim Jan 22 '15 at 13:35
  • @AmalHashim, thanks. Looks like I need to do some CSR reading :-) – Nadeem Yousuf Jan 22 '15 at 13:40
5

I believe you are formatting the data using CSR. In that case you have full control over how the data will be rendered.

Hence the easiest way to tackle this is, add the field to the View and then using CSS/JavaScript hide the fields you don't want to display.

Else you should make another service call to get the data.

Here is a sample you can try with

(function () {

    var coloringFieldContext = {};
    coloringFieldContext.Templates = {};

    coloringFieldContext.OnPostRender = hideFields;

    coloringFieldContext.Templates.Fields = {
        "FieldName": { "View": coloringFieldTemplate }
    };

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

function coloringFieldTemplate(ctx) {

    var currentFieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    var currentRefferedFieldValue = ctx.CurrentItem["RefferedField"];

    if (currentRefferedFieldValue === "Test") {
        return "<span style='background: red;'>" + currentFieldValue + "</span>";
    }
    else {
        return "<span style='background: green;'>" + currentFieldValue + "</span>";
    }
}

function hideFields(ctx) 
{ 
    var cell = $("div [name='RefferedField']").closest('th'); 
    var cellIndex = cell[0].cellIndex + 1; 

    $('td:nth-child(' + cellIndex + ')').hide(); 
    $('th:nth-child(' + cellIndex + ')').hide(); 
}
  • First, I was trying to fetch the data using new SP.ClientContext(siteUrl) but in this scenario it wasn't possible because the JSLink script was executed before sp.js script was loaded (I wasn't been able to successfully use ExecuteOrDelayUntilScriptLoaded in JSLink). The same as yours, my second thought was to show the fields on the view and hide them later using JS/CSS (using the same script you've pasted from here: code.msdn.microsoft.com/office/… ) but I was afraid that there would be a lag before hiding the fields. Thankfully it worked well. – Mariusz Ignatowicz Jan 23 '15 at 11:57
  • @Amal Hashim This solution works great but is there a way i can apply this to all the views in the list? Right now,this script works only on the view we add the script but making it apply to all the views in the list will be great – George Dec 15 '17 at 9:24
0

From the above answer there is a method "Hide fields" where I am getting an error:

Unable to access the cssrules.

So I have got the solution from the post: Hide more than one list column with JSlink

OnPostRender: function(ctx) {
    ["col1", "col2"].forEach(function(name) {
        var header = document.querySelectorAll("[displayname=" + name + "]")[0].parentNode;
        var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
        header.style.display = "none";
        for (var i = 0, cells = document.querySelectorAll("td:nth-child(" + index + ")"); i < cells.length; i++) {
            cells[i].style.display = "none";
        }
    });
}
-1

You can solve your problem using another field of type Computed. In your computed field schema you can add FieldRef's to another fields you need, like:

<Field ID="{4390ef57-8fc6-4e39-a047-81de3d262907}" Type="Computed" Name="MyFieldComputed" StaticName="MyFieldComputed"
     DisplayName="MyFieldComputed" Description="MyFieldComputed"
     AuthoringInfo="MyFieldComputed" Sortable="FALSE" Filterable="FALSE" >
<FieldRefs>
  <FieldRef ID="{dfc09158-ce29-43f5-a75f-06ef0d5490a6}" Name="Field1" />
  <FieldRef ID="{87627431-5a81-485b-83ac-daa9a621e98b}" Name="Field2" />
  <FieldRef ID="{5e081a4b-1047-4529-bf7e-722a66a02a2f}" Name="Field3" />      
</FieldRefs>
...

Then if you add your field to the view, you can access all the referenced fields in your CSR code as you did in your code, like ctx.CurrentItem.Field1.

I hope that the same thing should work with Calculated field type also.

  • That doesn't make sense in this case because the issue is to style the field (without changing its value) based on the value of another field. Also including a calculated field disallows sorting the list by its value. – Mariusz Ignatowicz Jan 23 '15 at 11:47
  • It is quite useful when you need to have one field on which you make some advanced CSR, based on the values and conditions of other fields. This solution allows you to have only one field in the view. I think this is much 'cleaner' solution, than hiding columns using JQuery as if was proposed in the first answer. – ECM4D Jan 23 '15 at 18:59
  • If you are so convinced that your solution will work (because right now I think you're missing the point) show us sample code that will follow the rules: 1. In the field "X" there is a value "80" 2. If the value of this field is lower than the value of hidden field "Y" then the field "X" presents the number "80" on red background 3. In other case the field "X" presents the number "80" on green background. – Mariusz Ignatowicz Jan 23 '15 at 19:08
  • The code of the CSR should absolutely the same as @AmalHashim has written in the previuos answer coloringFieldTemplate function, but you would NOT need to hide columns with JQuery. – ECM4D Jan 23 '15 at 19:19
  • The point is that the RefferedField should not be on the View. And because it's not on the view, this statement: ctx.CurrentItem["RefferedField"]; will return undefined therefore unabling to style the field FieldName. – Mariusz Ignatowicz Jan 23 '15 at 19:40

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.