Multi stage SharePoint form layout

{ "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", "style": { "margin-bottom": "10px" }, "attributes": { "iconName": "=if([$Stage] == 'Stage1' ,'CompletedSolid' , 'CircleShapeSolid')", "class": "='ms-fontSize-42' + if([$Stage] == 'Stage1' ,' ms-fontColor-success' , ' ms-fontColor-neutralTertiary')" } }, { "elmType": "div", "txtContent": "Stage 1" } ] }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "center", "margin": "20px", "white-space": "nowrap" }, "children": [ { "elmType": "div", "style": { "margin-bottom": "10px" }, "attributes": { "iconName": "=if([$Stage] == 'Stage2' ,'CompletedSolid' , 'CircleShapeSolid')", "class": "='ms-fontSize-42' + if([$Stage] == 'Stage2' ,' ms-fontColor-success' , ' ms-fontColor-neutralTertiary')" } }, { "elmType": "div", "txtContent": "Stage 2" } ] }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "center", "margin": "20px", "white-space": "nowrap" }, "children": [ { "elmType": "div", "style": { "margin-bottom": "10px" }, "attributes": { "iconName": "=if([$Stage] == 'Stage3' ,'CompletedSolid' , 'CircleShapeSolid')", "class": "='ms-fontSize-42' + if([$Stage] == 'Stage3' ,' ms-fontColor-success' , ' ms-fontColor-neutralTertiary')" } }, { "elmType": "div", "txtContent": "Stage 3" } ] } ] }

barakathcs

Copper Contributor

Nov 25, 2022

SvenSieverding

Stage -1 - few field like single line text, date picker, people

Stage -2 few fields again with previous and next button

Sample below

https://www.codingnepalweb.com/multi-step-form-html-css-javascript/

SvenSieverding

Bronze Contributor

Nov 27, 2022

barakathcs

In addition to my previous message:

In combination with the mentioned conditional formulas to hide fields for some stages you could use a header formatting JSON to make the default SharePoint form look more like your sample, but you still won't get the "Next"/"Previous" Buttons

{
    "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",
            "style": {
              "margin-bottom": "10px"
            },
            "attributes": {
              "iconName": "=if([$Stage] == 'Stage1' ,'CompletedSolid' , 'CircleShapeSolid')",
              "class": "='ms-fontSize-42' + if([$Stage] == 'Stage1' ,' ms-fontColor-success' , ' ms-fontColor-neutralTertiary')"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Stage 1"
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center",
          "margin": "20px",
          "white-space": "nowrap"
        },
        "children": [      
          {
            "elmType": "div",
            "style": {
              "margin-bottom": "10px"
            },
            "attributes": {
              "iconName": "=if([$Stage] == 'Stage2' ,'CompletedSolid' , 'CircleShapeSolid')",
              "class": "='ms-fontSize-42' + if([$Stage] == 'Stage2' ,' ms-fontColor-success' , ' ms-fontColor-neutralTertiary')"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Stage 2"
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center",
          "margin": "20px",
          "white-space": "nowrap"
        },
        "children": [        
          {
            "elmType": "div",
            "style": {
              "margin-bottom": "10px"
            },
            "attributes": {
              "iconName": "=if([$Stage] == 'Stage3' ,'CompletedSolid' , 'CircleShapeSolid')",
              "class": "='ms-fontSize-42' + if([$Stage] == 'Stage3' ,' ms-fontColor-success' , ' ms-fontColor-neutralTertiary')"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Stage 3"
          }
        ]
      }
    ]
  }

barakathcs
Copper Contributor
Dec 01, 2022
Thanks Sven, appreciate your help

SvenSieverding
Bronze Contributor
Nov 26, 2022
barakathcs

OK.... in that case the best you can do without PowerApps or SPFX is something like

I created a "Choice" field, called it "Stage" and configured it to use radio buttons.
Then i added a conditional formula on all other fields like this to just show them, if the correct stage is selected
=if([$Stage] == 'Stage1', 'true', 'false')

But you don't get a "Previous-Stage"/"Next-Stage" button that way.

If you need to have such a button and if you want to make the form look more like your sample, then you need to create a custom form using PowerApps or an SPFX Form customizer.

Forum Discussion

Resources