PowerApps: Multiple Screens Form

Hello Friends,

Welcome again with my new post on PowerApps. In real life development, sometimes we had a scenario when there is a list which is having huge number of fields (e.g. Application Form) and these cannot be fit on one screen. In such cases, we have to create an app which is having multiple screens. Let's see, how it can be achieved in PowerApps.

1. First, we create a list (Name:- MultiScreenPowerAppList) with following fields-
1. First Name
2. Last Name
3. Place of Birth
4. IT Experience
5. Form Status
2. All columns are "Single line of text". "Form Status" is an optional column means we are just using this column to maintain the status of record so that we can apply filter to get only completed records.
3. Now, edit the "Title" field and set "Required" as "No".
   
   
   
4. The list will be finally appear as below-
   
   
   
5. Now open the PowerApps Portal by Clicking Here or click on the link "https://create.powerapps.com/".
6. It will ask to Login (Authenticate). Once you provide the valid credentials, it will take you to PowerApps home page.
   
   
   
   
   
   
7. Now we will start from creating a "Blank App" using "Phone layout" as marked in above screenshot. it will show you a popup. Just click on "Skip" as we will do from scratch.
   
   
   
8. A blank screen canvas will be created by PowerApps by default.
   
   
   
9. Now we have to remove the Screen1. Before this, we have to add another screen.
10. Click on "Home" >> "New Screen" >> "Scrollable". It will add a new screen "Screen2".
    
    
    
11. Now delete the first screen "Screen1". For this, click on Ellipses (3 dots) displaying ahead to Screen1 then click on Delete. Now only "Screen2" will remain in system.
    
    
    
12. Now rename the screen "Screen2". For this, click on Ellipses (3 dots) displaying ahead to Screen2 then click on Rename. Name it "WelcomeScreen". Now remove "Canvas1", "LblAppName1", "RectQuickActionBar1" with same process.
13. Add image control by clicking on "Insert" >> "Media" >> "Image".
    
    
    
14. Rename the image name to "imgWelcome". In properties section-
1. Add any Welcome image
2. Set Image position as Fill
15. 
    
    
    
    
    
16. Image Used here is-
    
    
    
17. AFTER-
    
    
    
18. Add button
1. Rename it "btnLogin"
2. Text as "Login To Add Details >>"
3. Change background color of button
19. 
    
    
    
    
20. Now we have to update its "OnSelect" command . We can this step later on also. 

1. Set(varFormMode,"new"); ResetForm(frmName); Navigate(NameScreen,ScreenTransition.None)
   

21. It will show some error because we had used next screen and its form name. Well no problem, let's create them. 
22. Add more Scrollable screens and rename them as below-
1. NameScreen
2. BirthPlaceScreen
3. ITExperienceScreen
4. SubmitScreen
23. Remove the Canvas control from all these screens. Click on each of these screens one by one and then "Insert" >> "Forms" >> "Edit" to add Editable Form. Rename them respectively
1. frmName
2. frmBirthPlace
3. frmITExperience
4. frmSubmit
24. Rename all labels starting with "LblAppName" as
1. lblScreenTitleNameScreen
2. lblScreenTitleBirthPlaceScreen
3. lblScreenTitleITExperienceScreen
4. lblScreenTitleSubmitScreen
25. Edit the Text content as "Multi Screen PowerApps Demo".
26. Now connect the DataSource on each form-
    
    
    
27. Click on "Data Source" >> "None" >> "Connectors" >> "SharePoint". Select the SharePoint connection / Add a connection as per the scenario. Now select the SharePoint Site from the available sites shown there. Once selected, it will populate the lists. Click on the list we had created in starting "MultiScreenPowerAppList".
    
    
    
28. It will create input cards for each field. Now delete all input cards except as below on each form-
1. frmName
1. First Name
2. Last Name
2. frmBirthPlace
1. Place of Birth
3. frmITExperience
1. IT Experience
4. frmSubmit
1. Delete all input field cards
29. Basically, we are spreading out list on all these screens by putting one or two fields on each screen.
30. Now we will add a navigation icon on below screens-
1. frmName
2. frmBirthPlace
3. frmITExperience
31. For this we click on "Insert" >> "Icons" >> "Right" icon.
    
    
    
