Canvas Documentation
Bubble Best Practices
v2
v2
  • Welcome
  • Introduction
  • Contents
  • Using Bubble
    • Bubble basics
    • Bubble best practices
      • Principles
      • Database
      • Design
      • Security
      • SEO
      • Speed
      • Modularity
        • Data triggers
  • Using the template
    • Getting the template
    • Setup
      • Quickstart
      • Features and configuration
        • Customizable landing page
        • Header menu
        • Menu focus group
        • Styles and colors
        • Extending the admin portal
        • Set a password policy
        • Enable cookies
        • Alerts
        • Emails
        • Hidden variables popup
        • Set up index page redirects
        • Set up payments on account page
        • Set up social media links
        • Search engine optimization (SEO)
        • Setting up domains
        • Legal docs
    • Extending the template using Canvas Pages
      • How it works
      • Get started
      • Setting up added modules
      • Updating Canvas styles
    • Extending the template manually
      • Padding
      • Pages, groups, and popups
      • Hiding groups
      • Styles
    • Reference
      • Pages
        • index
        • admin
        • home
        • account
        • verify
        • login and loginsimple
        • termsofservice
        • privacypolicy
        • reset_pw
        • standardpage
        • 404
      • Reusable elements
        • header
        • footer
        • signup/login
        • popupsreusable
        • menufocusgroup_template (︙)
        • menufocusgroup_user
        • menufocusgroupfeature_b
        • menufocusgroup_email
        • menufocusgroup_notifications
        • menufocusgroup_shoppingcart
        • menufocusgroup_search
        • cookiespermission
        • homepageblocks
        • admin portal reusables
          • admindashboard
          • admingeneralsettings
          • adminemail
          • adminseosettings
          • adminsocialmediasettings
          • adminsocialmediainfo
          • adminlegalpages
          • adminhomepagesetup
          • adminstyles
          • adminfeaturebacklog
      • Data and workflows
        • Data structure
        • Option sets
        • API workflows
      • Canvas Pages: lists of modules & page templates
  • Demos
    • Yelp for Books
  • Other Canvas templates
Powered by GitBook
On this page

Was this helpful?

  1. Using the template
  2. Extending the template using Canvas Pages

Setting up added modules

PreviousGet startedNextUpdating Canvas styles

Last updated 5 years ago

Was this helpful?

Adding modules using Canvas Pages is only the first step to extending the functionality of your app. In order to make the most of the Canvas modules, you need to modify these modules in a few different ways:

  • Adding or modifying actions on buttons

  • Changing data sources on repeating groups or elements with data sources

  • Filling out content on groups

  • Linking content on groups to data objects

  • Linking modules to portal tabs (show/hide based on what user selects)

How to connect two modules (Example)

  1. Add the modules Standard Repeating Group (Image, Link, and Description)

    and Standard Form Popup on a page with any page template to your app.

    1. Follow the instructions in if unsure how to do this.

  2. Submit a request to create the above page.

  3. Wait until the request is complete and you receive a confirmation email. From that confirmation email, click the button to access the Bubble editor.

  4. On the page you just created, select the element Button solidPrimaryMediumBody14pt. Rename this button something intuitive, e.g. Button Confirm New Product.

  5. Press start/edit workflow on this button.

  6. Create a workflow to show the Popup Confirm when this button is pressed.

  7. Preview the page and check that the Confirmation popup appears when the button is pressed.

Voilà! You've finished creating a page with two different types of elements, and linked those two elements together. Nice job!

Most modules will take more configuration than the above example, especially if you're setting up forms with many inputs or more complex functionality.

Another examples: Chat module

For reference, you can compare your page to .

More complex modules, like the Chat module, also require some customization. This type of group comes with custom data types associated to it, T-Threads and T-Messages. When using a new module please refer to (Chat module documentation) in order to figure out how to set it up.

this one
the documentation for that module
How it works
Your workflow should look something like this (after renaming elements).