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,
I see two possibilities here:
(1) Custom JSON formatting applied to your list forms.
(2) Customize your list forms with Power Apps
jcgonzalezmartin - how custom Json can be used ? Can some one provide a sample solution? Powerapp need lots of other stuff to change not an option.
- ganeshsanapAug 28, 2023MVP
Bd2023-b Check below given JSON formatting samples which might help you:
- Progress bar using text or emoji
- Conditional Progress Color
- Icon Progress Bar
- Custom Hover Card (Column)
You can find all other column and view JSON samples at: SharePoint List Formatting Samples
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.