How To Create Multi-Screen Request Form App For SharePoint Online List Using PowerApps

Introduction

In this article you will see how to create a multi-screen request form app for SharePoint Online list using PowerApps. Refer to getting started with PowerApps and Flow for more details. Refer to my previous article on how  to create a simple approval app using PowerApps and Flow in SharePoint Online.  I have created a custom list in SharePoint online named Site Request which contains the following columns.



Instead of filling all the above details in a single screen you will see how you can split it into multiple screens and submit the details.

Create an app for SharePoint Online list using PowerApps

In this section you will see how to create an app for SharePoint Online list using PowerApps.

1. Navigate to custom list (Site Request) in SharePoint Online site. For example, https://c986.sharepoint.com/sites/Vijai/Lists/Site%20Request/AllItems.aspx
   
   
2. Click PowerApps and then click Create an app. 
   
   
   

3. Enter app name and then click Create 
   
   
   

4. Building and saving your app. 
   
   
   

5. By default, generated app contains Browse, Detail and Edit screen. 
   
   
   

6. Select EditScreen1, click ”...” and then click Duplicate Screen. 
   
   
   

7. EditScreen1_1 is created. 
   
   
   

8. Click EditScreen1, rename the text as Summary & Description and delete Language, Site Template, Primary Owner & Secondary Owner card. 
   
   
   

9. Click Accept icon, select Visible property from property box and set the values as false in the formula. 
   
   
   

10. Click Insert tab and then click Next Arrow from Icons. 
    
    
    

11. Click Next Arrow icon, select OnSelect from property box and enter “NewForm(EditForm1_1);Navigate(EditScreen1_1,ScreenTransition.Fade)” in the formula bar. 
    
    
    

12. Click EditScreen1_1, rename the text as Additional Details and delete Site Collection Title, Request Summary, Site Description and URL Name card. 
    
    
    

13. Click Accept icon, select Visible property from property box and set the values as false in the formula.
14. Click Insert tab and then click Button. Change the button text to Submit. 
    
    
    

15. Click Submit button, select OnSelect from property box and enter “Patch('Site Request',Defaults('Site Request'),EditForm1.Updates,EditForm1_1.Updates);Navigate(BrowseScreen1,ScreenTransition.Fade )” in the formula bar. 
    
    
    

16. Save and publish the app.

Testing the app

1. Navigate to custom list (Site Request) in SharePoint Online site. For example, https://c986.sharepoint.com/sites/Vijai/Lists/Site%20Request/AllItems.aspx
2. Click All Items drop down to view options and then click SiteRequest App which we have created. 
   
   
   

3. Open the app. 
   
   
   

4. Click “+” icon to create site request.
   
   
   

5. Enter the details in Summary & Description screen and click Next 
   
   
   

6. You will be navigated to Additional Details screen and enter the details. Click Submit 
   
   
   

7. You will be navigated to browse screen and request was created successfully. 
   
   
   
   
   

Reference

https://powerusers.microsoft.com/t5/PowerApps-Ideas/Multi-page-Forms/idi-p/2981#comments

Result

Thus in this article you saw how to create a multi-screen request form app for SharePoint Online list using PowerApps.