SharePoint View Formatting Options

Following the article – Column Formatting options let’s have the same exercice for this feature View Formatting announced during SharePoint Conference 2018.

This is an extract of github as of 23/10/2018. It might get outdated as developers update github.

It turns lists view into more visual list of items, articles, anything you’d like :

From

Image 5.png

To (for example)

hey

What are the available options (from pnp developers) to format a view ? The full list is on this post 

Below is the list as of 09.09.2018

bulletin-board-format

screenshot.png

contact-card-format

screenshot.png

date-conditional-format

listformatting-additionalrowclass.png

Multi-line view rendering

Summary

This example uses the rowFormatter element, which totally overrides the rendering of a list view row. The rowFormatter in this example creates a bounding <div /> box for every list view row. Inside this bounding box, the $Title and $Feedback fields are displayed on separate lines. Under those fields, a button element is displayed that, when clicked, does the same thing as clicking the list row in an uncustomized view, which is opening the property form for the item. This button is displayed conditionally, when the value of the $Assigned_x0020_To field (assumed to be a person/group field) matches the current signed-in user.

SharePoint list with multi-line view customization

person-currentuser-rowclass

screenshotCombined.png

text-conditional-format

Allow to specify a class with a more simple syntax of json

“schema”: “https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json&#8221;,
“additionalRowClass”: “=if([$Status] == ‘Done’, ‘sp-field-severity–good’, if([$Status] == ‘In progress’, ‘sp-field-severity–low’ ,if([$Status] == ‘In review’,’sp-field-severity–warning’, if([$Status] == ‘Blocked’,’sp-field-severity–blocked’, ”))”

Document Library Sample

Summary

SharePoint is at its best when using lightweight structure and process to organize content and keep things moving forward. New to Document Libraries is an out of the box Flow that allows you to quickly request a member of your team to sign off on a document in a Dcument Library. This sample defines a custom view to bring focus to the files that need to be approved. It also provides a better visual indication of where documents are in the process and which ones require action.

###Desktop and tablet view

Document Library Sample

Project Indicator – Risk Score Indicator

Color-coded score ranges (risk-score-viewformat.json)

A number column is evaluated against tiers of values to provide colors corresponding to score ranges. This format provides 4 ranges:

Range Color
value >= 16 Red
16 > value >= 12 OrangeLighter
12 > value >= 8 Yellow
value < 8 Green

You can easily adjust the values/colors to provide your own ranges. You can also add or remove nested conditions to increase or decrease the number of ranges needed.

Color-coded ranges

Project Indicator – RYG Status Format

Summary – (ryg-status-viewformat.json)

Text or choice column where the value is used to determine the color. This allows for an easy visualization of status. To use a lookup column instead, replace all occurences of [$internalfieldname] with [$internalfieldname.lookupValue].

This format uses the values Red, Yellow, Green, and Amber but you could easily extend this to fit your own color-coded system by adding or removing nested conditions.

Color status field

Items in Tile Format

Summary

This sample uses rowFormatter element to overrides the default formatting on the view. This view allow users to use the list as the promoted links app (including the power the security trimming on the items). This sample uses the Icons from the Microsoft UI Fabric. The name of the icon is referenced through an Icon field.

Color status field

Resource Catalog Sample

Summary

SharePoint lists are excellent places to store information. This example demonstrates how to use a custom SharePoint list to implement a marketing resources catalog. This sample defines a custom view to bring focus to the status of items in the resource catalog. It also provides a better visual experience by displaying all the data in an easy to read format by using icons, colors, and profile pictures.

Resource Catalog Sample

Retail Account Sample

Summary

SharePoint lists are excellent places to store information. This example demonstrates how to use a custom SharePoint list to manage retail stores. This sample defines a custom view to bring focus to the status of store locations. It also provides a better visual experience by displaying all the data in an easy to read format by using icons, colors, and Bing maps.

Retail Account Sample

Conditional formatting based on choice field

Summary

This example was adopted from a column formatting example, Conditional formatting based on the value in a text of choice field, with some important differences to apply the concept to list view rows. The column formatting example applies both an icon and a class to a column based on the value of @currentField. The additionalRowClass attribute in view formatting, however, only allows you to specify a class and not an icon. Additionally, since @currentField always resolves to the value of the Title field when referenced inside a view format, this sample refers to the $Status field directly to determine which class to apply to the row.

Formatting based on text field

Wrap up

The official source is github.

What have you used for so far ?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: