Absolute Best Way To Make Multiple Page Forms In Power Apps

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/absolute-best-way-to-make-multiple-page-forms-in-power-apps/. Author: Matthew Devaney.

Absolute Best Way To Make Multiple Page Forms In Power Apps Posted by - Matthew Devaney on - May 22, 2022 48 Comments

Multiple page forms allow data entry to be spread across many app screens. When there a large number of form fields placing one section on each screen makes it feel less overwhelming. The Power Apps form control is typically used to create a single-page form on only one screen. But I will show you how to create multiple page forms in Power Apps by splitting the form over more than one screen. I’ll also reveal how to pass form data from page-to-page, submit form data on the final page and perform data validation at each step along the way. Table of Contents Setup A SharePoint List Create A New Power Apps Form

Duplicate The Screen To Make Multiple Forms

Select The Fields To Display On Each Form Page

Store Data From Multiple Page Form In A Record Variable Submit The Multiple Page Form

Build A Gallery To Display To Show All Submitted Work Orders View A Previously Entered Form Create A New Multiple Page Form Add A Go To Previous Screen Button Introduction: The Work Orders App

The Work Orders app is used by office staff at a plumbing services company to track all of the repair jobs that need to be done. Work orders are very long so the data entry form is split over 3 screens in the app. Setup A SharePoint List

Create a new SharePoint list called Work Orders with the following columns 12 columns: Column Name Column Type FirstName Single-line text LastName Single-line text Address Single-line text Address2 Single-line text PhoneNumber Single-line text Province Single-line text City Single-line text PostalCode Single-line text WorkOrder Number Issue Reported Multiple-line text AppointmentStart Date & Time MaterialsRequired Multiple-line text Create A New Power Apps Form

Open Power Apps Studio and create a new app from blank. Insert a label with the words “Work Order” at the top of the screen to serve as a titlebar.

Go to the Data tab on the left-navigation menu and add the Work Orders SharePoint list as a datasource.

Then place an Edit Form in the center of the screen and connect it to the Work Orders SharePoint list.

The form will automatically include all of the SharePoint list columns as fields. Delete the Title and the Attachments fields. Then change the form’s Columns property to 1 and the Layout property to Vertical. Now all of the form’s fields should be stacked in a single vertical column.

Duplicate The Screen To Make Multiple Forms

The Work Orders form is very long and has too many fields to fit on a single page. To solve this problem we will display sections of the form over three separate screens. The easiest way to do this is to setup our form as a whole , copy the screen as many times as necessary and then remove any unwanted form fields.

Before we copy the screen, write this code in the OnStart property of the app to store a empty row inside a variable.

Set (gblRecordWorkOrderCurrent, Defaults( 'Work Orders' )) Code language: JavaScript ( javascript )

Go back to the form and write this code in the Item property to control what record it displays. gblRecordWorkOrderCurrent

Also update the form’s DefaultMode property to New so it defaults to creating a new entry. FormMode .New Code language: CSS ( css )

Then select the three dots beside the Work Order Screen and click Duplicate Screen . Do this twice.

Now we have 3 screens that are exactly the same. Take this opportunity to rename the controls on each screen so we don’t get confused.

Select The Fields To Display On Each Form Page

Every screen we duplicated has a form with the 12 fields. We only want to show a subset of those on each screen and delete the rest. On Page 1 keep First Name, Last Name, Address, Address 2 and remove anything else.

On Page 2 keep only Phone Number, City, Province and Postal.

And on Page 3 keep only Materials Required, Work Order, Appointment Start and Issue Reported. Now we have 3 screens, with three separate forms and each contains fields that are unique. It was easy to maintain the same look and feel for each form because we always started from the same original form.

Store Data From Multiple Page Form In A Record Variable

Saving the data single from a single form is easy – we would just write a SubmitForm function in the OnStart property of a button and when clicked its data would be recorded in SharePoint. For a multiple page form we must use a different technique. We will store the form data in a variable and add to it as we navigate through each page. On the final page we will use a Patch function to write all of the data to a new list item in SharePoint.

Insert a button onto the screen labelled “Next” and use this code in the OnSelect property. If the form is in New mode or Edit mode it validates whether data entered into the form can be written back to the SharePoint list. This is important because we don’t want to finish the form only to find out there is an error. If data validation is successful, it stores the form data in our gblRecordWorkOrderCurrent variable and goes to the next screen. Otherwise, an error message is shown. If( // check the form mode

frm_Page1_WorkOrders.Mode=FormMode.View, // if view mode, go to next screen Navigate( 'Work Order Page 2 Screen' ),

// if new or edit mode, validate that the form data can be saved to the datasource Set ( varValidateForm, Validate(

'Work Orders' , Defaults( 'Work Orders' ), frm_Page1_WorkOrders.Updates ) );

// if validation is passed goto the next screen, otherwise, show an error. If( IsBlank(varValidateForm), // store the form data in a variable

Set ( gblRecordWorkOrderCurrent, Patch( gblRecordWorkOrderCurrent, frm_Page1_WorkOrders.Updates ) ); Navigate( 'Work Order Page 2 Screen' ), // show an error message

