Forum Discussion
annetoal
Jun 03, 2022Brass Contributor
JSON formatting of SharePoint list
I am using some JSON code from Reza Dorrani's GitHub to make an approval timeline in a SharePoint list. The code allows you to have 4 different statuses:
Status Color Position
New Blue Left
Pending Yellow Center
Approved Green Right
Rejected Red Right
I would like to add a fifth status: Deleted with a Black pointer in the Right position. Would someone please look at the JSON code and tell me what needs to be done?
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"position": "relative",
"width": "100%",
"height": "70px"
},
"children": [
{
"elmType": "div",
"style": {
"position": "absolute",
"display": "flex",
"align-items": "center",
"justify-content": "center",
"width": "100%",
"height": "100%"
},
"children": [
{
"elmType": "div",
"style": {
"width": "100%",
"height": "5px"
},
"attributes": {
"class": "ms-bgColor-neutralSecondaryAlt"
}
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute",
"display": "flex",
"align-items": "center",
"justify-content": "=if([$Status]=='Pending','center',if([$Status]=='New','left','flex-end'))",
"width": "100%",
"height": "100%"
},
"children": [
{
"elmType": "div",
"style": {
"width": "25px",
"height": "25px",
"border-radius": "50%",
"cursor": "pointer"
},
"attributes": {
"class": "=if([$Status]=='Rejected','ms-bgColor-red',if([$Status]=='Pending','ms-bgColor-yellow',if([$Status]=='Approved','ms-bgColor-green','ms-bgColor-blue')))"
},
"customCardProps": {
"directionalHint": "rightCenter",
"openOnEvent": "click",
"isBeakVisible": true,
"formatter": {
"elmType": "div",
"style": {
"width": "300px",
"height": "300px",
"padding": "10px 20px 10px 20px",
"background-color": "#E6E6E3"
},
"children": [
{
"elmType": "div",
"txtContent": "=if([$Status]!='New',[$ApprovalComments],'No History Available'",
"style": {
"width": "100%",
"height": "100%"
}
}
]
}
}
}
]
}
]
}
Thanks in advance,
Anne
annetoal slip this into line 53 -- if([$Status]=='Deleted','ms-bgColor-black'
"class": "=if([$Status]=='Rejected','ms-bgColor-red',if([$Status]=='Deleted','ms-bgColor-black',if([$Status]=='Pending','ms-bgColor-yellow',if([$Status]=='Approved','ms-bgColor-green','ms-bgColor-blue')))"
annetoal slip this into line 53 -- if([$Status]=='Deleted','ms-bgColor-black'
"class": "=if([$Status]=='Rejected','ms-bgColor-red',if([$Status]=='Deleted','ms-bgColor-black',if([$Status]=='Pending','ms-bgColor-yellow',if([$Status]=='Approved','ms-bgColor-green','ms-bgColor-blue')))"
- annetoalBrass ContributorThank you very much. It worked a treat.
Anne