In my scenario I have a SharePoint list called travel requests the list includes columns to track details about a travel request that a user can.
Make to create an app I will start with a page design I'll pick one of the responsive layouts header main section photo first I'll connect to my data.
Source I'll be leveraging modern controls so under G settings I'll turn on Modern controls and themes in the header container I'll go.
And insert the modern header control I'll upload a logo for the header I'll set the title for the header control in the main container I'll insert the model table.
Main container to create a multi-step form experience I'll click on new screen and and pick one of the modern screen templates called approval.
Request this template has a form this is a modern form control I will connect it to the travel request SharePoint list I would like to make this a multi-step form.
Experience to do that for my screens on visible property I'll use the set function set and create a variable called V step and set its value to.
One I will use this variable to Define which data cards in my form control should be visible based upon the value of that variable in my form control if I hold.
The control key I can start selecting multiple data cards in my scenario I've selected three data cards that I would like to show as part of my first.
Posts Related:
- Amazing Excel dashboard for producers companies
- New Products Mockup Templates Free Download Sheri Sk Photoshop Tutorial Office
- 100 Editable Logo Bundle Free Download In CMYK And RGB Color Sheri Sk Photoshop Tutorial Office
Step for the visible property of these
Cards I will use the formula where step equal to 1 next I'll select the data cards that I.Would like to show in Step number two and the visible property for these data cards where step equal to two I'll create a third step and start selecting the data card that I would.
Like to show as part of that step visible property ver step equal to three and at the end I have the attachments data card the visible property for this card I will set to ver.
Stab equal to 4 now if you notice none of the data cards are visible that's because the variable is set When I visit this screen so let's go back to the first screen and.
Let's add a button that allows the user to create a new travel request in the screen I have this footer container I will move this up and in here I will go and insert a modern.
Button control it's text I will set to new request I'll increase its width on select of this button I will go ahead and reset my form control the form in my.
Scenario is called approval form one so I'll select that and then navigate the user to my screen screen number two if I preview the app click new.
Request it leads me to the form screen note this is my multi-step form experience there is also a button control called submit request if you explore the on select function of this.
Button it submits the form and if that is successful the form control has an onsuccess function I would like to navigate the.
User back to the home screen screen
One I also need buttons to allow the user to step through the different parts of my form I'll select the form.Container and in this go and insert a horizontal container the horizontal container flexible height I'll turn off and give it a defined height of let's say.
50 the submit button right click cut select the horizontal container right click paste and in this horizontal container.
I'll go and insert two more button controls the first one I'll set the text as previous and the second button that I added I'll set its text as.
Next the submit request button I'll reorder it and move it to the end this horizontal container I would want all the buttons to be positioned in the Center vertical.
Alignment center and there should be some gap between the buttons the previous and next buttons I'll change its style I'll set it as.
Subtle the previous button should be visible only when my variable is greater than one my next button should be visible where step is not equal to my last step.
Which is four and the submit button visible where step is equal to 4 the next button on select of this I would like to increase the step count.
And I will do that by setting my variable ver step to ver step + one I'll preview click next takes me to the second step of my form and shows the columns that I.
Configured to be visible in part two of my form the previous button on select I will reduce my step variable value by one click previous it's part one of the.
Form next part two next part three next the last part of my form now I see submit request the sidebar container I will go ahead and reorder.
This and move it to the start so it moves to the left in here there is a text control called reviewers I'll change this to steps and there is a gallery whose items.
Property is an array of data I'll keep the step number name I'll set it to travel info title and status I will remove current variable is equal to.
1 and the same process I simply have to repeat for my other steps my second step I'll call it travel details current will be where step equal to two third step I'll call it air Fair hotel and my.
Fourth step I will call it attachments I can also add emojis in here that will result in some errors because I modified the schema of the items.
Property one of the errors is related to a text control in this gallery that was displaying the title I'll go ahead and delete that there is the modern badge control content for this this item. step.
To show the step number base palette color all I'm doing here is setting the color of the badge based upon where I am in this multi-step.
Process in this Gallery there is also a rectangle shape control its width I will set it to three I'll go ahead and reduce its height the visible property for this.
Rectangle shape this item do step is not equal to 4 so if I preview I can clearly see that there are four steps as part of this form process.
First one is travel info if I click next this turns green and I'm on the second step now which is travel details the text here which says request approval I don't need that so I'll.
Remove move it and my horizontal container if I would like to put on the top of the form can simply reposition this on the top now notice as part of my data source.
There are certain data cards that are required and the required field validations here will only come in effect when the user actually goes and submits the.
Form now when submit request is clicked then is logic to submit the form but also reset the form comment out the reset form section so note when I hit submit it.
Doesn't submit and the reason that it has not submitted is is if I go back to the previous parts of the form you'll notice that there are required field validations that have triggered and the.
User needs to fill these in now let's go back to the home screen and come back again to a new form experience in the header of my second screen header has an on select logo.
Function navigate to my home screen so click I'm on my home screen I click new and back to my form screen on select of the next.
Button if V step is equal to one and my data card for title here I'll copy its name paste it right here.
Valid now I'll put a not in front of this so if this is not valid travel type I'll copy its name since I have more cards I want to.
Combine this check of whether they are not valid in an or condition the names of the cards can have spaces so best to put the names of the cards in single codes.
