SharePoint modern list view customization example

In this SharePoint customization tutorial, we will discuss how to customize the SharePoint modern list view using JSON. Here we will see various sharepoint modern list view customization examples.

Apart from this, we will also see a few sharepoint column formatting examples, and sharepoint column formatting json examples.

As we know in the year 2016, SharePoint online team released Modern List and Library experience in both SharePoint On-Premise and online. So now a day business recommends this feature for more benefits.

I am not using JSLink to customize our modern list rather than, I am going forward to use JSON for an excellent user interface.

If we go in detail, there are many good features added in both modern lists and libraries but here I am using those called List View Customizations.

SharePoint modern list view customization example

Here, I have taken a laptop list and we will see how by using the SharePoint Online list view customization using JSON, we can change the list view.

Step 1: I have created a SharePoint Online List called Laptop List and it contains the following column name.

  • Title – Single Line Text
  • Model- Single Line Text.
  • Processor– Single Line Text
  • RAM: Single Line Text
  • Hard Disk: Single Line Text
  • Screen Size: Singe Line Text
  • Battery : Single Line Text
  • Rating : Number
  • Photo: Hyperlink
sharepoint list view customization
SharePoint modern list view customization example

Step 2: Next click on All Items and click on Format View to implement our customization code.

sharepoint online modern list view

Step 3: Next copy the below code and paste it inside code editor and click on Save.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "_comment_": "Laptop Photo DIV",
    "attributes": {
      "class": "ms-bgColor-greenLight"
    },
	"style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "flex-direction": "row",
      "padding": "20px",
      "margin-bottom": "16px",
      "max-width": "850px",
      "border-radius": "8px"
    },
	"children": [
  {
        "elmType": "div",
        "__comment": "DIV L1",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "stretch",
          "max-width": "260px"
        },
		"children": [
          {
            "elmType": "img",
            "style": {
              "width": "260px",
              "height": "160px"
            },
            "attributes": {
              "src": "[$Photo]"
            }
          }
        ]
		},
		{
        "elmType": "div",
        "__comment": "DIV L2",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "center",
          "max-width": "360px",
          "min-width": "205px"
        },
		"children": [
          {
            "elmType": "span",
            "txtContent":"='Brand : ' + [$Title]",
            "style": {
              "display": "block"
            },
            "attributes": {
              "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
            }
			
          },
		  {
            "elmType": "span",
            "txtContent": "Model",
            "style": {
              "display": "block",
              "padding-top": "20px"
            },
            "attributes": {
              "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
            }
		  },
		  {
            "elmType": "span",
            "txtContent": "[$Model]"
          },
		  {
            "elmType": "span",
            "txtContent": "='Processor : ' + [$Processor]",
            "style": {
              "display": "block",
              "padding-top": "20px"
            },
			"attributes": {
              "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
            }
          }		  
		  ]		
		},
		
		{
        "elmType": "div",
        "__comment": "DIV L3",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center",
          "margin-top": "10px",
          "max-width": "310px",
          "min-width": "155px"
        },
        "children": [
          {
            "elmType": "div",
            "__comment": "HardWwareDIV",
            "style": {
              "display": "block",
              "font-size": "15px",
              "font-weight": "bold"
            },
			"children": [
              {
                "elmType": "span",
                "txtContent": "[$RAM]",
                "style": {
                  "padding-right": "5px"
                }
              }
		]
			
			
		},
		{
            "elmType": "span",
            "txtContent": "Price",
            "style": {
              "display": "block",
              "padding-top": "20px"
            },
            "attributes": {
              "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
            }
          },
		  {
            "elmType": "span",
            "txtContent": "=[$Price]",
            "style": {
              "display": "block"
            }
          },
		  
		  {
            "elmType": "span",
            "txtContent": "Rating",
            "style": {
              "display": "block",
              "padding-top": "20px"
            },
            "attributes": {
              "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
            }
          },
		  {
            "elmType": "span",
            "txtContent": "=[$Rating]",
            "style": {
                  "padding-right": "5px"
                }
          },
		  {
                "elmType": "span",
                "attributes": {
                  "iconName": "FavoriteStarFill",
                  "class": "ms-fontColor-themePrimary"
                }
              }		  
		]
		}
		]
	}
	}

Step 4: Once I click on the Save button, the SharePoint List view got changed to different views which same as the below screenshot.

sharepoint modern list view customization
SharePoint modern list view customization example

This is all about customization of List View in SharePoint Modern List.

Create a birthday view using SharePoint Online modern list view customization

