User Profile
dnooner
Copper Contributor
Joined Sep 05, 2023
User Widgets
Recent Discussions
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%" } } ] } } } ] } ] }
