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

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?
  - 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/

Forum Discussion

Multi stage SharePoint form layout

Share

Resources