Power Apps: 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 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

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

New Button:

For the OnSelect property:

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

Page 1:

Form1 properties:

If(varFormMode="edit",FormMode.Edit,varFormMode="view",FormMode.View,FormMode.New)

varRecord

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:

If(varFormMode="view",FormMode.View,FormMode.Edit)

LookUp(NewTechnology,ID=varRecord.ID)

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!