32. Adjust its Position & Size as shown in above screen and rename as-
1. IconNameScreen
2. IconBirthPlaceScreen
3. IconITExperienceScreen
33. With this, we had completed the design of below screens-
1. WelcomeScreen
2. NameScreen
3. BirthPLaceScreen
4. ITExperienceScreen
34. The last screen "SubmitScreen" will be designed later on. Before that we will add the functionality of icons and buttons.
35. Click on "WelcomeScreen" >> "btnLogin". Select the "OnSelect" command from left dropdown and set it's formula as 

1. Set(varFormMode,"new"); ResetForm(frmName); Navigate(NameScreen,ScreenTransition.None)
   

36. 😉 This time it will not give any error as we had created all screens and forms.
    
    
    
37. Now click on "NameScreen" >> "frmName". Select the "DefaultMode" command from left dropdown and set it's formula as-

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

38. Select "Item" command and set it's formula as-

1. varRecord

39. Select "OnSuccess" command and set it's formula as-

1. Set(varRecord,frmName.LastSubmit); Navigate(BirthPlaceScreen,ScreenTransition.None);
   

40. Now click on "IconNameScreen" icon and select "OnSelect" command from left dropdown. Set it's formula as-

1. If(varFormMode="view",Navigate(BirthPlaceScreen,ScreenTransition.None),SubmitForm(frmName))
   

41. 
    
    
    
42. Similar activity will be performed for BirthPlaceScreen and ITExperienceScreen. Find below the code-
43. BirthPlaceScreen-
1. frmBirthPlace
1. DefaultMode >> If(varFormMode="view",FormMode.View,FormMode.Edit)
2. Item >> LookUp(MultiScreenPowerAppList,ID=varRecord.ID)
3. OnSuccess >> Navigate(ITExperienceScreen,ScreenTransition.None)
2. IconNextBirthPlaceScreen
1. OnSelect >> If(varFormMode="view",Navigate(ITExperienceScreen,ScreenTransition.None),SubmitForm(frmBirthPlace))
44. ITExperienceScreen-
1. frmITExperience
1. DefaultMode >> If(varFormMode="view",FormMode.View,FormMode.Edit)
2. Item >> LookUp(MultiScreenPowerAppList,ID=varRecord.ID)
3. OnSuccess >> Navigate(SubmitScreen,ScreenTransition.None)
2. IconITExperienceScreen
1. OnSelect >> If(varFormMode="view",Navigate(SubmitScreen,ScreenTransition.None),SubmitForm(frmITExperience))
45. Now the last screen "SubmitScreen". Add a button on it rename it "btnSubmit" and Text as "Submit".
    
    
    
46. Update the formula for it's "OnSelect" command as

1. Set(varSubmitMode,"submit");SubmitForm(frmSubmit)
   

47. Now update the below command of frmSubmit-
1. DefaultMode >> If(varFormMode="view",FormMode.View,FormMode.Edit)
2. Item >> LookUp(MultiScreenPowerAppList,ID=varRecord.ID)
3. OnSuccess >> 

4. If(
        varSubmitMode = "submit",
   
   Patch(
            MultiScreenPowerAppList,
            frmSubmit.LastSubmit,
            {'Form Status': "Submitted",Title:Concatenate(varRecord.'Last Name', ", ", varRecord.'First Name')}
        ));
   Notify("Record Updated Successfully");
   Navigate(WelcomeScreen,ScreenTransition.None)
   

48. Save the App and Publish it.
49. Now open the app in PowerApps / Run from Preview option (arrow mark at top right side). I am providing here screen shot of mobile PowerApps app.

Lastly, we will check our SharePoint list, whether the record is inserted or not.

Actually, how this app function is, When you fill the First & Last name and navigate to next form, it creates a record in SharePoint List with "Form Status" field value as "Draft". Now when you fill in Birth Place and navigate, it update the same record. Now filling the IT Experience and navigating, it again update the record. When you click on Submit button, it finally update the record with "Form Status" as "Submitted" and update the Title filed as "<Last Name>, <First Name>".

This way, we can create Multi Screen PowerApps for a single list which is having huge number of fields.

Happy Coding...

Will see you again with some new topics.

References:-

1. PowerApps : Form Across Multiple Screens

😊 Enjoy The Auto Play Mode 😊