Nested Wizard Forms

This workflow demonstrates how to display the Nested Wizard's pages as a sub-navigation within the Parent Wizard, allowing users to seamlessly navigate between sections. By integrating a Nested Wizard, users can interact with multi-step forms within a larger parent form structure. This approach enhances user experience by organizing complex workflows into manageable steps while maintaining a clear and structured navigation flow.

By default, the Wizard Form utilizes the Panel component as the UI for the Wizard Navigation Pages. When a new Wizard page is created within the Form Builder, a Panel will be added to the form to represent the fields and content of that page.

The Problem

At times, you may want to add a Nested Wizard page to a Parent Wizard form to add more granular control over user navigation between sections. Here is an example Wizard Form that will be used as a Nested Form inside a Parent Wizard.

When a Nested Wizard form is introduced into a Parent Wizard form, the Nested Wizard pages will be added to the Parent Wizard navigation bar.

In most cases, this interface is not ideal, as users typically prefer the Nested Wizard navigation pages to be separate, functioning as a sub-UI within the Parent Wizard page, as shown below.

Solution

This example will showcase how to utilize a Container component to improve the wizard page navigation UI.

Create Child Wizard

Create a Wizard form that will be included in the Parent Wizard.

1. Navigate to a Project and create a new Form.

2. Click the Display as Form and select Wizard.

1. Create Wizard Pages by clicking the +Page button

2. Add fields to the Wizard pages

Create Parent Wizard

A parent form will be needed to house the Nested Wizard pages.

1. Create a new Form

2. Click the Display as Form and select Wizard.

3. Create Wizard Pages by clicking the +Page button

1. Add a Container component to the page of the Parent Wizard a Nested Wizard should be added to.

1. Add the Nested Form inside the Container component

1. Click the Form dropdown and select the Child Form

2. Save the Form

1. Use the Form to confirm the UI is working as expected.

The Nested Form inside the Container should present its own wizard pages separately, positioned beneath the Parent Wizard's navigation bar.

Things To Consider

• Data within a Container component is stored as an object inside the parent form’s submission.

• Wizard button labels (Cancel, Previous, Next) and functionality can be customized to enhance the user experience. Custom Wizard Documentation
• If Wizard navigation is not needed, consider using the Tab component as an alternative.