Forum Discussion
Solved
Sharepoint list form Progress Bar
Hi, I want to add a progress bar in share point list form . How can I do that ? We need 3 Stages at the top of List form . 1) Not Started 2 ) In progress 3 ) Completed . We have 6 radio button A, B C,DE . And close out radio button . When click the New button Status at the top should be Not started 2 ) When click edit and if all the 5 radio button selected as Yes .Status should be completed and close out radio button should be marked as Yes. If any of the A,B,C,D,E status is No.Close out Should be No, Status should bi in progress . Please guide .
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
8 Replies
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,
SvenSvenSieverding - Thanks .
- Skip the JSON and use a board view and a workflow.
1. Delete the existing fields for status and radio buttons.
2. Create a new choice field called Progress with 3 choices Not started, In Progress, Completed. Set the default value to Not Started.
3. Create a new choice field called Status with values New, Status #2, Status #3, & Completed. Set the default value to New.
4. Create a board view based on the Progress field. This will give you 3 sections for Not started, In Progress and Completed. All items should be in the Not Started. You move items between categories by drag/drop or editing the Progress field.
5. To base the Progress value on the Status, you'll need to add a Power Automate workflow. Use the "Get changes" step to monitor each item for changes.
Add the condition where if Status change = true, then in the yes column I would use a switch with a case for each of your Status values. That way the Progress value will be set properly regardless of what choice they pick, even if they move an item "backwards".
Status #2 = set Progress to In Progress
Status #3 = set Progress to In Progress
Status Completed = set Progress to Completed
Since you have multiple status values in the In Progress step, I would add a trigger condition so the flow runs ONLY under certain circumstances. Maybe ONLY when Status change = true or when Status field = a value that triggers a Progress change. In my example, that would be ONLY if Status = Status #2 (move to In Progress) OR if Status = Completed. This way as people edit the item through the middle "In Progress" states, the flow won't run as much.
6. Edit the default form and REMOVE the Status field from the form. The field is still manually editable and people will be able to set the status by changing the fields independently of your radio buttons. Removing the field will make that harder, but not impossible.
Now, when you open your list to the board view, you'll see the items distributed across the 3 categories. You can manually move items by just dragging them, or by updating the status value or they will move automatically via the workflow.
No JSON or custom form is needed.Rachel_Davis & ganeshsanap - Project board option is not flexible as it need manual drag and drop and it don’t maintain the details in one row. Guide me if any way to do it in Sharepoint List form .
Here is more information about the board views in SharePoint online modern experience lists: Board view in SharePoint online / Microsoft Lists
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.
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.
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.