Notify( varValidateForm, NotificationType.Error ) ) ) Code language: JavaScript ( javascript ) Copy the button from Page 1 to Page 2…

…and write this similar code in the OnSelect property. If( // check the form mode

frm_Page2_WorkOrders.Mode=FormMode.View, // if view mode, go to next screen Navigate( 'Work Order Page 3 Screen' ),

// if new or edit mode, validate that the form data can be saved to the datasource Set ( varValidateForm, Validate(

'Work Orders' , Defaults( 'Work Orders' ), frm_Page2_WorkOrders.Updates ) );

// if validation is passed goto the next screen, otherwise, show an error. If( IsBlank(varValidateForm), // store the form data in a variable

Set ( gblRecordWorkOrderCurrent, Patch( gblRecordWorkOrderCurrent, frm_Page2_WorkOrders.Updates ) ); Navigate( 'Work Order Page 3 Screen' ), // show an error message

Notify( varValidateForm, NotificationType.Error ) ) ) Code language: JavaScript ( javascript ) Submit The Multiple Page Form

On the final page of the form we must submit the data from all 3 pages. Once again, copy the button from Page 2 to Page 3 and change the text to “Submit.”

Use this code in the OnSelect property of the Submit button. Instead of the SubmitForm function we use the Patch function to insert a new row into the SharePoint list. We no longer need to validate the form data in this code block because if the patch function fails we will stay on the same page and not lose the ability to correct data entry mistakes.

Note: we will build the Work Orders List Screen referenced in the Navigate function next. // add the form data to the variable

Set ( gblRecordWorkOrderCurrent, Patch( gblRecordWorkOrderCurrent, frm_Page3_WorkOrders.Updates ) );

// if validation is passed goto the next screen, otherwise, show an error.

IfError( Patch( 'Work Orders' , Defaults( 'Work Orders' ), gblRecordWorkOrderCurrent), Navigate( 'Work Orders List Screen' ), Notify(varValidateForm,NotificationType.Error) ); Code language: JavaScript ( javascript )

We’ve now finished building the multiple page form. Go ahead and give it a try to ensure it writes data back to the SharePoint list!

Build A Gallery To Display To Show All Submitted Work Orders

Once a form is submitted we need a way to view all of the past work orders entered and view their data. To do this, create a new screen called Work Orders List Screen and place a the same titlebar as the other screens at the top.

Insert a new gallery onto the screen and choose the Work Orders SharePoint list as the datasource. Then choose the

Layout Title, subtitle, and body from the right-side properties menu.

Use the following code in the Text property of the gallery’s labels: Field Data Title

ThisItem.FirstName&” “&ThisItem.LastName Subtitle ThisItem.Address Body WorkOrder View A Previously Entered Form

To view a Work Order from the SharePoint list the user click on an item in the gallery.

Use this code in the OnSelect Property of the gallery to change the forms on Page 1, 2 and 3 to view mode , retrieve the form data, store it in a variable and then navigate to Page 1 of the form. // change forms to view mode

ViewForm(frm_Page1_WorkOrders); ViewForm(frm_Page2_WorkOrders); ViewForm(frm_Page3_WorkOrders); // get form record

Set (gblRecordWorkOrderCurrent, LookUp( 'Work Orders' , ID=ThisItem.ID)); // go to form page 1 Navigate( 'Work Order Page 1 Screen' ); Code language: JavaScript ( javascript )

Now we can view any previously entered work order. Click on a work order a review each form to make sure our code works. Create A New Multiple Page Form

We also need to give users a way to make a new work order. Insert a button at the top left of the gallery with the text “New Work Order.”

Use this code in the OnSelect property of the button to change the forms on Page 1, 2 and 3 into new mode , save a empty variable to store the form data in and navigate to form Page 1. // change forms to view mode

NewForm(frm_Page1_WorkOrders); NewForm(frm_Page2_WorkOrders); NewForm(frm_Page3_WorkOrders); // get form record

Set (gblRecordWorkOrderCurrent, Defaults( 'Work Orders' )); // go to form page 1 Navigate( 'Work Order Page 1 Screen' ); Code language: JavaScript ( javascript )

At this point its a good idea to click new work order the new work order button and test the functionality we added. Add A Go To Previous Screen Button

The ability to go back to the previous screen in a form is the final feature we are missing. Go to the Work Order Page 2 Screen and place a button at the bottom of the form with the text “Previous.”

Use this code in the OnSelect property of the form to return to Page 1. Navigate( 'Work Order Page 1 Screen' ) Code language: JavaScript ( javascript ) Copy the button to Page 3…

…and change the OnSelect property code to return to Page 2. Navigate( 'Work Order Page 2 Screen' ) Code language: JavaScript ( javascript )

As a final touch, we don’t want the Submit button on Page 3 showing when the form in view mode.

Use this code in the Visible property of the button to hide it when its not needed. frm_Page3_WorkOrders.Mode <> View Code language: HTML, XML ( xml ) Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions about Absolute Best Way To Make Multiple Page Forms In Power Apps please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps