Forum Discussion
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.
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" } ] } ] }
7 Replies
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)- 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.
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?
