dynamic logo

HR & Payroll Add-on for Australian Businesses

Search

“ Step-by-Step Guide to Creating Multi-Step Forms in Power Apps ”

PowerApps provides exceptional flexibility and efficiency in creating customized forms for a variety of business applications. Its ability to create multi-step forms is a significant development in user interface design, allowing developers to break down difficult data entry jobs into simpler, more manageable sequences. This improves not only the accuracy of the obtained data but also the overall user experience by making form completion less intimidating for users. 

However, since this is new for many people, they still need to know the steps for creating multi-step forms in power apps. In this article, we will take you through the whole scenario step by step using the multi-step form.

What Does it Mean to Work with Multi-Form in PowerApps?

Dynamics 365 PowerApps transforms how users interact with forms by adding live status indications and reactive navigation buttons. These elements walk users through the form-filling process, offering clarity on progress and what to expect at each stage. It decreases the risk of overwhelming consumers with too much information at once while also considerably lowering form abandonment rates.

power apps

Multi-step forms scenario

To begin with the forms, we need a scenario. In our case of power Automate for multi-step forms, let’s start by designing the app using the list of Travel Requests. This has information about the user’s travel needs and requests. We will start by creating an app by navigating to “start with the page design.”

Guide-to-Creating-Multi-Step-Forms-in-Power-Apps.jpg

Further, we will choose a responsive design template for the app.

Microsoft-PowerApps

Next, we will connect the page to the data sources, set up modern controls and themes, and choose the header accordingly. Once we set up the page’s alignment and other settings, we will be all set to move to the next step of building a multi-form. So, as per your scenario, set up the page layout, and let’s move to the next step. 

Page-Layout
Page-Layout-1

How to build a Modern Multi-step form experience in Power Apps

Following the same scenario, we will move the multi-step form experience. Here, we will click on “New Screen” and pick one of the modern screen templates, which is named “Approval Test.

Multi-step-form-experience-in-Power-Apps
This template has a form, and once we click it, users can create a new screen. Now, you need to connect it to the Sharepoint travel request list. 
Multi-step-form-experience-in-Power-Apps
Duplicate the screen to create additional screens for each step of your form. Then, connect each screen’s form control to the same SharePoint list.

Here, we will create a variable from the Onvisible screens.

SharePoint-List
Visible

Further, you can add the button for “New Request” using the ResetForm and SubmitForm functions for ApprovalForm1 in our case. Set the function of Navigate to redirect your user to screen 2 when they submit the request. You can add and change the buttons using the SubmitForm function, whether in the header or footer or if you want to move the footer above. 

New-Request
New-Request-1

You can change the variables accordingly to indicate the steps. There you have your form settings. Click the previous and your user will be navigated to the first step; if they click next, they will be led to step 2. Similarly, you can set all the steps as needed through simple drag-and-drop. 

Drag-n-Drop

Show Status indicator of current step number of Form

Our next step is to show the steps. In the Reviewers bar, change it to the steps. When you click on it, you will see the gallery with the array of data. 

Status-indicator-of-current-step-number-of-Form

Once you have Inserted a gallery control to display step indicators, set the Items property of the gallery to an array of data representing each step (e.g., [{ Title: “Travel Info”, Step: 1 }, { Title: “Travel Details”, Step: 2 }, …]).

Use conditional formatting to change the colour of the step indicator based on the current step (varStep).

Display the step number and title within the gallery. Further, you can always set a certain button’s alignment, share, and potion using the features and functions. 

Status-indicator-of-current-step-number-of-Form-1

Multi-step form validations

In the end, you have to understand that certain information is necessary according to the data source. The validation only works if the user submits the request. 

Implement validation logic using the If function and error messages. In the OnSelect property of the “Next” button:

PowerApps

Repeat the validation logic for the “Submit” button, checking for validity in all steps before submission.

Final Steps – Demo of multi-step forms in PowerApps

Finally, you can check out the functions by adding the data, submitting the form, and testing the New-request button. Your multi-form is ready to go once you have all the functions working. However, if you need to do one demo for Microsoft Power Platform forms, we at DHRP can show you. Our experts have the knowledge and experience to share with you to make your Power Apps multi-step form experience smooth and easy. So, let’s talk about getting forward with it. 

dhrp banner image bottom line

INTERESTED

Get in Touch with us Today !



    You consent to the processing of your personal data by clicking on the button. Terms of Use

    HR & Payroll Software For Finance

    Download Template

    You consent to the processing of your
    personal data by clicking on the button.
    Terms of use.

    Download Template

    You consent to the processing of your
    personal data by clicking on the button.
    Terms of use.

    Download Template

    You consent to the processing of your
    personal data by clicking on the button.
    Terms of use.

    Download Template

    You consent to the processing of your
    personal data by clicking on the button.
    Terms of use.

    Download Template

    You consent to the processing of your
    personal data by clicking on the button.
    Terms of use.

    Download Template

    You consent to the processing of your
    personal data by clicking on the button.
    Terms of use.

    Download Template

    You consent to the processing of your
    personal data by clicking on the button.
    Terms of use.

    Download Template

    You consent to the processing of your
    personal data by clicking on the button.
    Terms of use.

    Join The Team

    You consent to the processing of your
    personal data by clicking on the button.
    Terms of use.

    Download Template

    You consent to the processing of your
    personal data by clicking on the button.
    Terms of use.