PowerApps: Form Across Multiple Screens

It is a common request, to have a form that is so long, that it needs to span across several screens, like a “wizard”.  Fill out a few fields, click Next, fill out a few more, click Next, etc. In this post, I’ll show you a way to accomplish that in PowerApps.  Here is an example:

This slideshow requires JavaScript.

This concept is a bit tricky, because in PowerApps, on each separate screen, it’s a separate form control, so the goal is to make sure that as you’re navigating from screen to screen, you’re editing the same form, and not creating a brand new one each time.  In this solution, I’ll show you how to build this concept, it’s actually going to be saving the form to SharePoint on each screen, but a “draft mode” status can be added, so that although it has been created in SharePoint, with it being in draft, this indicates that it’s not finished and not officially submitted yet.

You’ll notice that a lot is done with variables in this solution:

varFormMode – This is used in the DefaultMode property of all of the forms.

varRecord – This is used to store the whole record of the current item.

varSubmitMode – This is used at the end, to achieve the draft versus submitted logic.

Preparation.  Besides a welcome page as the main screen for the app, I’ve created 5 screens, and named them scrForm1, scrForm2, etc.  On each screen, there’s one form control, named Form1, Form2, etc.  All five of my forms have the same data source, my new technology form.  My data source is called NewTechnology.  On each of the forms, I’ve added a different set of fields.  This SharePoint list has over 50 fields, so it’s at least ten per form.  Create an additional text column in SharePoint, called Form Status, and set the default value to Draft.  Don’t make any of them required columns in SharePoint.  You can do logic in PowerApps to make them required, instead.  On each card in each form, you can set the Required property to true, if you want to make sure they are filled out before moving to the next screen:
Check out my Advanced PowerApps Course

powerapps-card-required

Click the NEW button on the home screen of the app, to fill out a new form:

new_button_powerapps

New Button:

For the OnSelect property:

Set(varFormMode,"new"); ResetForm(Form1); Navigate(scrForm1,ScreenTransition.None)

Page 1:

Form1 properties:

DefaultMode
If(varFormMode="edit",FormMode.Edit,varFormMode="view",FormMode.View,FormMode.New)
Item
varRecord
OnSuccess
Set(varRecord,Form1.LastSubmit);Navigate(scrForm2,ScreenTransition.None)


Next Button.  In my app, the next button is simply an arrow icon at the top right of each screen.  You can make yours bigger and more obvious if you’d like.

For the OnSelect property:

If(varFormMode="view",Navigate(scrForm2,ScreenTransition.None),SubmitForm(Form1))

Page 2:

Form2 properties:

DefaultMode
If(varFormMode="view",FormMode.View,FormMode.Edit)
Item
LookUp(NewTechnology,ID=varRecord.ID)
OnSuccess
Navigate(scrForm3,ScreenTransition.None)

Next Button

For the OnSelect property:

If(varFormMode="view",Navigate(scrForm3,ScreenTransition.None),SubmitForm(Form2))

Notice above, that on the second screen and second form, it’s not ever going to have a mode of new.  Once we’ve gotten past the first screen, all of the other screens are editing the existing item that was initially submitted on the next button of the first form screen. If they’re editing the form, when they click Next, it’s being submitted, but if they’re just viewing the form, the Next button simply navigates to the next screen.

Pages 3 and 4:

The same as the Page 2 settings, except increment up the numbers in blue, for the screens and forms.

Page 5:

Submitting on the last page of the form, has a good bit of logic for the draft versus submitted.  I’ve created 3 buttons, each with different logic for OnSelect and Visible. Also, I use a variable for a temporary “draft mode”.

btnForm5Draft

OnSelect: Set(varSubmitMode,"draft");SubmitForm(Form5)
Visible: varRecord.'Form Status'="Draft"

btnForm5Submit

OnSelect: Set(varSubmitMode,"submit");SubmitForm(Form5)

Visible: varFormMode<>"view" && varRecord.'Form Status'="Draft"

btnForm5Resubmit

OnSelect: Set(varSubmitMode,"resubmit");SubmitForm(Form5)

Visible: varFormMode<>"view" && varRecord.'Form Status'<>"Draft"

Form5 OnSuccess property:

If(
     varSubmitMode = "submit",

Patch(
         NewTechnology,
         Form5.LastSubmit,
         {FormStatus: "Submitted"}
     ));

Navigate(scrHome,ScreenTransition.None)

One more thing!  On the home page of my app, I have a gallery that lists all of the already submitted forms.

When you click an item in the gallery, here’s the OnSelect property:

Set(varFormMode,"edit");
Set(varRecord,ThisItem);
ResetForm(Form1);
Navigate(scrForm1,ScreenTransition.None)

Want to learn more about PowerApps, so that this will all make more sense?  Check out my PowerApps training classes!

14 comments

  • Hello Laura and thank you for this tutorial. What I would also be interested in is the ability to create and print out a completed form using PowerApps. Is there an “easy” way to do this without having to build a new output form using Flow? I am looking for the best options for our users who don’t have lots of time to spend creating these apps. I am thinking along the lines where we would create reports in Access and simply be able to print data, either from the entered data or from a data source, e.g. a SPO list.

    Like

  • Thanks, Laura. Very helpful! Can you tell us more about how you created your gallery?

    Like

  • Hello Laura, this works great but cannot get the Page five submit to update the Form Status from the Submit logic Form5.LastSubmit code. Is there a screen shot of what Page 5 looks like, I have the same names for the columns, but no matter what I try no Submit update.

    Like

    • To test, try this, instead of the OnSuccess stuff, just create a button that has that patch command in it. Then, submit the form and it won’t go anywhere. Then click the button to see if the patch works. Troubleshoot from there. The patch is the part that changes the status value.

      Liked by 1 person

  • Hi Laura,

    I’m developing a similar App, but I would like to include the Back Bottom to review the previous answers, Is it possible?

    Like

  • Moving from screen 1 to 2 doesn’t bring up the appropriate “Edit” view of the item. The Item property is set to ID = VarRecord.ID but the fields are blank (i brought over some fields from Form1 to test if those values stuck) so when I say submit, a duplicate entry is created. What are ways to troubleshoot that the proper item is being modified on the subsequent screens rather than creating new items? Thank you for your post!

    Like

  • This is great! I was able to get it to work using SQL Server.

    Like

  • I have entered everything just as you have on my forms but on two of the items I keep getting an error message that says Server Response ETAG Mismatch. How can I correct this?

    Like

  • Thank you for this article. This is exactly what I was looking for my current App with 90 columns with just Yes/No questions.

    Like

Leave a Reply to Isabella Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.