How to change Listview color using SharePoint Online modern list view customization

In this tutorial SharePoint customization tutorial, we will discuss how to change Listview color using SharePoint Online modern list view customization using JSON based on the current user.

As we know in the year 2016, the SharePoint Online team released a modern list and library experience in both SharePoint On-Premise and SharePoint Online. So now a day business recommends this feature for more benefits.

So here I am not using ant 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 Customization.

Change Listview color using SharePoint Online modern list view customization based on 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.

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

You may like following SharePoint tutorials:

• SharePoint Online modern list column formatting using JSON
• SharePoint Online modern list properties web part
• File viewer web part in SharePoint Online modern site
• Create Page templates in SharePoint Online Modern Experience
• Disable Sync button in SharePoint Online/2013/2016 document libraries
• SharePoint modern list view customization example

Reference: for ms-bgcolor change with more example , 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 to change list view color using SharePoint Online modern list view customization based on Current User using JSON.