This is an extract of github as of 30/01/2019. It might get outdated as developers update github.
It turns lists view into more visual list of items, articles, anything you’d like.
Click the link on each title to access the detailed page.
First example (done by myself)
To (for example)
What are the available options (from pnp developers) to format a view ? The full list is on this post
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
$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.
Allow to specify a class with a more simple syntax of json
“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’, ”))”
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
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:
|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.
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.
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.
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.
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.
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
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.
Provides an example of customizing your format based on the item’s content type. When an item’s ContentType is Apple and the apple type is “Green” then green is used in the format. It it’s Apple with a different type, red is used. Otherwise, orange is used.
rowFormatter property is used to fully customize the display of rows to create a simple view of list items while easily allowing users to click on the item for additional details. The colors used for each item are applied using the Office UI Fabric color classes for themes. These classes are then applied conditionally based on an item’s content type.
ContentTypeId are always available (even when not explicitly part of your view) and can be referenced. However, ContentTypeId is the List ContentType’s Id and will be specific to the list and will require updating this value to apply the format to other sites/lists.
ContentType is available as long as it is NOT part of the view. This is a known limitation in List Formatting.
This sample applies conditional formatting to list view rows depending on the value of a “Status” Choice field.
What have you used for so far ?
Last update : 11.01.2019