Forum Discussion

Christine12345's avatar
Christine12345
Copper Contributor
Jan 22, 2024

I want to add a progress bar using multiple date columns instead of a number columns.

I want to use multiple date columns to track the progress. When a date is added it will show a check mark as completed.

 

I found this option, but I can't figure out how to change the JSON for date columns instead. Any help is appreciated. Thank you.

 

 

Here is the JSON I'm using.

 

{
"elmType": "div",
"style": {
"font-size": "16px"
},
"children": [
{
"elmType": "span",
"attributes": {
"title": "Step 1",
"iconName": "=if(@currentField < 1, 'CircleRing', 'SkypeCircleCheck')",
"class": "='ms-fontColor-' + if(@currentField == 1, 'green', if(@currentField > 1, 'greenLight', 'neutralLight'))"
},
"style": {
"padding": "0 2px"
}
},
{
"elmType": "span",
"attributes": {
"title": "Step 2",
"iconName": "=if(@currentField < 2, 'CircleRing', 'SkypeCircleCheck')",
"class": "='ms-fontColor-' + if(@currentField == 2, 'green', if(@currentField > 2, 'greenLight', 'neutralLight'))"
},
"style": {
"padding": "0 2px"
}
},
{
"elmType": "span",
"attributes": {
"title": "Step 3",
"iconName": "=if(@currentField < 3, 'CircleRing', 'SkypeCircleCheck')",
"class": "='ms-fontColor-' + if(@currentField == 3, 'green', if(@currentField > 3, 'greenLight', 'neutralLight'))"
},
"style": {
"padding": "0 2px"
}
},
{
"elmType": "span",
"attributes": {
"title": "Step 4",
"iconName": "=if(@currentField < 4, 'CircleRing', 'SkypeCircleCheck')",
"class": "='ms-fontColor-' + if(@currentField == 4, 'green', if(@currentField > 4, 'greenLight', 'neutralLight'))"
},
"style": {
"padding": "0 2px"
}
},
{
"elmType": "span",
"attributes": {
"title": "Step 5",
"iconName": "=if(@currentField < 5, 'CircleRing', 'SkypeCircleCheck')",
"class": "='ms-fontColor-' + if(@currentField == 5, 'green', if(@currentField > 5, 'greenLight', 'neutralLight'))"
},
"style": {
"padding": "0 2px"
}
}
]
}

 

No RepliesBe the first to reply

Resources