Canvas Documentation
Bubble Best Practices
v6.0
v6.0
  • Introduction
  • Key Features
  • What's New
  • Canvas Design System Figma File
  • CANVAS FUNCTIONALITY
    • Getting Started
    • Branding & Design
    • Marketing Pages
    • Page
    • Bubble Pages & Blocks
    • Roles & Permissions
    • Menus & Navigation
    • Data & Workflows
    • Emails & Alerts
      • Mail merge terms
    • Miscellaneous
      • Setting up two factor authentication
      • Cookie and consent banner
      • Setting your password policy
      • Set up Payment info on Account page
      • Loading screen
      • Configuring multiple languages
      • Customizing your app's portal page colors
    • Reference
      • Pages
        • Index
        • Product homepage
        • Marketplace homepage
        • SaaS homepage
        • About us
        • Pricing
        • Admin Portal
        • Account
          • Account deletion
        • Login
        • Legal
        • Reset Password
        • 404
      • Reusable elements
        • Header
        • Footer
        • Signup & Log in
        • Cookies Permission
        • Widgets
          • App security
          • Header Widgets
          • Workflow Widgets
        • Admin Portal
          • Admin analytics
          • Admin email & templates
          • Admin header & footer
          • Admin legal popups
          • Admin branding, setup checklist, and settings
          • Admin options app variables
        • Menu Focus Elements
        • Sidebar tab
      • Data types
      • Option Sets
      • Backend Workflows
      • Design standards
        • Manually Building UI
  • Canvas library
    • Updating asset RG data source
    • UI Patterns
      • Simple Dashboard Page
      • Product Marketplace Dashboard Page
      • Labor Marketplace Profile Page
      • Social Network Profile Page
      • Simple Events Search Page
      • Events Search Page
      • Ecommerce Search Page
      • Labor Marketplace Search Page
    • Page templates
      • Basic Bubble Marketing Page
      • Chat Messenger Page
      • Form Builder Page
      • Centered Profile Page
      • Left-Justified Profile Page
      • Standard page
      • Toggle Tabs Page
      • Menu Page
      • Mobile Menu Page
      • Video List Page
      • Horizontal Tabs Portal / Dashboard Page
      • Standard Portal / Dashboard Page
      • Simple Portal / Dashboard Page with Icons
      • Double Sidebar Portal Page Template
      • Search Page
      • Map Search Page with Toggle and Filters
      • Floating Map Search Page
      • Search Bar Page
      • Multi-Step Page With Progress Bar
      • Standard Multi-Step Process Page
      • Multi-Step Process Page with Sidebar
      • Gallery Profile or Product Page
      • Sidebar Profile Page with Tabs
      • 2-Column Menu Tabs Page
      • 2-Column Checkout Page
      • 2-Column Video Chat Page
      • Vertical Multi-Step Page Template
    • Blocks
      • Pagination
      • Monthly Calendar Scheduling Widget
      • No Reply Comments Thread
      • Nested Comments Thread (with Like and Reply)
      • Placeholder Group
      • List with Circular Progress Bar Repeating Group
      • Top Input Chat Widget
      • Bottom Input Chat Widget
      • Toggle Tabs Group
      • Single-Select or Multi-Select Pill Tabs Group
      • Settings Group
      • Order Confirmation Group
      • To-Do List Repeating Group
      • Title Group with Button and Filters
      • Product Details Group With Progress Bar
      • Listing details with Icons and Menu Focus Group
      • Week Daily Availability Group
      • Frequently Asked Questions (FAQ) Repeating Group
      • Dismissible Module
      • Video Group
      • About Group
      • Add to Cart Group
      • Full Width Map with Directions Link
      • Location Module (Map and Directions)
      • Drag and Drop Repeating Group
      • Infinite Columns Horizontal Scroll Data Table with Fixed First Column (Repeating Group)
      • Nested Data Table (Repeating Group)
      • Standard Data Table (Repeating Group)
      • Standard Data Table (Table Element)
      • Mobile-Friendly Data Table (Repeating Group)
      • Mobile-Friendly Data Table (Table Element)
      • Infinite Columns Horizontal Scroll Data Table (Repeating Group)
      • Infinite Columns Horizontal Scroll Data Table (Table Element)
      • Activity Feed
      • Social Feed
      • Nested Repeating Group
      • Advanced Form Inputs Group
      • Reviews with Ratings Summary and Images
      • Reviews Repeating Group with User Images
      • Reviews (Text Only) Repeating Group
      • Standard Repeating Group with Image
      • Search Bar Group
      • Listing Details Group
      • Post Group with Upvoting UI
      • Large Chart Dashboard Widget
      • Chart With Key Metrics Dashboard Widget
      • 2-Column Table and Key Metrics Dashboard Widgets
      • 2-Column Large Metrics Dashboard Widgets
      • 4-Column Large Metrics Dashboard Widgets
      • Main Image with Thumbnails
      • Centered Profile Block
      • Left-justified Profile Block
      • Tile Image Gallery and Popup
      • Image Feed with Nested Comments Thread
      • 1-Column Standard Form Inputs Group
      • 2-Column Slideshow Tiles Repeating Group
      • 2-Column Repeating Group (Text, Link, Image, and Description)
      • 2-Column Repeating Group (Link, Text, and Button)
      • 2-Column Repeating Group with Actions
      • 2-Column Grid Tiles Repeating Group
      • 2-Column Form Group
      • 4-Column Tiles Repeating Group
      • Expiration timer
    • Popups
      • Edit Drawer
      • Map Location Details Drawer
      • Details and Comments Drawer
      • Confirmation Popup
      • Message Popup
      • Image Popup
      • Video Popup
      • Vertical Scroll Popup
      • Permissions popup
      • Multimedia Slideshow 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
      • View Profile Popup
      • Send Message Popup
      • Multi-Select Pill Tabs Popup
      • Net Promoter Score (NPS) Popup
      • Pricing Plans Popup
    • Reusables
      • Multimage uploader
      • Sidebar_icontab
      • Doublesidebar_tab
