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.

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 layout component, liken the Panel 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 Panel component to the page of the Parent Wizard a Nested Wizard should be added to.

1. Check the Hide Label within the Panel settings to remove the Panel title from the form.

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.

Things To Consider

• 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.