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 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!

44 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

    • I’m having the same problem, for some reason the Id of the field comes up correctly however when I test with just labels like ThisItem.Title I’m getting a blank. Are there other ways to figure out where the problem could be?

      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

  • Hi how did you create this Form 1 image…. this bottom has a torn-out shape…?

    Like

  • Hi – I’m stuck on Form 5 “On Success” criteria, as you appear to be referencing something called “FormStatus” that doesn’t exist as a variable or as a field on the list. I can see that I need to set the field “Form Status” to “submitted” but “Form Status” doesn’t come up as an option I can select, and consequently I’m just getting the little red cross of doom

    Like

    • It’s a field I created, I mentioned it in the post “Create an additional text column in SharePoint, called Form Status”

      Like

    • Hi – so I’ve created a field called “Form Status” just as you have done, but when I reference it in the code for “On Success” criteria, it won’t accept it and throws an error (the little red cross). Also, in your example screenshots, you refer to “Form Status” in the code for the buttons, but in the code for On Success, you refer to “FormStatus”. Do I need to preface On Success with varRecord.’Form Status’ as you’ve done for the buttons? Thanks!

      Like

    • Gregory MacGregor García

      I’m having the same issue as Nicola, it almost seems as if there’s a syntax error in the code provided, specifically on the last parameter of the Patch function.

      Only missing piece of the puzzle though, I’m very grateful for this post and the rest of your content, Laura 🙂

      Like

    • When I created the Form Status field, I called it FormStatus with no space. Then, I renamed it. But the system name is still FormStatus with no space. Maybe that’s the difference in yours? What’s your columns’ system name?

      Like

  • Hi, this is very helpful! Is it possible to save the data from screen to screen in “draft” status, if I am using 1 sharepoint datasource on one page, and a different datasource on the next page? I want to submit everything to sharepoint at the end of the second page, but each page will be referencing a different sharepoint list.

    Like

  • Hi, i’m trying to make a control that resets all these forms after submitting it as there’s a little bit of delay where you can see the previous entry before it pulls the new, empty data (this form might contain some sensitive data so I don’t want people to see what the last person posted.

    I tried using

    ResetForm(Form1);
    ResetForm(Form2);
    ResetForm(Form3);
    ResetForm(Form4);
    ResetForm(Form5);
    ResetForm(Form6);
    Navigate(scrHome,ScreenTransition.None)

    But this doesn’t want to work. Anyone know how I can achieve this, or is this going to just be a problem during design view and I shouldn’t have this problem in the published version?

    Like

    • Is that in a customized list form? Or a standalone app? In a customized list form, the “Item” property of the form is set to show the currently selected item in the SP list. Look at the OnSuccess property. I never put any commands after SubmitForm in the submit button at all. Always put everything you want to happen, in the OnSuccess of the form.

      Liked by 1 person

    • Hi Laura,

      We’re using the CDS alongside this canvas app.
      I added a success screen with a light summary to give the user some feedback that their form has been submitted, and at the bottom of this page there is a button to return them to scrHome. I added the controls onto this button to reset all the forms on the app however it seems to only reset the first page (form1) and doesn’t want to reset the others.

      I’m not sure if this is a result of our computer system/network straight out of the 1650’s but there’s noticeable lag from transition to the next screen, and data the user previously entered stays on the screen for a few seconds while the form attempts to look up and load the next set of data.
      This was initially quite alarming because there’s chance for sensitive information to be entered on this form and we didn’t want it showing up for the next user.

      Fortunately although this is still a problem if someone was to immediately input a new entry immediately after submitting one (which is unlikely and even if they did, they’re the one who input the previous information anyway so that’s no problem), it turns out that it’s only a problem for that one instance anyway; probably because the values have been cached and the form not reset yet, this is no longer an issue when they either refresh or open the application again.

      And as we’ve added a back button to allow the user to review what they’ve entered before finally submitting it, we don’t really just want to clear the form on the OnSuccess property immediately after submitting it (makes it quicker if they can just go back and have that information directly there without loading).

      After a bit of testing this isn’t that much of an issue as initially thought, panic over and thanks for the reply though!

      Like

  • Hi Laura!

    This works wonderfully for a new form, however, I’m having trouble where when I click on an existing item in my SP list to view/edit, the PowerApps form opens and says “Getting your data…” and never actually loads the item. Do you have any suggestions for this? Perhaps the formulas for the SharePoint integration OnEdit, OnView formulas? Any help would be greatly appreciated! Thanks so much!

    Like

  • Hi Laura,
    Thanks for this post, it is a good workaround for the limitation of max number of columns.
    It work well for me, the only thing is it is really slow to load. It takes me up to 30 seconds to load the first screen. From your experience, does this seem like an avearge wait time fom a (semicomplex) Power Apps app? I have a couple of lookup fields on the initial screen and some filtered collections.

    Like

  • Hey,
    I don’t know if you are watching this post anymore.

    I was able to get everything set-up. When I press to add a new record, the first screen populates and I can fill in. However, when I press to go to the next screen it doesn’t populate. The error I get on the first screen is that it expects a record value and it is over the “item” field where varRecord is housed. Does anyone have an idea what I am doing wrong? The code does not fire from the gallery onSelect either. It errors on the Set(varRecord,ThisItem) line.

    Like

    • Hi Carrie, the new record isn’t using ThisItem. ThisItem is only when you click on an existing item to open it. For new records, notice in my steps, it’s doing this: Set(varRecord,Form1.LastSubmit)

      Like

  • Mustafa Hussain

    Hey Laura, Great Blog over PowerApps Multi Screen Forms! Loved It.
    But I am getting an Error in the Last Screen, Last Form in OnSucess Code: If(
    varSubmitMode = “submit”,

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

    Navigate(scrHome,ScreenTransition.None)

    it Says FormStatus Can’t be found, as I have already created the Column in my List and set it’s default value to Draft as well, and Refreshed the DataSource after that, even after that it’s showing that Error.

    Any Fix Please Help!

    Like

  • Hi Laura,

    Like Carrie, who posted on May 24th, 2020, I am having issues with varRecord. The issue is at the beginning on Form1 under Item. Like Carrie said varRecord is giving an error stating “Expected Record Value”. It seems to like varRecord. Please help! Everything was working and all of a sudden this.

    Like

  • Hi Laura,

    Great blog on PowerApps your a life saver, sorry new to powerapps so if ask what seems a dim question im sorry but need your help.
    What to I set the DefultMode and Item to? Is it the same as the other screens?

    Do i need to create all three buttons (btnForm5Draft, btnForm5Submit, btnForm5ReSubmit) or just the one that I require ie. submit

    The on success code I keep getting the dread red x of doom, the form column is there

    Like

    • What exactly is the error you’re getting? Yes, the Item property needs to be that same record variable. It’s up to you if you want to create 3 different buttons and put different logic to hide and show them, or just put one submit button with a bunch of IF conditions as to what you want it to do under different circumstances.

      Like

  • Hi Laura,
    How would you deal with the Title column on the form that is required? Is there a way you were able to circumvent this?
    Im finding that I cannot set the title to not required so it needs to be filled in order to proceed.

    Like

    • Just go into the SharePoint list settings and make it not required. Then, in PowerApps, go to the Required property of that card, and change it to false.

      Like

  • As I applied the above functions the errors which I’ve found are :
    Form1:
    Item – Expected Record value.
    Form2:
    Item – ID=varRecord.ID
    * Invalid use of ‘.’
    * Invalid argument type.
    Gallery:
    OnSelect – Set(varRecord, This item)
    * Name isn’t valid. This identifier isn’t recognised.
    * Incompatible type. We can’t evaluate your formula because the context variable types are incompatible with the types of values in other place in your app.

    Like

  • Sorry, that is my mistake must be autocorrect did it while typing it here in the comment.
    But I assure you that the function is
    Set(varRecord, ThisItem) in the code.
    And above all the mentioned errors are concerned with nothing but Item.

    Like

  • Hi! I’m Copy and pasting exactly what you wrote and so far I’m getting two problems. On the first page with the create new button, copied every code you indicated, replacing appropriate values with my apps’ screen names. When I click on it, it does what its supposed to, but then jumps to the second form screen without me click on the next page button. So there’s that, and then there is another thing. I press the back button on the second form screen to go back to the first form screen. I fill out the form on the first form screen and press the next button. It gives me an error that a field is required. But the thing is that that field it is talking about is a) not on the screen, b) the column is not required on SP, and c) the column doesn’t even exist?!?!?! Any help would be appreciated 🙂

    Like

  • Hi. This is a great post! I am having an issue that when I go to preview my Form, its blank. Previously I had set the form control Item to Default(SPListName) and that worked. Now that this method uses the Item control item too, it won’t allow me to add the default(SPListName). Is there a way to work around this?

    Like

Leave a Reply to Nicola 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.