Canvas Pages and Modules
2.0.0
2.0.0
  • Welcome
  • PAGES
    • Free Bubble Marketing Page
    • Premium Bubble Marketing Page
    • Centered Profile Page
    • Left-justified Profile Page
    • Standard Page
    • Toggle Tabs Page
    • Menu Page
    • Mobile Menu Page
    • Video List Page
    • Portal/Dashboard Page
    • Portal / Dashboard Page with Icons
    • Simple Portal / Dashboard Page with Icons
    • Search Page
    • Map Page with Search Bar, Toggle, and Filters
    • Search Bar Page
    • Listing Profile Page
    • Multi-Step Page (Progress Bar)
    • 1-Column Multi-Step Process Page
    • 2-Column Multi-Step Process Page
    • 2-Column Profile Page
    • 2-Column Profile Tabs Page
    • 2-Column Menu Tabs Page
    • 2-Column Checkout Page
    • 2-Column Product Checkout Page
    • 2-Column Video Chat Page
  • BLOCKS
    • Comments Thread
    • Nested Comments Thread (with Like and Reply)
    • Chat Widget
    • Bottom Input Chat Widget
    • Toggle Tabs Group
    • To-do List
    • Title Group with Button and Filters
    • Listing Details with Tags, Button, and Progress Bar
    • Listing details with icons and menu focus group
    • Week Daily Availability
    • Shopping Cart
    • FAQ Group
    • Shipping Details
    • Payment Methods
    • Order Confirmation
    • Dismissible Module
    • Placeholder group
    • Video Group
    • About Group
    • Add to Cart Group
    • Full Width Map with Directions Link
    • Location Module (Map and Directions)
    • Drag and Drop Repeating Group
    • Advanced Form Inputs Group
    • Reviews Repeating Group with Image
    • Reviews (Text Only) Repeating Group
    • Nested Repeating Group
    • Standard Repeating Group with Image
    • Single Input Search Bar and Filter Group
    • Listing Details Group
    • Post Group with Upvoting UI
    • Dashboard Chart Widget
    • Main Image with Thumbnails
    • Centered Profile Module
    • Left-justified Profile Module
    • 1-Column Standard Form Inputs Group
    • 1-Column Instagram Tiles Group with Nested Comments
    • 1-Column Link, Text, and Menu Focus Repeating Group
    • 2-Column Repeating Group (Text, Link, Image, and Description)
    • 2 Column Repeating Group (Link, Text, and Button)
    • 2-Column Tiles Repeating Group
    • 2-Column Simple Form Inputs Group
    • 2-Column Sortable List (Image, Link, Star Rating, and Text) Repeating Group
    • 2-Column Dashboard Widgets
    • 3-Column Dashboard Widgets
    • 3-Column Repeating Group (Text, Link, Image, and Description)
    • 3-Column Text and Link Repeating Group
    • 3-Column Icons with Labels Repeating Group
    • 3-Column Tiles Repeating Group
    • 3-Column Tiles with Buttons Repeating Group
    • 3-Column Horizontal Scroll Repeating Group
    • 4-Column Tiles Repeating Group
    • 5-Column Date Table with Cell Selection, Menu Focus Group, and Filters
    • Mobile-Friendly Data Table with Cell Selection, Menu Focus Group and Filters
    • Standard Horizontal Scroll Data Table
    • Infinite Columns Horizontal Scroll Data Table
    • Infinite Columns Horizontal Scroll Data Table with Fixed First Column
  • Popups
    • Confirmation Popup
    • Message Popup
    • Image Popup
    • Video Popup
    • Vertical Scroll Popup
    • Edit Popup
    • Standard Form Popup
    • Subscribe Popup
    • Feedback / Contact Popup
    • Details Popup
    • Add List Popup
    • Advanced Form Popup
    • Rating Popup
    • Toggle Tabs Popup
    • Share Popup
    • Multi-Step Popup
    • Invoice Popup
    • 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

Multi-Step Page (Progress Bar)

Overview

This page includes a series of groups and a progress bar. Users can go back and forth between steps and see which step they are on via a dynamic progress bar. This page should be used for surveys or on-boarding walkthroughs.

Structure

  • When this page is added to your app, it will come with two main groups:

    • Group Multistep Forms contains the following:

      • ProgressBar stores the user's current progress

        • It references data from var - current step and var - total steps. You can modify the data source in the hidden variables popup

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

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

How to set up

  • Modify the data source of var - total steps

  • [Optional] Remove Group Collapsible tab 1, Group Collapsible tab 2, Group Collapsible tab 3, Group Collapsible tab 4, Group Collapsible tab 5, or Group Collapsible tab 6.

  • [Optional] Resize Blocks container 860 (do not rename) and add other blocks inside of it

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

  • Add workflow steps to Go to next process step and Go to previous process step custom workflows

  • Add workflow to Button Go to portal

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

  • Move FloatingGroup Bottom menu to the bottom of the page (make sure the bottom of the floating group is aligned with the bottom of the page).

PreviousListing Profile PageNext1-Column Multi-Step Process Page

Last updated 4 years ago

Was this helpful?

header