# Multi-Step Process Page with Sidebar

## Overview

![](https://1633175017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSxXQuy9qhgrmawSEYdMH%2Fuploads%2FM33Fdnh5qXIqMoMXxh6h%2F57.gif?alt=media\&token=90a4d1b0-7f30-4fe9-9f75-d49d5a5fabbc)

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 and supporting 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 blocks that are connected to workflows. Each **Group Tab #** within this parent group will show or hide depending on which progress step the user is currently on.
  * **Blocks container 860 (do not rename)**\
    This group contains the responsive settings for all blocks on the page. Any new blocks should be added to this group.
  * **Group Side panel**\
    This group contains two groups:
    * **Group Help text** - Use this group to display help texts or supporting information
    * **Group links** - Use this group to display a list of things by updating the data source of RepeatingGroup List
* This page comes with one popup:
  * **Popup Hidden Variables** contains two groups:
    * **var - Website object**\
      This group stores the website object (e.g., app name, primary color, and etc.)
    * **var - dummy data**\
      A placeholder group in case you want to use any hidden variable groups later.
    * **var - tab url parameter**\
      This group stores the progress step (of type `text`) that the user is currently on.
    * **var - current step**\
      This group stores the current step (of type `number`) that the user is currently on. 
    * **var - total steps**\
      This group stores total number of steps (of type `number`).
* This page will come with two reusable elements:
  * [**header**](https://docs.airdev.co/canvas/canvas-functionality/reference/reusable-elements/header)
  * **multistep\_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://1633175017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSxXQuy9qhgrmawSEYdMH%2Fuploads%2FAQBYLitchHwhP02BjcXw%2F58.png?alt=media\&token=4bad58bf-415c-48a2-aa0a-11696165fd87)

* Clicking on **Button Back** goes to a previous progress step
* Clicking on **Button Next** goes to the next progress step
* The page also comes with a **tab url parameter**. Users can load the page to show a specific step and its corresponding block by adding a url parameter (e.g, ?tab=3 or \&tab=3 if there are multiple parameters). 

## How to set up

* Update the number of total steps in **var - total steps.**
* Modify or update the progress bar steps within the **multistep\_progressbar** reusable element to fit your needs.

![](https://1633175017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSxXQuy9qhgrmawSEYdMH%2Fuploads%2F6HqFKQnwVMVOfzXFUSCt%2F59.png?alt=media\&token=66192bad-76c8-4f3d-95a0-324d56a91004)

* \[Optional] Update or remove UI elements in **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 **Blocks container 860 (do not rename)** and add other blocks inside of it
  * Make sure you update the conditional statements on those blocks. Use existing Group tabs as a reference and add a similar conditional statement:\
    \&#xNAN;*If var - current's number is {#}, then the group is visible*

![](https://1633175017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSxXQuy9qhgrmawSEYdMH%2Fuploads%2FAeGMpgxTWDTeJfV5HEQS%2F60.png?alt=media\&token=537159bb-d142-4137-98ff-887d2b167466)

* Update **RepeatingGroup List's** data source
* Update the text elements data sources in **Group Help text**
* Add workflows to **Button Back** and **Button Next**