Forum Discussion
Custom Column Formatting - Pills - Progress Bar
I know I seen this somewhere on the pnp but I cannot find it. I want to format my column to look sort of like this. Is it possible? Sorry for the terrible drawing. This is what my ...
FlowTime1990 I think you are looking for this PnP list formatting sample: Approval Status Hover Card
Example JSON:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
"title": "=if([$_ModerationStatus]=='Draft', 'An Approval Request can be submitted', if([$_ModerationStatus]=='Pending', 'An Approval Request is already submitted','The last Approval Request had the outcome: ' + [$_ModerationStatus]))"
},
"style": {
"font-size": "14px"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "=if([$_ModerationStatus]=='Draft', 'Flow', if([$_ModerationStatus]=='Pending', 'WorkFlow', 'CircleStopSolid')",
"class": "='ms-fontColor-' + if([$_ModerationStatus]=='Pending' || [$_ModerationStatus]=='Approved', 'neutralSecondaryAlt', if([$_ModerationStatus]=='Rejected', 'red', 'orange'))"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "=if([$FlowStatus]=='',[$_ModerationStatus],if([$FlowStatus]=='Completed',if([$FlowTrigger]=='Yes','Flow started',[$_ModerationStatus]),if([$_ModerationStatus]=='Draft','To be started',@currentField)))"
}
],
"customCardProps": {
"formatter": {
"elmType": "div",
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"padding": "15px 45px 15px 15px"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"font-size": "18px",
"font-weight": "550",
"text-align": "center",
"margin-bottom": "10px"
},
"txtContent": "Approval Status details"
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"padding-left": "15px"
},
"txtContent": " ",
"attributes": {
"iconName": "=if([$_ModerationStatus] == 'Draft', 'StatusCircleQuestionMark',if([$_ModerationStatus] == 'Approved', 'StatusCircleCheckmark',if([$_ModerationStatus] == 'Rejected', 'StatusCircleCheckmark', 'StatusCircleCheckmark')))",
"class": "='ms-fontColor-' + if([$_ModerationStatus] == 'Pending', 'green', if([$_ModerationStatus] == 'Approved', 'green',if([$_ModerationStatus] == 'Rejected', 'green','neutralSecondaryAlt')))"
}
},
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"margin-left": "-16px"
},
"txtContent": " ",
"attributes": {
"iconName": "CircleRing",
"class": "='ms-fontColor-' + if([$_ModerationStatus] == 'Pending', 'green', if([$_ModerationStatus] == 'Approved', 'green',if([$_ModerationStatus] == 'Rejected', 'green','neutralSecondaryAlt')))"
}
},
{
"elmType": "span",
"style": {
"font-size": "=if([$_ModerationStatus] == 'Draft', '16px', '')",
"font-weight": "=if([$_ModerationStatus] == 'Draft', '600', ''",
"padding-left": "9px"
},
"txtContent": "=if([$_ModerationStatus] == 'Draft', 'Ready to start flow', if([$_ModerationStatus] == 'Pending', 'Flow started',if([$_ModerationStatus] == 'Rejected', 'Flow run','Flow run')))",
"attributes": {
"class": "='ms-fontColor-' + if([$_ModerationStatus] == 'Pending', 'green', if([$_ModerationStatus] == 'Approved', 'green',if([$_ModerationStatus] == 'Rejected', 'green','neutralSecondaryAlt')))"
}
},
{
"elmType": "div",
"style": {
"font-size": "=if([$_ModerationStatus] == 'Draft', '10px', '')",
"font-weight": "=if([$_ModerationStatus] == 'Draft', '600', ''",
"text-align": "center",
"border-left-style": "solid",
"border-left-color": "='ms-borderColor-' + if([$_ModerationStatus] == 'Draft', 'neutralSecondaryAlt', if([$_ModerationStatus] == 'Approved', 'green',if([$_ModerationStatus] == 'Rejected', 'green','neutralSecondaryAlt')))",
"margin-left": "21px"
},
"attributes": {
"class": "='ms-fontColor-' + if([$_ModerationStatus] == 'Draft', 'neutralSecondaryAlt', if([$_ModerationStatus] == 'Approved', 'green',if([$_ModerationStatus] == 'Rejected', 'green','neutralSecondaryAlt')))"
},
"txtContent": "=if([$_ModerationStatus] == 'Draft', 'This could be now', if([$_ModerationStatus] == 'Approved', '',if([$_ModerationStatus] == 'Rejected', '','')))"
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"border-left-style": "solid",
"border-left-color": "='ms-borderColor-' + if([$_ModerationStatus] == 'Pending','green',if([$_ModerationStatus] == 'Approved','green',if([$_ModerationStatus] == 'Rejected','green','neutralSecondaryAlt')))",
"text-align": "center",
"margin-left": "21px"
},
"attributes": {
"class": "='ms-fontColor-' + if([$_ModerationStatus] == 'Pending','green',if([$_ModerationStatus] == 'Approved','green',if([$_ModerationStatus] == 'Rejected','green','neutralSecondaryAlt')))"
}
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"padding-left": "15px"
},
"txtContent": " ",
"attributes": {
"iconName": "=if([$_ModerationStatus] == 'Pending', 'StatusCircleQuestionMark',if([$_ModerationStatus] == 'Approved', 'StatusCircleCheckmark',if([$_ModerationStatus] == 'Rejected', 'StatusCircleCheckmark', 'CircleRing')))",
"class": "='ms-fontColor-' + if([$_ModerationStatus] == 'Pending','orange',if([$_ModerationStatus] == 'Approved','green',if([$_ModerationStatus] == 'Rejected','green','neutralSecondaryAlt')))"
}
},
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"margin-left": "-16px"
},
"txtContent": " ",
"attributes": {
"iconName": "CircleRing",
"class": "='ms-fontColor-' + if([$_ModerationStatus] == 'Pending','orange',if([$_ModerationStatus] == 'Approved','green',if([$_ModerationStatus] == 'Rejected','green','neutralSecondaryAlt')))"
}
},
{
"elmType": "span",
"style": {
"font-size": "=if([$_ModerationStatus] == 'Pending', '16px', ''",
"font-weight": "=if([$_ModerationStatus] == 'Pending', '600', ''",
"padding-left": "9px"
},
"txtContent": "=if([$_ModerationStatus] == 'Pending','Pending',if([$_ModerationStatus] == 'Approved','Assessed',if([$_ModerationStatus] == 'Rejected','Assessed','To be assessed')))",
"attributes": {
"class": "='ms-fontColor-' + if([$_ModerationStatus] == 'Pending','orange',if([$_ModerationStatus] == 'Approved','green',if([$_ModerationStatus] == 'Rejected','green','neutralSecondaryAlt')))"
}
},
{
"elmType": "div",
"style": {
"font-size": "10px",
"font-weight": "600",
"text-align": "center",
"border-left-style": "solid",
"border-left-color": "='ms-borderColor-' + if([$_ModerationStatus] == 'Pending', 'neutralSecondaryAlt', if([$_ModerationStatus] == 'Approved', 'green',if([$_ModerationStatus] == 'Rejected', 'red','neutralSecondaryAlt')))",
"margin-left": "21px"
},
"attributes": {
"class": "='ms-fontColor-' + if([$_ModerationStatus] == 'Pending', 'neutralSecondaryAlt', if([$_ModerationStatus] == 'Approved', 'green',if([$_ModerationStatus] == 'Rejected', 'red','neutralSecondaryAlt')))"
},
"txtContent": "=if([$_ModerationStatus] == 'Pending', ' since ' +toLocaleDateString([$Modified]), if([$_ModerationStatus] == 'Approved', '',if([$_ModerationStatus] == 'Rejected', '','')))"
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"border-left-style": "solid",
"border-left-color": "='ms-borderColor-' + if([$_ModerationStatus] == 'neutralSecondaryAlt', 'Outcome', if([$_ModerationStatus] == 'Approved', 'green',if([$_ModerationStatus] == 'Rejected', 'red','neutralSecondaryAlt')))",
"margin-left": "21px"
},
"attributes": {
"class": "='ms-fontColor-' + if([$_ModerationStatus] == 'neutralSecondaryAlt', 'Outcome', if([$_ModerationStatus] == 'Approved', 'green',if([$_ModerationStatus] == 'Rejected', 'red','neutralSecondaryAlt')))"
}
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"padding-left": "15px"
},
"txtContent": " ",
"attributes": {
"iconName": "=if([$_ModerationStatus]== 'Approved', 'StatusCircleCheckmark', if([$_ModerationStatus]== 'Rejected', 'Cancel','CircleRing'))",
"class": "='ms-fontColor-' +if([$_ModerationStatus] == 'neutralSecondaryAlt', 'Outcome', if([$_ModerationStatus] == 'Approved', 'green',if([$_ModerationStatus] == 'Rejected', 'red','neutralSecondaryAlt')))"
}
},
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"margin-left": "-16px"
},
"txtContent": " ",
"attributes": {
"iconName": "CircleRing",
"class": "='ms-fontColor-' + if([$_ModerationStatus] == 'neutralSecondaryAlt', 'Outcome', if([$_ModerationStatus] == 'Approved', 'green',if([$_ModerationStatus] == 'Rejected', 'red','neutralSecondaryAlt')))"
}
},
{
"elmType": "span",
"style": {
"font-size": "=if([$_ModerationStatus] == 'Approved', '16px', if([$_ModerationStatus] == 'Rejected', '16px',''))",
"font-weight": "=if([$_ModerationStatus] == 'Approved', '600', if([$_ModerationStatus] == 'Rejected', '600',''))",
"padding-left": "9px"
},
"txtContent": "=if([$_ModerationStatus] == 'Draft', 'Outcome', if([$_ModerationStatus] == 'Approved', 'Approved',if([$_ModerationStatus] == 'Rejected', 'Rejected','Outcome')))",
"attributes": {
"class": "='ms-fontColor-' + if([$_ModerationStatus] == 'neutralSecondaryAlt', 'Outcome', if([$_ModerationStatus] == 'Approved', 'green',if([$_ModerationStatus] == 'Rejected', 'red','neutralSecondaryAlt')))"
}
},
{
"elmType": "div",
"style": {
"font-size": "10px",
"font-weight": "600",
"text-align": "center",
"margin-left": "21px"
},
"attributes": {
"class": "='ms-fontColor-' + if([$_ModerationStatus] == 'Approved', 'black', 'black')"
},
"txtContent": "=if([$_ModerationStatus] == 'Pending', '', if([$_ModerationStatus] == 'Approved', ' on ' + toLocaleDateString([$Modified]),if([$_ModerationStatus] == 'Rejected', ' on ' + toLocaleDateString([$Modified]),'')))"
}
]
}
]
}
]
}
]
},
"openOnEvent": "hover",
"directionalHint": "bottomCenter",
"isBeakVisible": true
}
}
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs