SOLVED

Multi stage SharePoint form layout

Copper Contributor

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.

 

 

 

 

7 Replies

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

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.

@barakathcs 

 

You mean like this?

 

If i select "Stage1" then the fields "FieldStage1" and "DateStage1" are visible:

Stage 1.png

 

If i select "Stage2" then the fields "FieldStage1" and "DateStage1" are hidden and the field "FieldStage2" is visible.

Stage 2.png


Could you explain a little bit more on how you want the form to look?

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

@barakathcs 

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

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




best response confirmed by barakathcs (Copper Contributor)
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

Stage4.png

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


 

Thanks @Sven, appreciate your help
1 best response

Accepted Solutions
best response confirmed by barakathcs (Copper Contributor)
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

Stage4.png

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


 

View solution in original post