Power Pages Multi-Step Form

2024-06-07

All articles from this blog can ONLY be redistributed on an Attribution-NonCommercial-NoDerivs basis. Please credit the source, thank you.
Twitter：@kelvinshen
Blog：Kelvin Shen's Blog

Business Scenario

Power Pages Multi-Step Form can be useful in scenarios where you want to break down a long form into multiple steps. For example, for making a medical insurance claim, you may want to break down the form into multiple steps like Personal Information, Incident Details, Support Document, etc. This can help in improving the user experience and also in capturing the information in a structured manner.

Building Blocks - Metadata

You can use both Power Pages designer and the Portal Management Portal app to create a multi-step form. Some of the advhanced configurations can be done only using the Portal Management Portal app.

UI/UX and the Progress Indicator

The out of the box looking and feel of the multi-step form is something similar to the screenshot below.

Heavy Customization

You can use custom CSS to make it look better. However, in case the UI/UX requirements are complex, you may need build your own. A possible approach could be

Put an anchor HTML element in the “Copy (HTML)” field of the page.
Use JavaScript of the Web Page to control the visibility of the old progress indicator as well as inject DOM elements for the new progress bar.

Note: It is impossible to add custom JavaScript at the Multi Step form level. However, you can add custom JavaScript at both the Web Page level and the Form Step level.

Conditional Steps

For example, for a specialist doctor insurance claim, you may want to show a extra step for support documents.

Tutorial: Add a multistep form to your page

Session Managment

You may ask if a user only partially completed a multi step form, will the status be preserved? The answer is yes. The session management is taken care of by the Power Pages.

Validation

Client Side Field Level Validation Client Side Form Level Validation