# 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).

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcqzO99cPDnojR53Si3%2F-Lcqzs3DUeyUBooZuM3b%2FScreen%20Shot%202019-04-19%20at%2012.07.43%20PM.png?alt=media\&token=e0951c20-73c5-479d-96eb-90eff6930cd6)

## 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](https://docs.airdev.co/canvas/general-information/functionality/hidden-variables-popup).
  * `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:
  * [`header A`](https://docs.airdev.co/canvas/assets/reuseables/header)
  * [`footer`](https://docs.airdev.co/canvas/assets/reuseables/footer)
  * `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.

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcqdnlLuAKfHrbJF99I%2F-Lcqn9UnTd6YTvDLlWsC%2FScreen%20Shot%202019-04-19%20at%2011.02.46%20AM.png?alt=media\&token=fed94a2e-a96d-48a9-b260-eb01712be432)

* `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.

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcqdnlLuAKfHrbJF99I%2F-LcqvkQ2uBK3ABwzk9H_%2FScreen%20Shot%202019-04-19%20at%2011.49.44%20AM.png?alt=media\&token=cd76d80d-daf7-4db9-b968-005320c70cbc)

* Update or remove UI elements in the Group Tabs.

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcqzO99cPDnojR53Si3%2F-Lcr3lRCikboY9SGK5ae%2FScreen%20Shot%202019-04-19%20at%2012.29.08%20PM.png?alt=media\&token=fa4e6b27-745b-4278-a071-f9b7758a4531)

* \[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.

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcqdnlLuAKfHrbJF99I%2F-LcqyRQ6FuIKiI5Ujom1%2FScreen%20Shot%202019-04-19%20at%2012.01.28%20PM.png?alt=media\&token=1ed83721-b35d-41de-a0cd-fd4918c4f5da)

* Set `RepeatingGroup List's` data source

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcqzO99cPDnojR53Si3%2F-Lcr4Jw4NqMgj9wfibed%2FScreen%20Shot%202019-04-19%20at%2012.31.11%20PM.png?alt=media\&token=78805c54-1df3-4958-8dfa-7f09e2bed7f5)

* Add workflows to `Button Back` and `Button Next`