Panel with stepper
The Panel with stepper component guides you through a series of steps in a structured and sequential manner. Each step represents a stage in a process.
You can add components to a panel in each step. Use the Previous and Next buttons to navigate through them.
Example
You can use the Panel with stepper component to create an app where the user must follow certain steps to request a new expense. In this example:
- Users select the type of expense.
- Users add additional information and/or attach documents.
- Users upload the information.
Note: The Panel with stepper component follows the WCAG 2.0 AA accessibility guidelines.
Properties
The following Panel with stepper component properties are available:
Main
| Property | Description | Required |
|---|---|---|
| Title | Enter the text you want as the heading. | Yes |
| Subtitle | Enter the text you want to display below the Title. | No |
| Icon before | Select an icon or type to search. This displays to the left of the Title. | No |
| Icon after | Select an icon or type to search. This displays to the right of the Title. | No |
Styles
| Property | Description | Required |
|---|---|---|
| Variant | Select the appearance. | No |
| Content size | Select the size from the drop-down menu. | No |
| Hide border | Turn on to hide the border. | No |
Navigation Buttons
| Property | Description | Required |
|---|---|---|
| Previous button text | Enter the text to display in the button. | Yes |
| Next button text | Enter the text to display in the button. | Yes |
| Finish button text | Enter the text to display in the button. | Yes |
Steps
You can:
- Add steps using the Plus (+) button next to menu header.
- Rearrange the steps using the arrows in each Step header.
- Delete the steps using the Delete step button in the bottom corner of each Steps menu.
| Property | Description | Required |
|---|---|---|
| Step title | Enter the text you want as the text heading. | Yes |
| Step description | Enter the text you want to display below the Title. | No |
| Substep | Turn on to make the step a substep of the previous step. Not available for the first step. | No |
| Step hidden | Select the checkbox to hide the step in the end-user app. | No |
| Add rule | You can set rules to hide the step using Liquid. If no rules are set, the step will be hidden in all instances. | No |
| Step disabled | Select the checkbox to disable the step in the end-user app. | No |
| Add rule | You can set rules to disable the step using Liquid. If no rules are set, the step will be disabled in all instances. | No |
Interactions
| Property | Description | Required |
|---|---|---|
| Hidden | Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel. | No |
| Add rule | You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances. | No |
Note: See Add rules to trigger properties for more information on setting rules for these properties.
Events
The Panel with stepper component supports the On finish event. See events and actions for more details.
Note: You must have the component selected on the canvas to see the Logic map tab.