Forum Discussion

Bd2023-b's avatar
Bd2023-b
Brass Contributor
Aug 27, 2023
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...
  • SvenSieverding's avatar
    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

Resources