✨ Exciting new features to the Canvas Base Template (v3.6)

Hi all,

We just released the latest version of our Canvas Base Template to the Bubble template store. There are many new features in this update and we’re very excited to share more details with the community below.

New header / footer setup (documentation)

In v3.6, we have rebuilt the header and footer from the ground up. The Canvas header and footer reusable elements are now HTML elements that use HTML, CSS, and flexbox to display any combination of navigation elements dynamically. You can also create custom headers for multiple user types and configure the links, icons, and buttons (including run Bubble actions) that you want to display in each header. These navigation elements are all managed in the admin portal under the Header / Footer tab.

What if I want to add custom designs to the header using Bubble elements?

Unfortunately, the new header does not support this. For apps that would need a custom header design, there is a reusable element within the Canvas Base Template called
:gear: system_header_backup_bubble” which is a header that contains only Bubble elements. If you’d like to use this version instead then please follow the steps below:

  • Rename the HTML “header” to “header_backup”.
  • Rename “:gear: system_header_backup_bubble” to “header” - This will ensure all Canvas page templates that you add to your app via the Canvas chrome extension would reference the correct Bubble header. It is important to change the header names first before adding any page templates to your app.
  • In your app, go through all the default pages that come with the template and replace the HTML header with the new Bubble header.
  • Add workflows directly to the new Bubble header reusable as the navigation links will not be managed from the admin portal

Reveal password functionality

revealpw
Users can now choose to show or hide their passwords when entering their passwords in a password input field on the login, account, and reset_pw pages. This functionality helps users verify if they’ve entered their passwords correctly.


Developer mode

We’ve added a new Is developer? field to the User data type. Any user with an Admin role can enable developer mode in the admin portal under the Settings tab. Enabling developer mode will reveal advanced template settings that would require Bubble knowledge and require the user to make changes directly in the Bubble editor.

How should I use this new field?

If you’re just building an app for yourself then you can simply ignore this field (but don’t delete it). If you are a Bubble freelancer or agency using the Canvas framework to build apps for clients, then you may want to use this field to hide any advanced settings in your app that you don’t want to expose to your client.

Currently, developer mode on/off toggles the visibility of the following items in the admin portal:

  • Under the Settings tab: App registration, App information, and Change path for marketing pages options
  • Any documentation link references
  • Adding/editing mail merge terms
  • Add Bubble page text under Pages tab
  • Adding or deleting a header

Data type organization

The “Website” data type is now called “:gear: App setting”. There is also a new data type called “App variable”. This new variable is in every Hidden variable popup and it is meant to be used for any app wide variables that you would need to reference throughout the app.

The :gear: icon within all system data types, option sets, and reusable elements differentiate Canvas data types and reusables from an app’s unique data types and reusables. If you see something with a :gear: icon, then it means you shouldn’t edit or delete it as it will likely break core Canvas functionality. If an element or type doesn’t contain a gear icon, it is meant to be changed by the Canvas developer.

Why doesn't the header reusable have a :gear: icon?

Great catch! This is actually intentional. Please do not rename this reusable as this would break the linkage between the Base template header and any Canvas pages added via the extension.


Multi-language support (documentation)

Under the Settings tab, you will now see a new option called “Multiple languages”. When toggled on, the admin will be able to change the default app language and add other supported languages from a dropdown. This dropdown pulls from a new Language option set in the template. When the multiple language support is enabled, new settings will be available to the admin and app users:

  • Ability for app users to select their default language

    • For logged out users, they will be able to select their language preferences from the footer on marketing pages

    • For logged in users, they will be able to select their language preferences from the Account page > new Preferences tab

  • Ability to add language variants to email templates

    • App emails will be sent to users based on their language preferences if the language variant exists for the respective email template. Otherwise, the email language will default to the app’s default language.

  • Easy integration with localizeJS (app translation)


Email templates (documentation)

  • You can now organize email templates into different folders.
  • Ability to add dynamic button text to email templates
  • Email language variants as described above

Please let us know if you have any questions or feedback - Happy building!

Canvas team

2 Likes

Outstanding! I wish there was a way to upgrade to this template :slight_smile:

is there a way for me to see which version I am using?

@raynellbell

You can check the website entry for the field version number in the data base.

As for updating versions, unfortunately it is not possible. Please review the post below:

1 Like