Last May, at SharePoint Conference 2018, we previewed new user experiences built with view formatting (previously called “row formatting”). It’s based on the column formatting feature introduced last year, which allows you to format the appearance of individual columns using JSON.
The view formatter enables you to customize the entire SharePoint list view experience using a similar JSON-based approach. You can use this feature to apply conditional formatting to list and library rows, or create entirely new immersive list and library experiences.
What does this mean? Simply put, it lets you turn this list:Before view formatting
Into this:
After view formatting
The simplest way to use view formatting is to apply conditional formatting to rows. The example below applies a CSS class to each list view row depending on the item’s value in the DueDate field:
Conditional formatting
{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"additionalRowClass": "=if([$DueDate] <= @now, 'sp-field-severity--severeWarning', ''"
}
A more complex example is shown below. This example uses the view formatter to build a totally custom multi-line view. The JSON to accomplish this is a bit longer – you can find it on our documentation page.
Multiline formatting
We recognize that JSON, while not technically code, can be a delicate format to write. That’s why we’ve also introduced a new parser that works with Excel-like expressions for both view formatting and column formatting. What does that mean? Here’s a JSON snippet using the old syntax that assigns a property the value “red” if the field is less than 40, and “green” otherwise:
{
"operator": ":",
"operands": [
{
"operator": "<",
"operands": [
"@currentField",
40
]
},
"red",
"green"
]
}
This format can be difficult to read and modify. Our expression parser now supports writing this same conditional expression in a much friendlier way:
“=if(@currentField < 40, ‘red’, ‘green’)”
Where do you put all this “not quite code”? You can tell you have the feature in any view using the selector control on the command bar. Format current view will open a pane where you can cut-and-paste formatting scripts.
Format current view
And you don’t have to write all these scripts yourself. You can find samples to meet your needs. Our dynamic and vibrant community contributions on our SharePoint Patterns and Practices community has already shared many great examples of column formatting. We’ll be continuing to build on the momentum, allowing community contributions to be highlighted on the GitHub repo for SharePoint patterns and practices,
Custom view formatting will be rolling out to commercial customers in September 2018. For more information, please visit our GitHub repository or our support article. Thank you.
Microsoft
