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:
| 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!
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.
Right now, it’s either write html or just print the screen in the browser. It’s a common request, Microsoft is probably working on something better.
It is in progress by Microsoft. If you go to the PowerApps Community see this link… https://powerusers.microsoft.com/t5/PowerApps-Ideas/Printing/idi-p/846
Thanks, Laura. Very helpful! Can you tell us more about how you created your gallery?
Hi Cindy, it’s done as a component. Really cool. That will take a whole other blog post, though. I went over components in this episode: https://youtu.be/Y3Iz79GLedI
Thank you so much, Laura! I’ll look forward to seeing you at SharePoint 2019!
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.
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.
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?
Yes, just add the button and make it do a “navigate” step.
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!
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?
This is great! I was able to get it to work using SQL Server.
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?
Thank you for this article. This is exactly what I was looking for my current App with 90 columns with just Yes/No questions.
Hi how did you create this Form 1 image…. this bottom has a torn-out shape…?
I used SnagIt for my screenshots, it has that “torn” feature.
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
It’s a field I created, I mentioned it in the post “Create an additional text column in SharePoint, called Form Status”
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!
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 🙂
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?
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.
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?
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.
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!
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!
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.
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.
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)
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!
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.
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
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.
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.
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.
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.
In the Item property, simply type: varRecord
Yes, I’ve did exactly the way you’ve explained in the above post.
Still I’m getting 5 errors mentioned in the previous comment.
When you set(varrecord, ThisItem) in your comment below you typed a space between this and item. ThisItem is just one word.
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.
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 🙂
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?
Use the varRecord as your item property, just like it says in this post.
Hi Laura,
This is great, has saved me loads of time and is all working. I have another form to do now where depending on the answer (Yes/No choice) to a question on ScrFrom1 I need to go to either ScrForm2 or ScrForm3 i.e. If the answer to ScrFrom1 Question 5 (DataCardValue21) is Yes, go to ScrForm2, if No go to ScrForm3. The idea is to only present users with the pages they need to answer dynamically.
I’ve tried using the following for the OnSelect for the ‘Next’ button:
If(varFormMode=”view”,SubmitForm(ScrForm1),If(DataCardValue21.Selected.Value = “Yes”,Navigate(ScrForm2,ScreenTransition.None),If(DataCardValue21.Selected.Value = “No”, Navigate(ScrForm3,ScreenTransition.None))))
However it still goes to ScrForm2 regardless of whether I select Yes or No.
Any suggestions or advice on how to add this function?
Thanks Paolo
Laura, many thanks to you for this write up. It really helped me when trying to create a professional-looking app that has a lot of questions. I used this method to update a number of different lists on the same SPO site for the test instance.
Now I that the app is approved, I have to connect to different data sources, which are identical lists on different SPO sites. The user basically picks which one from a set of icons on the first screen. Would you recommend using a different variable for different data sources, or should I be able to carry on using varRecord for each screen?
You can’t do a variable on data sources, unfortunately. There is a brand new thing in solutions called a “connection reference” which may be worth looking into, which seems like a connection variable. https://docs.microsoft.com/en-us/powerapps/maker/common-data-service/create-connection-reference
Hi Laura, can you help me? I use Powerapps in another language and it changes some things to English…
for example, it is; and ; It is ;; and other things
do you have the project ready so i can study? and convert?
I’m having a lookup error “LookUp(NewTechnology,ID=varRecord.ID)”
Sorry no, I don’t know.
Hi Laura, thanks so much for the multiform solution it is working great for me with only an issue when in try to ‘view’ or ‘edit’ a form. I get the form opening with ‘Getting your Data’ error. What settings do I need to change in SharePointIntegration besides the New settings as I am not using a ‘New’ button on the form however using the ‘New’ SharePoint button? Thanks again for the excellent post!
Make sure that you have your current record in the “item” property of your form.
Hey Laura, I’m having the same issue. When I checked the Item entry on each form, I have it set as the following; LookUp(‘Large Panel Checkout’,ID=varRecord.ID). (‘Large Panel Checkout’ is the data source I’m using)
Am I correct in having that in each forms Item property except Form1 which just has varRecord? If so, I’m stumped.
Hey Laura! First let me say even a couple years later, this guidance has proven extremely beneficial and I thank you.
Following up to Neil’s comment as I’m having the same issue, I went through my Item properties for each form and they’re all set according to your advice (varRecord for Form1 and LookUp(‘datasource’,ID=varRecord.ID) for the others). But I’m still unable to get back into my list item after leaving or refreshing the page. Perhaps there’s a patch you know of that I can try?
As I said before, amazing guidance and I truly thank you for your time!
Thank you so much! While I started my Form1 as New, it followed along nicely. I had some trouble with the varSubmitForm values which no one else mentioned so I figured it was me. I sure appreciate the expertise you shared here.
Hey Laura, when you get to a detail screen, how can I have the edit button on that screen take you to the record you selected from the gallery? Right now the detail screen comes up perfectly, but my edit button only brings up a blank Form1.
Also, you’re definitely an expert at tutorials and this one specifically has been amazing.
When you click the gallery, make the OnSelect set the varRecord to be ThisItem.
This was INSANELY helpful! My app is only 2 pages long and is in use. We have some user error where people aren’t hitting the submit button on the 2nd page. I think we can teach to that and/or make the submit button more obvious, but my team raised a question. Is it possible to autosave an app when the user is filling it out? Because this is 2 pages long and saves in pieces, is that feasible? Is autosave even possible with a PowerApp? What if my app was only 1 page and my user wanted to start filling it out and come back later?
Yes, that would need to be a whole other blog post. 😉 Create a column called status or something, and set a value to draft and then create logic and a button to save as draft versus submit.
Hey Laura, everything in my app is working well with your code, however I want the user to be able to navigate Back() while using the app to reference data that they have entered on the previous screens (I have 12 screens) but the formx.submit clears the values. Is there a way to retain, or repopulate the previously submitted form values?
sorry, meant SubmitForm(Form1)
I basically do a lookup within each field that needs to reference that last submitted value, something like LookUp(**TableName**, varRecord.ID = Sharepoint or sql table.ID) https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-filter-lookup
Yep, after the form submission is successful, you set the last submitted item as a variable: Set(varRecord, YourFormName.LastSubmit) and then reference the values in that record variable. I teach all about that in detail in my advanced Power Apps course / plan https://www.iwmentor.com/pages/plans
Hello Laura, thank you very much for your article, brilliant!
I created my application based on your article. On all the forms of all my pages I set up “Item = varRecord”. Everything was working correctly, until yesterday. Now I get errors with the red cross for every form containing this variable. The error message is as follows: “Invalid formula. A value compatible with “DataSource” is expected.” I don’t really understand where the problem comes from or where to look…
Do you have an idea? Thank you!
Elisabeth
Hi Laura, great tutorial.
I am curious about the line of code on the btnSubmitAsDraft for the visible property why it is being used in that manner. The line of code is varRecord.’Form Status’=”Draft”. Shouldn’t there be an If() statement here? When I enter just that code by itself the button disappears.
Your formula just needs to evaluate to true or false, since “Visible” is a boolean property. So, an IF statement is not needed, you could use one if you’d like, but it’s not necessary.
Laura, ok so that line of code is an implied boolean check then. Never seen a boolean check like that (too many years in C# I guess)
One quick thought and question. I want to allow the users to save as a draft on any screen they may be on. Once I place Set(varSubmitMode,”draft”);SubmitForm(initiator_Form) on the “Save as Draft” button, then all I have to do on the OnSuccess of the screen is to add, based on DRAFT or SUBMITTED statues, the Patch statement correct?
“Patch(
xxxxx,
FormX.LastSubmit,
{FormStatus: “Draft”}
));”
I’m not sure off the top of my head. You’d just have to test it with a new one versus an existing one and going across multiple screens, various permutations.
Laura as always your posts are helpful and inciteful. I was wondering how you created the left hand column of page selectors. Is that the same concept of the tabbed form or is this something different?
I used a gallery for that navigation, which is a concept I taught in this power hour: https://youtu.be/RVN4m2OK4sI
Hi Laura
This seems to be working the only issue I am having is that it keeps editing the current row and not creating a new row once submitted…
Where could my issue be?
The first time you start the form, make sure you’re using the NewForm command.
Thank you Laura!! One more question…
When I edit the form any ‘radio button’ style questions get reset to having no option selected, so basically the user has to reselect the option in these.
The same thing happens with checkboxes which I have actually put into a gallery and get stored in a collection…
Is there a way for these values to hold on editing a form?
You probably need to set the Default property of those cards correctly. Look at how all of the default properties look on all of your other cards that are working correctly, and then set yours and set your update property all based on that information, on the broken cards. Here’s a whole power hour that I recorded, about how to do that: https://youtu.be/JLhBamABqbQ
Hey Laura – awesome work as always. I’m curious how you would recommend using tabbed navigation versus the next button. I am doing the exact same thing but instead of using a next button, I have a tab for each “next step” in the processing of the form. Step 1 create OR view an existing form, Step 2 a group reviews the inputs from Step 1 and providers commentary and approval or passes to Optional Step 3 group reviews Step 2 data and Step 1 data and provides commentary/approval. All of the data is houses in the same SharePoint list. So I just need to move back and forth across the tabs. Would welcome any feedback you have on this 🙂
I wrote a blog post about the tabbed concept. https://wonderlaura.com/2018/01/03/powerapps-tabbed-sharepoint-form/
Usually I use the form across screens for very long forms with 50+ fields, and the tabbed option for smaller forms.