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. Each Group 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 texts

      • Group links - Use this group to display a list of things by updating RepeatingGroup List

  • This page will come with a Popup Hidden Variables. For more information on how to use the Popup 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.

  • This module will come with three reusable elements:

    • progressbar - This reusable element contains the UI for the progress bar. It has a custom state called step # of type number which stores the current step # that the user is on.

  • Button BACK goes to a previous progress step

  • Button NEXT goes to the next progress step

  • The 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, or Group Tab 6 if you are not using those groups.

  • [OPTIONAL] Resize Group page860Group and add other modules inside of it

    • Make sure you update the condition statements on those modules.

  • Set RepeatingGroup List's data source

  • Add workflows to Button Back and Button Next

Last updated