# Vertical Multi-Step Page Template

## Overview

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MZKd36_PIR4Sgpt53WD%2F-MZKdIyj-mKsbqMB9OYB%2Fvertical-multistep.png?alt=media\&token=7fdcc86a-b27e-4f6a-8e3b-7a16f9b84100)

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://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MT0g-a3oPjy-toiIh3j%2F-MT0unlwmkabR-hkdkzX%2FScreen%20Shot%202021-02-08%20at%205.53.20%20AM.png?alt=media\&token=41c4fb5f-b030-4e0d-9842-7bb82ac84ffe)

* **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://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lt7Q_Az8ysRKvqvGy_5%2F-Lt7bhXKiw16QO-UTODX%2FScreen%20Shot%202019-11-07%20at%205.26.03%20PM.png?alt=media\&token=2a2c69d5-75f9-4974-8782-78387a2b8983)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airdev.co/canvas-pages-and-modules/pages/vertical-multi-step-page-template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.