Forum Discussion
Sharepoint list form Progress Bar
- Aug 29, 2023
Hi Bd2023-b,
do you mean like this?ā
In that case create five Yes/No Columns "ColA","ColB","ColC","ColD" and "ColE".
Now create a calculated column "CloseOut"
and use the formula=AND([ColA],[ColB],[ColC],[ColD],[ColE])That will automatically be true, if all other columns are false and false otherwise
Now create a new item in your list and select "Configure Layout" from the little menu at the top right
Paste the following formatting code here{ "elmType": "div", "style": { "display": "flex", "flex-wrap": "wrap", "flex-direction": "row", "justify-content": "space-evenly", "width": "100%" }, "attributes": { "class": "ms-fontSize-18" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "center", "margin": "20px", "white-space": "nowrap" }, "children": [ { "elmType": "div", "txtContent": "Not started", "style": { "margin-bottom": "10px" } }, { "elmType": "div", "style": { "margin-bottom": "10px" }, "attributes": { "iconName": "=if([$ColA]||[$ColB]||[$ColC]||[$ColD]||[$ColE] ,'CircleShapeSolid' , 'CompletedSolid')", "class": "='ms-fontSize-42' + if([$ColA]||[$ColB]||[$ColC]||[$ColD]||[$ColE] ,' ms-fontColor-neutralTertiary' , ' ms-fontColor-success')" } } ] }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "center", "margin": "20px", "white-space": "nowrap" }, "children": [ { "elmType": "div", "txtContent": "In Progress", "style": { "margin-bottom": "10px" } }, { "elmType": "div", "style": { "margin-bottom": "10px" }, "attributes": { "iconName": "=if((([$ColA]+[$ColB]+[$ColC]+[$ColD]+[$ColE])>0)&&(([$ColA]+[$ColB]+[$ColC]+[$ColD]+[$ColE])<5) , 'CompletedSolid','CircleShapeSolid')", "class": "='ms-fontSize-42' + if((([$ColA]+[$ColB]+[$ColC]+[$ColD]+[$ColE])>0)&&(([$ColA]+[$ColB]+[$ColC]+[$ColD]+[$ColE])<5) , ' ms-fontColor-success',' ms-fontColor-neutralTertiary' )" } } ] }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "center", "margin": "20px", "white-space": "nowrap" }, "children": [ { "elmType": "div", "txtContent": "Completed", "style": { "margin-bottom": "10px" } }, { "elmType": "div", "style": { "margin-bottom": "10px" }, "attributes": { "iconName": "=if([$ColA]&&[$ColB]&&[$ColC]&&[$ColD]&&[$ColE] , 'CompletedSolid','CircleShapeSolid')", "class": "='ms-fontSize-42' + if([$ColA]&&[$ColB]&&[$ColC]&&[$ColD]&&[$ColE] , ' ms-fontColor-success',' ms-fontColor-neutralTertiary')" } } ] } ] }
Best Regards,
Sven
Hi Bd2023-b,
do you mean like this?
ā
In that case create five Yes/No Columns "ColA","ColB","ColC","ColD" and "ColE".
Now create a calculated column "CloseOut"
and use the formula
=AND([ColA],[ColB],[ColC],[ColD],[ColE])That will automatically be true, if all other columns are false and false otherwise
Now create a new item in your list and select "Configure Layout" from the little menu at the top right
Paste the following formatting code here
{
"elmType": "div",
"style": {
"display": "flex",
"flex-wrap": "wrap",
"flex-direction": "row",
"justify-content": "space-evenly",
"width": "100%"
},
"attributes": {
"class": "ms-fontSize-18"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"margin": "20px",
"white-space": "nowrap"
},
"children": [
{
"elmType": "div",
"txtContent": "Not started",
"style": {
"margin-bottom": "10px"
}
},
{
"elmType": "div",
"style": {
"margin-bottom": "10px"
},
"attributes": {
"iconName": "=if([$ColA]||[$ColB]||[$ColC]||[$ColD]||[$ColE] ,'CircleShapeSolid' , 'CompletedSolid')",
"class": "='ms-fontSize-42' + if([$ColA]||[$ColB]||[$ColC]||[$ColD]||[$ColE] ,' ms-fontColor-neutralTertiary' , ' ms-fontColor-success')"
}
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"margin": "20px",
"white-space": "nowrap"
},
"children": [
{
"elmType": "div",
"txtContent": "In Progress",
"style": {
"margin-bottom": "10px"
}
},
{
"elmType": "div",
"style": {
"margin-bottom": "10px"
},
"attributes": {
"iconName": "=if((([$ColA]+[$ColB]+[$ColC]+[$ColD]+[$ColE])>0)&&(([$ColA]+[$ColB]+[$ColC]+[$ColD]+[$ColE])<5) , 'CompletedSolid','CircleShapeSolid')",
"class": "='ms-fontSize-42' + if((([$ColA]+[$ColB]+[$ColC]+[$ColD]+[$ColE])>0)&&(([$ColA]+[$ColB]+[$ColC]+[$ColD]+[$ColE])<5) , ' ms-fontColor-success',' ms-fontColor-neutralTertiary' )"
}
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"margin": "20px",
"white-space": "nowrap"
},
"children": [
{
"elmType": "div",
"txtContent": "Completed",
"style": {
"margin-bottom": "10px"
}
},
{
"elmType": "div",
"style": {
"margin-bottom": "10px"
},
"attributes": {
"iconName": "=if([$ColA]&&[$ColB]&&[$ColC]&&[$ColD]&&[$ColE] , 'CompletedSolid','CircleShapeSolid')",
"class": "='ms-fontSize-42' + if([$ColA]&&[$ColB]&&[$ColC]&&[$ColD]&&[$ColE] , ' ms-fontColor-success',' ms-fontColor-neutralTertiary')"
}
}
]
}
]
}
Best Regards,
Sven
SvenSieverding - Thanks .