Let us see, how to create a birthday view using SharePoint Online modern list view customization using JSON.

Follow the below steps to create a sharepoint birthday list view using SharePoint modern list view customization with JSON.

Step 1: I have created a SharePoint List called Birthday List and it contains the following column name.

  • Title – Single Line Text
  • Company – Single Line Text
  • E-Mail – Single Line Text
  • Department – Single Line Text
  • Designation – Single Line Text
  • Photo – photo
  • Birthday – Date
  • DOM – Single Line Text
create a birthday view using SharePoint Online modern list view customization
sharepoint birthday list

Step 2: Next click on All Items and click on Format View to implement our customization code.

create a birthday view sharepoint online
sharepoint modern list view styles

Step 3: Next copy the below code and paste it inside code editor and click on Save.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideListHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "padding": "8px",
      "margin-bottom": "25px",
      "max-width": "420px",
      "border-radius": "8px",
      "box-shadow": "4px 4px 8px lightblue"
    },
    "attributes": {
      "class": "ms-bgColor-themePrimary ms-fontColor-white"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-wrap": "wrap",
          "align-items": "stretch",
          "max-width": "310px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "none"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "height": "100px",
                  "overflow": "hidden",
                  "border-radius": "5%",
                  "margin-right": "8px"
                },
                "children": [
                  {
                    "elmType": "span",
                    "txtContent": "[$Title]",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-white"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$Company]",
                    "style": {
                      "display": "=if([$Company] == '', 'none', 'block')"
                    },
                    "attributes": {
                      "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-white"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$Department]",
                    "style": {
                      "display": "=if([$Department] == '', 'none', 'block')"
                    },
                    "attributes": {
                      "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-white"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$Designation]",
                    "style": {
                      "display": "=if([$Designation] == '', 'none', 'block')"
                    },
                    "attributes": {
                      "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-white"
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "column",
          "max-width": "310px",
          "min-width": "95px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "display": "=if([$Birthday] <= @now,'block','none')"
                },
                "attributes": {
                  "iconName": "BirthdayCake"
                }
              },
              {
                "elmType": "span",
                "style": {
                  "display": "block"
                },
                "attributes": {
                  "class": "ms-fontWeight-semibold ms-fontSize-m"
                },
                "txtContent": "=if([$Birthday] <= @now,'Happy Birthday!', 'Next Birthday')"
              },
              {
                "elmType": "span",
                "style": {
                  "display": "=if([$Birthday] == '', 'none', 'block')",
                  "padding-left": "0px",
                  "font-size": "14px"
                },
                "txtContent": "[$DOM]",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-regular ms-fontColor-white"
                }
              },
              {
                "elmType": "span",
                "style": {
                  "display": "=if([$Birthday] == '', 'block', 'none')",
                  "padding-left": "8px"
                },
                "txtContent": "No Birthday Entered",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-white"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex": "none",
              "display": "flex",
              "flex-direction": "row-reverse",
              "flex-wrap": "nowrap"
            },
            "children": [
              {
                "elmType": "a",
                "style": {
                  "display": "=if([$EMail] == '', 'none', 'block')"
                },
                "attributes": {
                  "class": "ms-fontSize-xs ms-fontWeight-regular ms-fontColor-white ms-fontColor-white--hover",
                  "href": "='mailto:' + [$EMail] + '?subject=Happy Birthday!\r\n'"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Mail"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Step 4: Once I click on Save button, the SharePoint List view got changed to different view which same as below screenshot

SharePoint Online modern list view customization
sharepoint modern list view styles

This is all about customization of List View in SharePoint Online Modern List.

This is how we can create a simple sharepoint online birthday web part.

SharePoint add a button to listview using modern list view customization

Let us see, how to add a custom button in each row of the list in the SharePoint modern list view using JSON. In this SharePoint Online modern list view customization example using JSON, we will add a custom button “Please give your comments”.

Now, we will see an example on how to add a custom button in rows for the current user in SharePoint Online modern list view using JSON.

Step 1: I have created a SharePoint Online List called Feedback List and it contains following column name.

  • Title – Single Line Text
  • Comments – Single Line Text
  • Assigned To – People and Group
sharepoint modern list view customization
sharepoint modern list view customization

Step 2: Next click on All Items and click on Format View to implement our customization code.

SharePoint Online modern list view customization
sharepoint customization

Step 3: Next copy the below code and paste it inside code editor and click on Save.

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
	"style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "padding": "8px",
      "margin-bottom": "25px",
      "max-width": "420px",
      "border-radius": "8px",
      "box-shadow": "4px 4px 8px lightblue"
    },
    "attributes": {
      "class": "sp-row-card ms-bgColor-themePrimary ms-fontColor-white"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-title"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Comments]"
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "defaultClick"
            },
            "txtContent": "Please give your Comments",
            "attributes": {
              "class": "sp-row-button"
            },
            "style": {
              "display": {
                "operator": "?",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "@me",
                      "[$AssignedTo.email]"
                    ]
                  },
                  "",
                  "none"
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

Step 4: Once I click on the Save button, My SharePoint Online List view got changed to different views which same as the below screenshot.

sharepoint list view formatting
sharepoint list view formatting

Step 5: Once you click on custom button, It will redirect you to view page where you can edit your item.

SharePoint Online modern list view customization using JSON
sharepoint add button to listview

Here we saw, how to add a custom button in rows for current user in SharePoint Online modern list view using JSON.

SharePoint Online modern list view customization using JSON example

Here is another example on SharePoint Online modern list view customization using JSON.

Here, we will see how we can format a product list using list view customization.

Step 1: I have created a SharePoint Online List called Product List and it contains the following column name.

  • Title – Single Line Text
  • ProdDetails- Multi Line Text.
  • Price – Single Line Text
  • Photo : Hyperlink
  • Rating: Number
sharepoint online modern list view customization
sharepoint list view formatting

Step 2: Next click on All Items and click on Format View to implement our customization code.

sharepoint customization
sharepoint customization

Step 3: Next copy the below code and paste it inside code editor and click on Save.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "_comment_": "ProductPhoto DIV",
    "attributes": {
      "class": "ms-bgColor-greenLight"
    },
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "padding": "16px",
      "margin-bottom": "16px",
      "max-width": "600px",
      "border-radius": "35px"
    },
    "children": [
      {
        "elmType": "div",
        "__comment": "DIV L1",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "stretch",
          "max-width": "300px"
        },
        "attributes": {
          "class": "ms-bgColor-white"
        },
        "children": [
          {
            "elmType": "span",
            "txtContent": "= [$Title]",
            "style": {
              "display": "block",
              "text-align": "center"
            },
            "attributes": {
              "class": "ms-fontSize-l ms-fontWeight-bold ms-fontColor-neutralPrimary"
            }
          },
          {
            "elmType": "span",
            "txtContent": "[$ProdDetails]",
            "style": {
              "display": "block",
              "text-align": "right",
              "padding": "20px"
            },
            "attributes": {
              "class": "ms-fontSize-l ms-fontWeight-normal ms-fontColor-neutralPrimary"
            }
          },
          {
            "elmType": "span",
            "txtContent": "[$Price]",
            "style": {
              "display": "block",
              "text-align": "left"
            },
            "attributes": {
              "class": "ms-fontSize-m ms-fontWeight-bold ms-fontColor-neutralPrimary"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "__comment": "DIV L2",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center",
          "max-width": "300px"
        },
        "attributes": {
          "class": "ms-bgColor-white"
        },
        "children": [
          {
            "elmType": "img",
            "style": {
              "width": "260px",
              "height": "160px"
            },
            "attributes": {
              "src": "[$Photo]"
            }
          },
          {
            "elmType": "span",
            "txtContent": "[$Rating]",
            "style": {
              "display": "block",
              "padding-right": "5px",
              "align-items": "right"
            },
            "attributes": {
              "class": "ms-fontSize-m ms-fontWeight-semibold ms-fontColor-themePrimary",
              "iconName": "FavoriteStarFill"
            }
          }
        ]
      }
    ]
  }
}

