# Standard Multi-Step Process Page

## Overview

![](https://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2FPRzw9x5yESkhl8vZO4nk%2F53.gif?alt=media\&token=8bd18b4c-4f11-4420-94bc-5d03581e877d)

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 version is ideal for simple forms such as check out process and surveys.

## Structure

* When this page is added to your app, it will come with two 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.
* 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://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2FQQgsd4rjHMnoJPGO7KY3%2F54.png?alt=media\&token=916ca1b0-0cd7-4469-ba21-2282e968b0d0)

* 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://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2FUrHkoBp9CH1WbdRbaQ00%2F55.png?alt=media\&token=92ad91f6-dae0-42f7-ac55-edacdd9f8575)

* \[Optional] Remove **Group Tab 1**, **Group Tab 2**, **Group Tab 3**, **Group Tab 4**, **Group Tab 5**, or **Group Tab 6.**
* \[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://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2FAAO7WMQvtrPgqNAWlMVH%2F56.png?alt=media\&token=feea9b28-456a-43d6-bff9-f686ef52a921)

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


---

# 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/4.1/canvas-library/page-templates/standard-multi-step-process-page.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.