Canvas Pages and Modules
1.0.0
1.0.0
  • Welcome
  • PAGES
    • Profile Page
    • Standard Page
    • Toggle Tabs Page
    • Mobile Menu Page
    • Video List Page
    • Portal/Dashboard Page
    • Search Page
    • Search Bar Page
    • Listing Profile Page
    • 1-Column Multi-Step Process Page
    • 2-Column Multi-Step Process Page
    • 2-Column Profile Page
  • MODULES
    • Comments Thread
    • Nested Comments Thread (with Like and Reply)
    • Chat Widget
    • Week Daily Availability
    • Video Group
    • Drag and Drop Repeating Group
    • Reviews Repeating Group with Image
    • Reviews (Text Only) Repeating Group
    • Accept/Decline Repeating Group
    • Nested Repeating Group
    • Standard Repeating Group with Image
    • Standard Repeating Group with Image and Add Button Repeating Group
    • Expandable Input Forms Repeating Group
    • Expandable Group (with Button, Link, and Section Header) Repeating Group
    • Expandable Group (Text Only) Repeating Group
    • Single Input Search Bar and Filter Group
    • 1-Column Standard Form Inputs Group
    • 1-Column Instagram Tiles Group
    • 1-Column Link, Text, and Menu Focus Repeating Group
    • 1-Column Title Text, Link, and Body Text Repeating Group
    • 2-Column Title Link and Text Repeating Group
    • 2-Column Simple Form Inputs Group
    • 2-Column Sortable List (Image, Link, Star Rating, and Text) Repeating Group
    • 3-Column Text and Link Repeating Group
    • 3-Column Horizontal Scroll Repeating Group
    • 4-Column Data Table with Title
    • 4-Column Date Table with Cell Selection, Menu Focus Group, and Filters
    • 4-Column Standard Tiles Repeating Group
    • 4-Column Product Image Tiles with Prices Repeating Group
    • 4-Column Video, Star Rating, and Text Tiles Repeating Group
    • 4-Column Reviews Tiles with Star Rating Repeating Group
    • 5-Column Data Table with Sortable Fields
    • 6-Column Small Tiled Horizontal Scroll Repeating Group
  • Popups
    • Stripe Credit Card Purchase Popup
  • Reusables
    • applyfilters
    • menufocusgroup or Menu options (︙)
Powered by GitBook
On this page
  • Overview
  • Structure
  • How to set up

Was this helpful?

  1. PAGES

2-Column Multi-Step Process Page

Previous1-Column Multi-Step Process PageNext2-Column Profile Page

Last updated 5 years ago

Was this helpful?

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

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

    • 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:

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

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

  • Update or remove UI elements in the 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 Group page860Group and add other modules inside of it

    • Make sure you update the condition statements on those modules.

  • Set RepeatingGroup List's data source

  • Add workflows to Button Back and Button Next

This page will come with a Popup Hidden Variables. For more information on how to use the Popup Hidden Variables, .

click here
header A
footer