2-Column Multi-Step Process Page
Overview
This page has a series of forms. Each form constitutes a "step" in the process. Users can go back and forth between steps and see what step they are on via a dynamic progress bar reusable element at the top of the page. This dashboard version is great for complicated forms that require help texts / support materials (e.g., TurboTax).
Structure
When this page is added to your app, it will come with three main groups:
Group Standard Forms
- This group contains modules that are connected to workflows. EachGroup Tab
within this group will show or hide depending on which progress step the user is currently on.Group page860Group
- This group contains the responsive settings for all additional modules you add through Canvas Pages.Group Side panel
- This group contains two groups:Group Help text
- Use this group to display help textsGroup links
- Use this group to display a list of things by updatingRepeatingGroup List
This page will come with a
Popup Hidden Variables
. For more information on how to use thePopup Hidden Variables
, click here.var - Website object
- This group stores the website object (e.g., app name, primary color, and etc.)var - dummy
- This is a placeholder group. You can store any data here by updating the type of content and data source of the group.
Button BACK
goes to a previous progress stepButton NEXT
goes to the next progress stepThe page comes with a
step
url parameter. Users can load the page to show a specific and its corresponding module by adding a url parameter (e.g, ?step=3).
How to set up
Modify or update the progress bar steps within the
progressbar
reusable element to fit your needs.
Update or remove UI elements in the Group Tabs.
[OPTIONAL] Remove
Group Tab 1
,Group Tab 2
,Group Tab 3
,Group Tab 4
,Group Tab 5
, orGroup Tab 6
if you are not using those groups.[OPTIONAL] Resize
Group page860Group
and add other modules inside of itMake sure you update the condition statements on those modules.
Set
RepeatingGroup List's
data source
Add workflows to
Button Back
andButton Next
Last updated