Creating Multi-Step Forms in Power Apps | Tutorial

hello everyone razza here in this video I will show you how to create multi-step modern form experiences in power apps we will leverage one of the new screen templates to frame our modern form break it down into a multi-step form experience and also highlight the status of the step we are on so let's check it out in action [Music] 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 control connect it to my SharePoint list the table control alignment and container stretch flexible height on so it takes the full real estate available in the 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 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 valid this is for where step one put a brackets around this so if it is the first step and if either of these cards are not valid in that case I would like to show the validation message so what I'll do right here is I'll purposely go ahead and submit the form I know it won't submit because the validation will click in else you go ahead and increase the step format text I'll click next notice those cards are not valid I have to fill the information in now if I click next it will move me to the next part of the form now on this part of the form if I click next it shouldn't move ahead if there are required Fields back to the same next button that I have I'll write an or condition I'll literally just copy the first code because it's going to be similar I want step two here I have two data cards that I want to check its validity for go on ahead and plugged in that logic now if I hit next it won't move ahead until I fill in the start date and the end date now if I click next move ahead to the next part of the form and this time if I click submit it will go ahead and submit the data lead me to the home screen and here is the new entry that got created if I click new request I am back to the same process for creating a new travel request if you enjoyed this video then do like comment and subscribe to my YouTube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 30,016

Keywords: power apps, powerapps tutorial, power apps beginner, power apps microsoft, powerapps tabbed form, powerapps multi screen form, multi step form, multi step form powerapps, multi step form power apps, multi step form in powerapps canvas app, multi-step, form, form control, powerapps, reza dorrani, form validations, power apps modern form, microsoft powerapps tutorial, power apps forms, multi step form in powerapps, multi page forms powerapps, powerapps forms tutorial

Id: 9Z-DG-RnAN4

Length: 14min 41sec (881 seconds)

Published: Mon Apr 29 2024