Forum Discussion
dnooner
Sep 05, 2023Copper Contributor
Sharepoint Column JSON Formatting Help
Hey everyone, I got most of the JSON from Reza on youtube for this approval timeline customization. The only thing is that the background color is only visible for a certain range when i scroll. Can anyone assist? I dont really know JSON.
{
"$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([$ApprovalStatus]=='Pending Susan\\'s Approval' || [$ApprovalStatus]=='Pending VP of Finance Approval' || [$ApprovalStatus]=='Pending Executive Approval','center', if([$ApprovalStatus]=='Pending Submission','left','flex-end'))",
"width": "100%",
"height": "100%"
},
"children": [
{
"elmType": "div",
"style": {
"width": "25px",
"height": "25px",
"border-radius": "50%",
"cursor": "pointer"
},
"attributes": {
"class": "=if([$ApprovalStatus]=='Rejected','ms-bgColor-red',if([$ApprovalStatus]=='Pending Susan\\'s Approval','ms-bgColor-yellow', if([$ApprovalStatus]=='Pending Executive Approval','ms-bgColor-yellow', if([$ApprovalStatus]=='Pending VP of Finance Approval','ms-bgColor-yellow', if([$ApprovalStatus]=='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([$ApprovalHistory]!='',[$ApprovalHistory],'No History Available')",
"style": {
"width": "100%",
"height": "100%"
}
}
]
}
}
}
]
}
]
}
No RepliesBe the first to reply