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:

1. 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"
                     }
                   }
                 }
               ]
             }
           ]
       }
     ]
   }
   }

2. 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:
   
   
   

3. 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!