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

![](/files/-Lcqzs3DUeyUBooZuM3b)

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

![](/files/-Lcqn9UnTd6YTvDLlWsC)

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

![](/files/-LcqvkQ2uBK3ABwzk9H_)

* Update or remove UI elements in the Group Tabs.

![](/files/-Lcr3lRCikboY9SGK5ae)

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

![](/files/-LcqyRQ6FuIKiI5Ujom1)

* Set `RepeatingGroup List's` data source

![](/files/-Lcr4Jw4NqMgj9wfibed)

* 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-pages-and-modules/master-1/pages/2-column-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.