Multi stage SharePoint form layout

Are there any JASON or JavaScript available for muti-stage SharePoint list form customisation? I know this can be done with the help of PowerApps or Nintex but we wanted to keep the form view simple same as out of box item.

developer

Lists

Microsoft Lists

SharePoint Online

SvenSieverding

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"
          }
        ]
      }
    ]
  }

SvenSieverding
Bronze Contributor
Nov 25, 2022
barakathcs

That depends on what you mean by "multi stage".

Do you want to have some kind of tabs or pivots and group some properties in the list form and show/hide them depending on the selected tab?
Then you will need a PowerApp or a Nintex form or a completely new SPFX Form Customizer. (https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-form-customizer)

Or do you just want to group the fields in your form in some sections and each section represents a state?
Then you could use a formatting json to re-organize your fields into sections (https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-configuration#configure-custom-body-with-one-or-more-sections)

Or do you want to change the visibility of available fields on a form depending on the value of a "state" field?
Then you can apply conditional formulas on some fields and hide them if the state field does not have a certain value (https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-conditional-show-hide)
- barakathcs
  Copper Contributor
  Nov 25, 2022
  I mean progress stages like Stage 1,2,3 in a form view. Each stage will have its own field value that ties to the same list.
  - SvenSieverding
    Bronze Contributor
    Nov 25, 2022
    barakathcs
    
    You mean like this?
    
    If i select "Stage1" then the fields "FieldStage1" and "DateStage1" are visible:
    
    If i select "Stage2" then the fields "FieldStage1" and "DateStage1" are hidden and the field "FieldStage2" is visible.
    
    Could you explain a little bit more on how you want the form to look?

Forum Discussion

Multi stage SharePoint form layout

Resources