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...

App

developer

files

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

Rachel_Davis

Iron Contributor

Aug 28, 2023

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.

ganeshsanap

MVP

Aug 28, 2023

Bd2023-b

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.

Forum Discussion

Sharepoint list form Progress Bar

Resources