Multi stage SharePoint form layout

[barakathcs]

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.

[#2]

@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-customize...)

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#c...)

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

[#3]

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.

[#4]

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

[#5]

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

[#6]

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

[#7 · Accepted solution]

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

[#8]

Thanks @Sven, appreciate your help