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
Step 2: Next click on All Items and click on Format View to implement our customization code.
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.
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
Step 2: Next click on All Items and click on Format View to implement our customization code.
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
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
Step 2: Next click on All Items and click on Format View to implement our customization code.
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.
Step 5: Once you click on custom button, It will redirect you to view page where you can edit your item.
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
Step 2: Next click on All Items and click on Format View to implement our customization code.
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.
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
Step 2: Next click on All Items and click on Format View to implement our customization code
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]12.onmicrosoft.com",
"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.
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.
Step 6: Here you can delete the item once you click on delete Icon.
Step 7: Here you can edit the Item, once you click on Edit icon.
Step 8: You can view the item, once you click on View Item.
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.
This is how we can change SharePoint list view color.
You may like the following SharePoint tutorials:
- Create SharePoint list view
- SharePoint Online location column
- Your changes could not be saved because this SharePoint web site has exceeded the storage quota limit
- SharePoint custom list example
- How to create a calculated column in SharePoint List or Library
- SharePoint Online calendar web part
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.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).
How do you hide a list webpart when there are no items to be displayed?
Do you know how to use custom row actions to perform a “like” function?
I tried a lot to display second colum under Feedback list and it doesnt show. i have created the exact same list. any suggestions ?