SharePoint Online Modern List View Formatting
Introduction
In the previous article, we looked at Column Formatting. In this article, we explore SharePoint online modern list view formatting in the modern experience. We will improve the display of views in SharePoint Lists & Libraries with formatting. Microsoft has introduced some amazing features which give us the ability to format our rows in Modern Lists & Libraries and to provide a great user experience to users when viewing lists.
Scenario
The customer requirement is to display Flight information via list data, shown in tile view. When they click any selected option, the page URL opens in a new tab.
Steps
First, create one custom view. In the view, we construct a JSON object that describes the elements displayed when a field is included in a list view and the styles to be applied to the row item.
The format expects the following fields in the Flight information display List:
| Field | Type |
| Title | A single line of text |
| Icon | A single line of text (Get the icon name from UI fabric site, see the References URL) |
| URL | Hyperlink |
| NewTab | Yes/No - This field is used to open the link the same tab or new tab |
Follow the below steps:
- Format JSON as per our requirements in JSON Editor
{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "a",
"attributes": {
"class": "ms-borderColor-neutralLight",
"href": "[$URL]",
"target": "=if([$NewTab] == true, '_blank', '')"
},
"style": {
"float": "left",
"text-decoration": "none"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"flex-direction": "column",
"align-items": "stretch",
"padding": "13px",
"margin": "20px",
"max-width": "957px",
"box-shadow": "2px 2px 4px #a80000"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "center",
"margin": "auto"
},
"children": [
{
"elmType": "div",
"style":{
"font-size": "13px",
"font-weight": "600",
"color": "#04474a",
"padding-bottom": "8px",
"font-family":"Arial"
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"attributes": {
"iconName": "[$Icon]",
"class": "ms-fontSize-su",
"style":{
"color": "#04474a"
}
}
}
]
}
]
}
]
}
}
It’s as simple as opening the Flight Information Display list to open the view formatting pane. Then, open the view dropdown View Selector –> “Format current view” option. Follow the numerical points, as shown in the below screenshot:
After Click Format current view below screen appear then pasting in the JSON that has already been constructed above->click save button
Before formatting style of view
After formatting style of view
Note
**References: **https://uifabricicons.azurewebsites.net/
For lots of view formatting samples, click and visit.
I hope it will be helpful!