Powered by GitBook
On this page
  • Bubble Pages
  • Role
  • ⚙️ Admin Options Categories
  • ⚙️ Admin Options
  • ⚙️ Navigation Action Type
  • ⚙️ Navigation Button Style
  • ⚙️ Navigation Element Type
  • ⚙️ Navigation Feather Icon
  • ⚙️ Password Strength
  • ⚙️ Template version
  • ⚙️ Yesno (Inclusive "Yes/No")
  • ⚙️ Language
  • ⚙️ Verify type

Was this helpful?

  1. CANVAS FUNCTIONALITY
  2. Reference

Option Sets

A few option sets come included with the Canvas template:

Bubble Pages

  • Display (text) - this is the page name

  • Roles (List of Roles) - the user roles that are allowed to access this page

  • Private? (yes/no) - "yes" means the page is private

    • If a user accesses a Page that is marked as Private, they will be redirected to the index page unless they are logged in to a User whose Role has been added to the Roles for this page

The Canvas Base Template comes with a number of pages. The two private pages are the account page, which can be accessed by Standard and App Admin users (but not logged out users), and the admin portal page, which can be accessed by by App Admin users.

Role

  • Display (text) - this is the role name

By default, your app comes with two roles: App Admin and Standard.

To add a new role, create a new option in the option set for that role

  • New option in Role option set (e.g. Account Admin or Sales)

  • Add the new role to the Bubble Pages attribute Roles if they should have permission to access that page.

  • Assign the Roles to Users, usually through one of these methods:

    • Assign the new Role to users manually in the Bubble Editor's Data tab

    • Build the logic to let App Admins sign those Users up from the admin page

    • Build the logic to assign the new Role to the Users when they're signed up

⚙️ Admin Options Categories

Manages tabs to display different options in the admin portal

⚙️ Admin Options

List of all the different options we display in the admin portal

⚙️ Navigation Action Type

Contains the different types of actions that can be used for a navigation element in the header or footer

⚙️ Navigation Button Style

Contains the CSS class for different button styles in the header

⚙️ Navigation Element Type

Canvas uses this option set to maintain the default settings for different types of navigation elements in the header and footer

⚙️ Navigation Feather Icon

List of all Feather icons code text. Canvas uses this throughout the template to manage the correct icon to display for links, headers, etc.

⚙️ Password Strength

This is used to manage the application's password policy strength requirement.

⚙️ Template version

This is used for version control and in our Canvas Chrome extension.

⚙️ Yesno (Inclusive "Yes/No")

This is an option set that works similar to the Bubble "yes/no" data type, but adds a 3rd option that returns true for both yes and no. In short, it works as follows:

  • no will return results where the field is "no"

  • yes will return results where the field is "yes"

  • yes OR no will return all results

For a more detailed explanation, read on.

When creating searches in Bubble, if you have a constraint on a yes/no field, it will always return either the "yes" options or the "no" options.

The above image shows how a search either includes Inactive users or Active users, but not both. Here's the search logic used to produce this result:

Here's how this will look when set up with the Inclusive / Exclusive option set.

For a demonstration of how to use this in a real app, check out the Dropdown Users on the admin page of the Canvas Base Template.

The performance of these searches seemed to be about the same in our tests. Please let us know if you notice anything different.

⚙️ Language

A full list of languages and to manage all localization settings in Canvas and Bubble.

⚙️ Verify type

Manages the type of verification being done when using widget_verify_phone/email. Also used with the Verify backend calls to indicate whether a user should receive an sms or email.

PreviousData typesNextBackend Workflows

Was this helpful?

Normal Bubble yes/no
Logic with normal Bubble yes/no (no inclusive yesno option)
Option set yes/no/yesno
Logic with normal Bubble yes/no (no inclusive yesno option)