Use the multipage create, which employs the wizard component, when you want users to create resources by completing a set of interrelated tasks. We recommend multipage create for long or complex configurations.
Navigation links at the top of the pages in a flow. Breadcrumbs have three entries:
First: Use the service name for the root page in the breadcrumbs, and make it a link. For the last entry in the breadcrumbs, use Edit.
Second: Use the title of the page to indicate what the user is doing in the current step. Begin the title with an active verb and format it as heading 1. The title begins with an active verb. Use the following: Create [resource name]
Third: The last breadcrumb is the title of the multipage create flow. This is the only place that displays the title of the overall flow.
Include a field label describing the corresponding control (Examples: text inputs, dropdown lists, check boxes, and radio buttons). If you need additional explanation, you can add a form description. Apply standard validation for each field input.
When there are three or more key-value pairs, organize the contents of a container on the review page into two columns. You can use tables to display inputs for long datasets. For example, a list of tags.
If necessary, include a section for advanced configuration. Follow the guidelines on single page create. Any additional settings present in a form should persist on the review page and be closed by default.
Instructions that tell users how to recover from server side page errors. For more information, see validation.
Key UX concepts
The last page of the ﬂow summarizes the choices made in previous steps for quick review in the same order that was presented in the ﬂow. Users can review their information on the page and quickly go back to any step for edits. Avoid including interactions on the page such as inline editing or editing modals, to keep the focus of the page on review. The page is optional but recommended.
There are two types of validation, which are frequently used together:
Form field validation: Most often used for client-side validation, which processes information and provides feedback, beforethe form is sent.
This feedback is presented as error text on individual form fields.
It’s best used for validating specific values such as: missing required fields, incorrect formatting of values, and unacknowledged confirmation fields.
This type of validation can be invoked on the completion of each field or upon form submission or transition to the next step in a wizard.
Page level form validation: Most often used for server-side validation, which processes information afterthe form is submitted, and returns either a success or failure.
This feedback is presented in one of two ways: either as a page level alert above the form's action buttons (in the case of a recoverable failure), or a flash on the page following submission (in the case of success or immutable failure).
It's best used for validating requests to the server that result in recoverable errors such as: insufficient capacity, exceeded request limits, and permission errors that can be updated. Failure messages should be communicated in the context of the form when possible, to prevent the user from having to re-enter any information.
This type of validation is launched upon form submission or transition to the next step in a wizard.
Exiting the wizard
Users can exit the wizard at any time. If a user has unsaved changes in the form and attempts to exit before completing the flow, you must prompt users with a modal asking them to confirm that they want to exit the flow. If there is no user input, you may end the multipage creation flow without a prompt.
Apply the recommended max content area width and default panel states by setting contentType='wizard' in the app layout component.
Restrict the flow to minimal mandatory inputs and pages.
You can use up to seven pages if necessary, but we recommend using three to five pages in the flow.