Everyone knows that PowerApps Forms are much trickier than their siblings – PowerApps Apps. So when it comes to creating a multi form experience it’s not the same for PowerApps Forms. In fact Microsoft PowerApps Team recommends using a Patch function or other workarounds. So officially multi forms for PowerApps Forms are not supported.
It’s obvious why one would like to use multiple forms over a huge single form – a better user experience and a natural feel.
So it is doable and the benefits of using it the way I described below are:
- No extra buttons. While a custom button can compliment your form and expand its functionality, you still have standard buttons you cannot hide.
- All columns can stay required on a SharePoint level. The forms will react to those required fields as needed.
- No Patch function. Don’t get me wrong, the Patch function is very useful but it modifies an item the 2nd time. This might interfere and trigger a Flow you have.
- Multiple forms and multiple screens with their own code.
- No variables (except for the one that determines a form DefaultMode).
Now before we get to the code I wanted to link a YouTube video where DeShon Clark explains a similar concept – MPP: 3 of 7 | PowerApps Multiple Form Trick for Custom Forms (Aug 2019 Update)
The slight difference is I use both multiple forms and screens at once which might give you some flexibility as you can have different onVisible code if needed. Also my example doesn’t involve any hidden fields or other controls.
Let’s create a SharePoint List, for the purpose of the example it will have 2 required text columns in it:
Then we create a PowerApps Form using a Customize Forms feature.
The concept of this solution is very simple:
- There will be a screen and a form a user will never use and navigate to. However, that very form is the one a user will submit. It will have every field on it.
- The other 2 forms and screens (or as many as you would like to have) is what a user will interact with. The latter are the multi forms we would like to have. So let’s make copy of our screen and form and split the info accordingly.
In other words:
- Form1 and Screen1 – Field A
- Form2 and Screen2 – Field B
- AuxForm and AuxScreen – Field A and Field B
To make it a bit simpler to understand we will rename them.
Several changes to SharePointIntergration. OnNew property:
NewForm(SharePointForm1); Navigate( FormScreen1, ScreenTransition.Fade ); Set( SPFormMode, "New" )
EditForm(SharePointFormAux); Navigate( FormScreen1, ScreenTransition.Fade ); Set( SPFormMode, "Edit" )
ViewForm(SharePointFormAux); Navigate( FormScreen1, ScreenTransition.Fade ); Set( SPFormMode, "View" )
FormScreen1 will have a Next button, OnSelect property:
Navigate( FormScreen2, ScreenTransition.Fade )
FormScreen2 will have a Back button, OnSelect property:
Navigate( FormScreen1, ScreenTransition.Fade )
The same adjustments for all 3 forms (SharePointForm1, SharePointForm2, and FormScreenAux).
ResetForm(SharePointFormAux); ResetForm(SharePointForm1); ResetForm(SharePointForm2); RequestHide()
If( SPFormMode = "New", FormMode.New, If( SPFormMode = "Edit", FormMode.Edit, FormMode.View ) )
Now we need to connect the fields on the auxiliary form with the fields on the main two forms. The image below will help visually:
DataCardValue1 Text Input, Default property:
DataCardValue2 Text Input, Default property: