View-Formatting With a Column not present in the view

The workaround used in this post is the same used in the Column-Formatting With a Column not present in the view, but with a different example that can be more easily understood.

View Formatting is a nice way to customize your modern lists’ views, but it requires that the columns used in the JSON are referenced in the view.

This workaround allows you to use a calculated column to reference the required column.

Create Columns Description and Status

In this example, you will create a list with two additional columns:

• Description: a single line of text
• Status: choice (Values: In progress, In review, Done)

Fill in some data like in the example below:

Format View

Go to the view formatting panel and add the following script:

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$Status] == 'Done', 'sp-field-severity--good', if([$Status] == 'In progress', 'sp-field-severity--low', 'sp-field-severity--warning')) + ' ms-fontColor-neutralSecondary'"
}

The Problem

If you hide the column Status from the view, it will not show the colors correctly because it can´t find the column Status.

The Workaround

To solve this problem, create a calculated field to show the value in the Description field and make a reference to the Status field.

=IF(1=2,[Status],[Description])

This condition will always show the Description field because 1==2 is always false. Even so, it makes the needed referee to the Status field.

Add a DueDate field

The calculated field reference is always of type text, even if the original value is not. If, for example, you need to make some date validations, it’s required that you convert the value in the format view.

Consider that you need to add a DueDate field that appears red if it’s not completed or if the due date has already passed.

Add the field DueDate of type Date, and fill it with some past dates.

Change the Calculated Description script, to reference the DueDate:

=IF(1=2,[Status]+[DueDate],[Description])

Remove the DueDate from the view, and update the view formatter with the script below:

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$Status] == 'Done', 'sp-field-severity--good',if(Date[$DueDate] <= @now, 'sp-field-severity--severeWarning', if([$Status] == 'In progress', 'sp-field-severity--low', 'sp-field-severity--warning'))) + ' ms-fontColor-neutralSecondary'"
}

Notice that DueDate is required to be converted to Date (Date[$DueDate] <= @now) since it came from the calculated field.

That’s all, folks 🙂