Building immersive user experiences with SharePoint view formatting
Published Sep 07 2018 01:17 PM 42.5K Views
Microsoft

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 formattingBefore view formatting

Into this:

 

After view formattingAfter 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 formattingConditional 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 formattingMultiline 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 viewFormat 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.

 

23 Comments
Iron Contributor

Does every View needs it own Not-Quite-Code?

Will it be possible to re-use Not-Quite-Code to format multiple views on the same page using one function (with parameters)?

 

Kinda like this old CSR code:

 

nPhiNJq

Microsoft

If I understand your question - I think yes.  You can use column formatting to create formats that persist across views, and then use view logic to customize a whole row.  There's a reference on the PnP site about how to override (or leave intact) a column format when a view format is also applied.

 

 

Brass Contributor

Hey Chris,

 

Do you know if there is a tutorial anywhere on how to build the micronews list that looks like a classified list in the screens above?

 

 

Copper Contributor

Is Multiple line of Text column with Enhanced Rich Text supported ? Or any workaround to format it in the view formatter?

 

 

formatted error.PNG

Iron Contributor

@Chris McNulty Can you please let us know where we can find this Expression Parser to translate Excel-logic into JSON format? Apparently not many people get the value of this - just think of any business people with not IT-savy background.

Brass Contributor

@Chris McNulty is there anyway to keep this formatting when using the List View webpart?

Microsoft

@Jeff Collins, you can accomplish something similar by following either the Contact Card or Multi-line view examples.

Brass Contributor

Did some one allready create a helper tool for the row format, like the column formatter tool on GitHub? 

Copper Contributor
So Chris , how did you actually create the picture "In to this..." with the Currency format of the dollar? Since the currency column´s not supported!?! And to clearify the picture you can use "img" as elmType and "src" as attribute, ie: { "elmType": "img", "attributes": { "src": "[$Bild]" }, "style": { "width": "60px", "height": "80px" } }, Regards, Fredrik
Brass Contributor

I've made a little prototype web app to help with building JSON Conditional Formatting. It doesn't use the new if/then syntax, but it works just the same.

Maybe it will help someone here.

App: https://sharepoint-json-formatter.herokuapp.com 

Source code: https://github.com/alecjmaly/SharePoint-JSON-Helper

Copper Contributor

Sorry if this is a bit off-topic but is there any chance Microsoft can look at overcoming some of the limitations in SharePoint List Columns? I would like to be able to use Lookup columns in Calculated columns which is currently unsupported.

 It's great that Microsoft is improving the user experience of SharePoint but there are still some limitations such as above that can really make it difficult to meet a lot of user requirements in SharePoint.

 

Copper Contributor

Still struggling to understand how pasting and maintain a bunch of weird JSON or complex “Excel expressions” into different view pages is a better idea than just referencing a shared CSS.

Iron Contributor

When using "Group By" in a view is it possible to format that row? One use for this is would be to remove the "[FieldName]:" from the row and just show the field value.

Copper Contributor

@Chris McNultyWe have tested the View Formatting and it works great - except it doesn't save the view.  When we click save but refresh the view, the formatting isn't displayed in the view.  When we click "Format this view" the JSON is still there, but it isn't displaying in the view.  It is only visible in the view when we click Preview.

Copper Contributor

@Chris McNulty multiple people on this thread have asked but I have yet to see your answer. How was the Micronews example above achieved using JSON? I've combed through the github repository and other examples (also reached out to our PFE) but so far have come up empty handed. That example is exactly what I'm trying to achieve with our internal classified listings. Any guidance you can provide is greatly appreciated!

Copper Contributor

@Chris McNulty Nice Feature! Is the view formatting supported in Sharepoint 2019? Just asking as this will be a kill feature to sell the product.

@Chris McNulty What are the settings to avoid rendering a multi line rich text field with all the html tags? 

Copper Contributor

Hello

 

Is it possible to do more then one condition? 

 

Example:

 

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$due] <= @now, 'sp-field-severity--severeWarning', ''"
}

 

I want Color changing only if $due <= now and if $field not empty

 

Regards

Brass Contributor

Post failed then when refreshed this was the wrong thread and I have no option to delete - please ignore...

Iron Contributor

@wellisi,

You can use multiple conditions by using "&&".

Example: =if([$City] == '' && [$State] == '' && [$ZipCode] == '', 'none', 'block')

Copper Contributor

Is it possible to format a view using JSON based on a Yes / No Column in SharePoint so that you only see current items in a view.

 

Also can use this view as a look up in another SharePoint list when you add from existing site columns?

 

I am not familiar with JSON so any guidance would be very much appreciated, or an example of the script to use.

 

Thank you

 

Claire

Copper Contributor

@Chris McNultyI see @Jeffrey Thorpe reply on the syntax

 

=if([$something] == '' && [$somethingElse] == '', blah, blah) but I just tried

=if([$something] == '' || [$somethingElse] == '', one is blank, one is blank) and that doesn't work as expected.

Can you guys point to a COMPLETE syntax for the complex conditionals?

Just to complete this, I also tried the or( thisone, thisotherone) syntax and that didn't do it for me either.

Here's a more complete example:

 

    "style": {
      "display": "=if([$Personal_x0020_Contact] != '' && [$Personal_x0020_Contact.email] != @me, 'none', 'flex')" }  // works

    "style": {
      "display": "=if([$Personal_x0020_Contact] == '' || [$Personal_x0020_Contact.email] == @me, 'flex', 'none')" }  // doesn't

    "style": {
      "display": "=if(or([$Personal_x0020_Contact] == '', [$Personal_x0020_Contact.email] == @me), 'none', 'flex')" }  // doesn't


I can see how the || might not be the correct syntax, but the OR should work, right?

 

BTW, these are not meant to be identical logic -- just examples.

 

 

 

 

Brass Contributor

Is this (view formatting) coming anytime soon on Sharepoint 2019 (On premise)? 

Version history
Last update:
‎Sep 07 2018 02:13 PM
Updated by: