# Vertical Multi-Step Page Template

## Overview

![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7QCQzQXopA53eLQUo8SB%2Fuploads%2FT2h0lLaUvkJcRnL202ow%2F88.png?alt=media\&token=1e8574e9-299f-4048-a977-a2699192fa82)

This page includes a series of groups and a progress bar. Users can go back and forth between steps using the "Back" and "Next" buttons. Users can also change steps by clicking on one of the left-side tabs. This page is best used for complex onboarding processes and complex intake forms. 

## Structure

* When this page is added to your app, it will come with two main groups:
  * **Group Multistep Forms** contains the following:
    * **Group Collapsible tab 1** includes a form with various inputs
    * **Group Collapsible tab 2** includes a one-column form
    * **Group Collapsible tab 3** includes an image, title text, and description text (ideal format for onboarding screens)
      * You should upload an SVG image
    * **Group Collapsible tab 4** includes a multi-select repeating group
      * **RepeatingGroup Dummy** holds the data for the multi-select options (type Dummy). It also has a custom state on it for the user's list of selected options.
      * Clicking on **Group Main select option** will add the Repeating Group's current option to the custom state list of `selected options`.
    * **Group Collapsible tab 5** includes a loading screen
    * **Group Collapsible tab 5** includes a confirmation screen with an icon, title text, and description text, and button
    * **Group Main buttons** includes **Button Back** and **Button Next**
  * **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.

![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7QCQzQXopA53eLQUo8SB%2Fuploads%2FDARAeQr7Wn5XdAy2AUmD%2F90.png?alt=media\&token=399fd456-4819-4ab2-a03f-08681fd33d7f)

* **FloatingGroup Bottom menu** contains **Button Back mobile** and **Button Next mobile**
  * The group is only visible when the current page width is less than or equal to 500
* This page comes with one popup:
  * **Popup Hidden Variables** contains four 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 - current step**\
      This group stores the current step number (step the user is currently on)
    * **var - total steps**\
      This group stores the number of total steps in the process
* Clicking on **Button Back** and **Button Back mobile** will move the user to the previous step
* Clicking on **Button Next** and **Button Next mobile** will move the user to the next step
* This page will come with one reusable element:
  * [**header**](https://docs.airdev.co/canvas/canvas-functionality/reference/reusable-elements/header)

## How to set up

* Modify the data source of **var - total steps**
* \[Optional] Make all of the  **Group Nav X Border Group elements** tabs not clickable if the User won't be able to change steps by clicking on elements within the sidebar
* \[Optional] Make only some of the **Group Nav X Border Group elements** tabs clickable, depending on how much information the Current User has submitted. 
  * Note: This is a more complex setup that will require adding an extra field to the User data type that stores the most recent completed step for each User. 
* \[Optional] Hide any of the **Group Nav X Border Group elements** for any extra tabs that aren't needed.
* \[Optional] Expand the height of **Blocks container 860 (do not rename)** and add other blocks inside of it
* \[Optional] Add or modify any conditions on the "Button Back" and "Button Next" elements that trigger the *Change process step* custom event.
* Add workflow to **Button Go to portal**

![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7QCQzQXopA53eLQUo8SB%2Fuploads%2FBIeaWU52tVDkFlO0OVCx%2F89.png?alt=media\&token=8f1fa35f-9a3e-41cb-ba5e-df4701b10470)

* Update the data source of **RepeatingGroup Dummy** in **Group Collapsible tab 4**