MS List - Customize Look & Feel of card/view form layout using JSON | SharePoint | o365
Prerequisite: To customize the look & feel of MS
list a person should have good hands-on experience in JSON.
What is
JSON?
JSON stands
for JavaScript Object Notation, it is a lightweight format for
storing and transporting data and often used when data is sent from a server to
a web page.
Will not
talk more about JSON in this post if you feel interested kindly drop a note
in the comment section will create a separate post to explain JSON in-depth in terms of the MS list.
Before
starting the actual coding part, kindly have a look at what exactly we are trying
to achieve here.
NOTE: Script will customize the look & feel of the course tracker list on the basis of the status (on top of each card), please refer to the above image.
The
Actual code: I have divided them into two sections - Card Layout and View/Edit Form layout. let's start with the card layout.
Card layout
So, the requirement here is to customize the cards on the basis of the status of each
course, as you can see in the above image each card has its own progress
status on top of it with some background shading.
To import code to your list, kindly follow the below steps:
- Navigate to
Format current view and paste the below code, please refer to the below
image.
- Then, Use the attached code.
- When you will hover on the user’s profile section, a card appears which contains complete information related to the user, please refer to the below image.
- To perform an action like View/Edit/Delete, hover on 3 dots on right most corner of each card, refer to the below image.
View/Edit Forms layout
Below
image belongs to the end result of the view/edit form layout, if you apply the attached code to your list you
will end up something looking like this.
Code will customize your existing columns into meaningful sections.
NOTE:
Kindly change the column names as per your requirement.
Thank
you so much for reading this post, please drop your comments, if you find it useful.
Code:
//Header
{
"debugmode": "true",
"elmType": "div",
"attributes": {
"class": "=if([$Progress]=='Not started', 'sp-css-backgroundColor-warningBackground40', if([$Progress]=='In progress', 'sp-css-backgroundColor-blueBackground27', if([$Progress]=='Completed', 'sp-css-backgroundColor-successBackground40 sp-css-color-green','')))"
},
"style": {
"width": "99%",
"border-top-width": "0px",
"border-bottom-width": "1px",
"border-left-width": "0px",
"border-right-width": "0px",
"border-style": "solid",
"margin-bottom": "16px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"box-sizing": "border-box",
"align-items": "center"
},
"children": [
{
"elmType": "div",
"attributes": {
"iconName": "Group",
"class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-white",
"title": "Issue"
},
"style": {
"flex": "none",
"padding": "0px",
"padding-left": "0px",
"height": "36px"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-24"
},
"style": {
"box-sizing": "border-box",
"width": "100%",
"text-align": "left",
"padding": "21px 12px",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"txtContent": "[$Progress]"
}
]
}
]
}
//Body
{
"sections": [
{
"displayname": "Profile",
"fields": [
"Assigned to"
]
},
{
"displayname": "Learning Modules",
"fields": [
"Course",
"Description",
"Category",
"Notes"
]
},
{
"displayname": "Status",
"fields": [
"Progress"
]
},
{
"displayname": "Declaration",
"fields": [
"Priority",
"Start date",
"Due date"
]
},
{
"displayname": "Attachments",
"fields": [
""
]
}
]
}
//card
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"additionalRowClass": "=if([$Progress] == 'Not started', 'sp-css-backgroundColor-errorBackground','')",
"width": "300",
"height": "400",
"debugMode": true,
"hideSelection": true,
"formatter": {
"elmType": "button",
"style": {
"border-radius": "3px",
"width": "277px",
"height": "auto",
"margin-top": "6px",
"margin-left": "7px",
"box-shadow": "0 3.2px 7.2px 0",
"border": "none",
"outline": "none",
"padding": "0",
"cursor": "pointer"
},
"attributes": {
"class": "ms-bgColor-white ms-fontColor-neutralSecondary--hover ms-fontColor-neutralTertiaryAlt"
},
"customRowAction": {
"action": ""
},
"children": [
{
"elmType": "div",
"style": {
"border": "2px solid #faf9f8",
"width": "100%",
"height": "100%",
"display": "flex",
"flex-wrap": "nowrap",
"flex-direction": "column",
"align-items": "flex-start",
"justify-content": "left"
},
"attributes": {
"class": "ms-fontColor-neutralPrimary"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"width": "100%",
"justify-content": "space-between",
"align-items": "center",
"margin-top": "6px"
},
"children": [
{
"elmType": "div",
"style": {
"border-radius": "3px",
"display": "inline",
"padding": "1px 7px",
"margin-left": "12px"
},
"txtContent": "[$Progress]",
"attributes": {
"class": "=if([$Progress]=='Not started', 'sp-css-backgroundColor-errorBackground50 sp-css-color-redDark', if([$Progress]=='In progress', 'sp-css-backgroundColor-neutralBackground10', if([$Progress]=='Completed', 'sp-css-backgroundColor-successBackground40 sp-css-color-green','')))"
}
},
{
"elmType": "div",
"style": {
"cursor": "pointer",
"width": "32px",
"height": "20px",
"line-height": "20px",
"outline": "none",
"margin-right": "12px"
},
"attributes": {
"iconName": "More",
"class": "ms-fontColor-neutralSecondary ms-bgColor-neutralLight--hover"
},
"customCardProps": {
"directionalHint": "bottomLeftEdge",
"openOnEvent": "hover",
"formatter": {
"elmType": "div",
"style": {
"font-size": "14px",
"box-shadow": "0 3.2px 7.2px 0",
"width": "100px",
"display": "flexbox",
"flex-direction": "column"
},
"attributes": {
"class": "ms-fontColor-neutralTertiaryAlt"
},
"children": [
{
"elmType": "button",
"customRowAction": {
"action": "editProps"
},
"attributes": {
"class": "ms-bgColor-white ms-fontColor-neutralPrimary ms-bgColor-neutralLight--hover"
},
"style": {
"border": "none",
"outline": "none",
"cursor": "pointer",
"padding": "4px",
"width": "100%",
"display": "flex",
"align-items": "center",
"height": "36px"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Edit"
},
"style": {
"font-size": "16px",
"margin": "0 4px"
}
},
{
"elmType": "span",
"txtContent": "Edit",
"style": {
"text-align": "left",
"flex-grow": "1",
"margin": "0 4px"
}
}
]
},
{
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"attributes": {
"class": "ms-bgColor-white ms-fontColor-neutralPrimary ms-bgColor-neutralLight--hover"
},
"style": {
"border": "none",
"outline": "none",
"cursor": "pointer",
"padding": "4px",
"width": "100%",
"display": "flex",
"align-items": "center",
"height": "36px"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "View"
},
"style": {
"font-size": "16px",
"margin": "0 4px"
}
},
{
"elmType": "span",
"txtContent": "View",
"style": {
"text-align": "left",
"flex-grow": "1",
"margin": "0 4px"
}
}
]
},
{
"elmType": "button",
"customRowAction": {
"action": "delete"
},
"attributes": {
"class": "ms-bgColor-white ms-fontColor-neutralPrimary ms-bgColor-neutralLight--hover"
},
"style": {
"border": "none",
"outline": "none",
"cursor": "pointer",
"padding": "4px",
"width": "100%",
"display": "flex",
"align-items": "center",
"height": "36px"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Delete"
},
"style": {
"font-size": "16px",
"margin": "0 4px"
}
},
{
"elmType": "span",
"txtContent": "Delete",
"style": {
"text-align": "left",
"flex-grow": "1",
"margin": "0 4px"
}
}
]
}
]
}
}
}
]
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"text-align": "left",
"margin": "12px",
"height": "27px",
"width": "92%",
"background-color": "#faf9f8",
"display": "inline-table",
"border-radius": "10px"
},
"children": [
{
"elmType": "p",
"style": {
"height": "3px",
"margin-left": "5px"
},
"attributes": {
"class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
},
"txtContent": "Course"
},
{
"elmType": "p",
"style": {
"color": "#00338d",
"margin-left": "5px"
},
"txtContent": "=substring(toString([$Course]), 0, 25)"
}
]
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"text-align": "left",
"margin": "12px",
"height": "27px",
"width": "92%",
"background-color": "#faf9f8",
"display": "inline-table"
},
"children": [
{
"elmType": "p",
"style": {
"height": "3px",
"margin-left": "5px"
},
"attributes": {
"class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
},
"txtContent": "Category"
},
{
"elmType": "p",
"style": {
"color": "#00338d",
"margin-left": "5px"
},
"txtContent": "=substring(toString([$Category]), 0, 25)"
}
]
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"text-align": "left",
"margin": "12px",
"height": "27px",
"width": "92%",
"background-color": "#faf9f8",
"display": "inline-table"
},
"children": [
{
"elmType": "p",
"style": {
"height": "3px",
"margin-left": "5px"
},
"attributes": {
"class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
},
"txtContent": "Start Date"
},
{
"elmType": "p",
"style": {
"color": "#00338d",
"margin-left": "5px"
},
"txtContent": "=substring(toString([$Startdate]), 0, 25)"
}
]
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"text-align": "left",
"margin": "12px",
"height": "27px",
"width": "92%",
"background-color": "#faf9f8",
"display": "inline-table"
},
"children": [
{
"elmType": "p",
"style": {
"height": "3px",
"margin-left": "5px"
},
"attributes": {
"class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
},
"txtContent": "Day in the Life"
},
{
"elmType": "p",
"style": {
"color": "#00338d",
"margin-left": "5px"
},
"txtContent": "=substring(toString([$Notes]), 0, 25)"
}
]
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"text-align": "left",
"margin": "12px",
"height": "27px",
"width": "92%",
"background-color": "#faf9f8",
"display": "inline-table",
"border-radius": "10px"
},
"children": [
{
"elmType": "p",
"style": {
"height": "3px",
"margin-left": "5px"
},
"attributes": {
"class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
},
"txtContent": "Innovation & Awareness"
},
{
"elmType": "p",
"style": {
"color": "#00338d",
"margin-left": "5px"
},
"txtContent": "Test List"
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"width": "95%",
"margin-top": "30px",
"align-items": "center",
"padding": "13px 7px",
"border-top-width": "1px",
"border-top-style": "solid",
"border-radius": "10px"
},
"attributes": {
"class": "ms-borderColor-neutralLight"
},
"defaultHoverField": "[$AssignedTo]",
"children": [
{
"elmType": "img",
"style": {
"border-radius": "50%",
"height": "32px",
"opacity": "=if([$AssignedTo], 1, 0.6)"
},
"attributes": {
"src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$AssignedTo.email]"
}
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"padding-left": "8px",
"font-style": "=if([$AssignedTo],'inherit','italic')"
},
"txtContent": "[$AssignedTo.title]"
}
]
}
]
}
]
}
}
Comments
Post a Comment