Step 4: Once I click on the Save button, My SharePoint Online List view got changed to different views which same as the below screenshot.

sharepoint modern list view customization
sharepoint modern list view customization

This is all about customization of List View in SharePoint Modern List.

Create SharePoint user profile card using list view customization

Let us see, how to create a user profile card using SharePoint Online modern list view customization using JSON.

Step 1: I have created a SharePoint List called Employee Contact List and it contains the following column name.

  • Title- Single Line Text
  • Job Title-Single Line Text
  • Company -Single Line Text
  • E-Mail-Single Line Text
  • Home Phone -Single Line Text
  • Address -Single Line Text
  • City -Single Line Text
  • Pin-Single Line Text
SharePoint Online modern list view customization

Step 2: Next click on All Items and click on Format View to implement our customization code

SharePoint Online modern list view customization User Profile Card

Step 3: Next copy the below code and paste it inside code editor and click on Save.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideListHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "padding": "8px",
      "margin-bottom": "16px",
      "max-width": "600px",
      "border-radius": "8px",
      "box-shadow": "4px 4px 8px lightblue"
    },
    "attributes": {
      "class": "ms-bgColor-themePrimary ms-fontColor-white"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-wrap": "wrap",
          "align-items": "stretch",
          "max-width": "310px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "none"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "100px",
                  "height": "100px",
                  "overflow": "hidden",
                  "border-radius": "50%",
                  "margin-right": "8px"
                },
                "children": [
                  {
                    "elmType": "img",
                    "attributes": {
                      "src": "/_layouts/15/userphoto.aspx?size=M&[email protected]",
                      "title": "=if([$Picture] == '', 'No picture available', [$Picture.desc])"
                    },
                    "style": {
                      "position": "relative",
                      "top": "50%",
                      "left": "50%",
                      "width": "100%",
                      "height": "auto",
                      "margin-left": "-50%",
                      "margin-top": "-50%"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "display": "flex",
              "flex-direction": "column",
              "flex-wrap": "nowrap",
              "align-items": "stretch",
              "max-width": "200px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1"
                },
                "children": [
                  {
                    "elmType": "span",
                    "txtContent": "[$Title]",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-white"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$JobTitle]",
                    "style": {
                      "display": "=if([$JobTitle] == '', 'none', 'block')"
                    },
                    "attributes": {
                      "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-white"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$Company]",
                    "style": {
                      "display": "=if([$Company] == '', 'none', 'block')"
                    },
                    "attributes": {
                      "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-white"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1",
                  "display": "flex",
                  "flex-direction": "row",
                  "flex-wrap": "wrap",
                  "align-items": "flex-end"
                },
                "children": [
                  {
                    "elmType": "a",
                    "style": {
                      "display": "=if([$EMail] == '', 'none', 'block')",
                      "width": "100%"
                    },
                    "attributes": {
                      "class": "ms-fontSize-xs ms-fontWeight-regular ms-fontColor-white ms-fontColor-white--hover",
                      "href": "='mailto:' + [$EMail] + '?body=Dear ' + [$Title] + ',\r\n'"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "attributes": {
                          "iconName": "Mail",
                          "class": "ms-fontColor-white"
                        },
                        "style": {
                          "padding-right": "6px"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "[$EMail]"
                      }
                    ]
                  },
                  {
                    "elmType": "span",
                    "style": {
                      "display": "=if([$HomePhone] == '', 'none', 'block')",
                      "width": "100%"
                    },
                    "attributes": {
                      "class": "ms-fontSize-xs ms-fontWeight-regular ms-fontColor-white"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "txtContent": "=if([$WorkAddress] == '', '', [$WorkAddress] + ', ') + if([$WorkCity] == '', '', [$WorkCity] + ', ') + if([$WorkState] == '', '', [$WorkState] + ' ') + if([$WorkZip] == '', '', [$WorkZip])",
                        "style": {
                          "display": "=if([$WorkCity] == '' && [$WorkState] == '' && [$WorkZip] == '', 'none', 'block')"
                        },
                        "attributes": {
                          "class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-white"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "No address provided",
                        "style": {
                          "display": "=if([$WorkCity] == '' && [$WorkState] == '' && [$WorkZip] == '', 'block', 'none')"
                        },
                        "attributes": {
                          "class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-white"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "max-width": "170px",
          "min-width": "120px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "display": "block"
                },
                "attributes": {
                  "class": "ms-fontWeight-semibold ms-fontSize-m"
                },
                "txtContent": "Comments:"
              },
              {
                "elmType": "span",
                "style": {
                  "display": "=if([$_Comments] == '', 'none', 'block')",
                  "padding-left": "8px"
                },
                "txtContent": "[$_Comments]",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-regular ms-fontColor-white"
                }
              },
              {
                "elmType": "span",
                "style": {
                  "display": "=if([$_Comments] == '', 'block', 'none')",
                  "padding-left": "8px"
                },
                "txtContent": "No Comments entered",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-white"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex": "none",
              "display": "flex",
              "flex-direction": "row-reverse",
              "flex-wrap": "nowrap"
            },
            "children": [
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "share"
                },
                "attributes": {
                  "title": "Share",
                  "class": "ms-fontColor-white ms-fontColor-red--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Share"
                    }
                  }
                ]
              },
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "delete"
                },
                "attributes": {
                  "title": "Delete",
                  "class": "ms-fontColor-white ms-fontColor-red--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Delete"
                    }
                  }
                ]
              },
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "editProps"
                },
                "attributes": {
                  "title": "Edit",
                  "class": "ms-fontColor-white ms-fontColor-red--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Edit"
                    }
                  }
                ]
              },
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "defaultClick"
                },
                "attributes": {
                  "title": "See more details",
                  "class": "ms-fontColor-white ms-fontColor-red--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "ContactInfo"
                    }
                  }
                ]
              },
              {
                "elmType": "span",
                "style": {
                  "height": "2rem",
                  "width": "2rem",
                  "font-size": "2em",
                  "cursor": "pointer",
                  "margin": "0px 5px",
                  "vertical-align": "text-bottom",
                  "display": "=if([$Twitter]=='','none','')"
                },
                "children": [
                  {
                    "elmType": "a",
                    "style": {
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "ms-fontColor-magentaLight",
                      "iconName": "ContactLink",
                      "href": "=[$Twitter]",
                      "title": "Twitter"
                    }
                  }
                ]
              },
              {
                "elmType": "span",
                "style": {
                  "height": "2rem",
                  "width": "2rem",
                  "font-size": "2em",
                  "cursor": "pointer",
                  "margin": "0px 5px",
                  "vertical-align": "text-bottom",
                  "display": "=if([$LinkedIn]=='','none','')"
                },
                "children": [
                  {
                    "elmType": "a",
                    "style": {
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "ms-fontColor-magentaLight",
                      "iconName": "LinkedInLogo",
                      "href": "=[$LinkedIn]",
                      "title": "LinkedIn"
                    }
                  }
                ]
              },
              {
                "elmType": "span",
                "style": {
                  "height": "2rem",
                  "width": "2rem",
                  "font-size": "2em",
                  "cursor": "pointer",
                  "margin": "0px 5px",
                  "vertical-align": "text-bottom",
                  "display": "=if([$Facebook]=='','none','')"
                },
                "children": [
                  {
                    "elmType": "a",
                    "style": {
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "ms-fontColor-magentaLight",
                      "iconName": "FacebookLogo",
                      "href": "=[$Facebook]",
                      "title": "Facebook"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Step 4: Once I click on the Save button, My SharePoint List view got changed to different views which same as the below screenshot.

SharePoint Online modern list view customization example
SharePoint profile card

Step 5: There are few icons added in the below which will redirect you to the respective page, once you click on it. Here You can share the Contact details.

Create user profile card using SharePoint Online modern list view
SharePoint profile card

Step 6: Here you can delete the item once you click on delete Icon.

SharePoint Online modern list view customization User Profile Card
card sharepoint view

Step 7: Here you can edit the Item, once you click on Edit icon.

SharePoint Online modern list view customization using JSON
sharepoint card view

Step 8: You can view the item, once you click on View Item.

sharepoint modern list view customization
sharepoint list card view

Also, I have added Facebook, LinkedIn, and Twitter to redirect to the employee profile page.

This is how we can create user profile card using SharePoint Online modern list view customization using JSON.

Change Listview color using SharePoint Online modern list view customization

Let us see, how to change Listview color using SharePoint Online modern list view customization using JSON based on the current user.

Now we will see how to change list view row color based on the current user using SharePoint Online modern list view customization using JSON.

Step 1: I have created a SharePoint List called Task List and it contains following column name.

  • Title – Single Line Text
  • % Completed – use Content Type
  • Actual Work- Use Content Type
  • Assigned To- Use Content Type

Step 2: Next copy the below code and paste it inside code editor and click on Save.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if(indexOf(join([$AssignedTo.email],';'), @me) != -1, 'ms-bgColor-yellow ms-bgColor-themePrimary--hover', '')"
}

Step 3: Once I click on the Save button, the SharePoint List view got changed to different views which same as the below screenshot.

sharepoint modern list view customization
sharepoint online modern list view customization

This is how we can change SharePoint list view color.

You may like the following SharePoint tutorials:

Reference: for ms-bgcolor change, you can follow the below URL

  • https://sharepoint-json-formatter.herokuapp.com/
  • https://docs.microsoft.com/en-us/sharepoint/dev/design/themes-colors
  • https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting
  • https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-formatting

In this SharePoint tutorial, we learned how by using the SharePoint Online list view customization using JSON, we can change the list view and we saw various SharePoint modern list view customization examples and SharePoint modern list view json examples.

  • >