Hello Bubblers,
I’m dropping here this new template that we just released. I hope you’ll find it useful for your projects:
You can try it here, of course it is FREE
Take a moment to understand how it works, especially since the setup might seem a bit tricky initially.
We’ve broken down some easy-to-follow sections to help you get the most out of this template.
Menus
To add a menu, you can simply add an Option in the Options Set tab.
Your option must have:
- A display name: this is the name of the Menu that will be shown in the left column
- An icon: this is a text value that indicates which icon you want to show. You can find the icons name here: https://feathericons.com/
Pages
Pages are reusable elements. You can find them in the reusable pages section, in the top left corner of the Bubble Editor:
Feel free to edit pages, or create new ones. After creating or editing a page, put it inside the “Pages” group in the index page. In the elements tree, you’ll find it here: index → Main → Right group → Pages
You can create a new page copying one of the existing reusable element, or create one from scratch.
Keep in mind: every page should have 2 properties:
- Mode: it is a Option Set that is used to switch between Light and Dark mode. It is set in the index page, as a page state, and then is propagated to all the child elements via reusable element properties. Make sure you set the reusable element property = to the father page value:
- Menu / Tab Name: this text value is used to show the page only when the selected menu is the right one, using a condition:
Menu is a group that has a state named “Selected”, that is of type “Menu”. Make sure that your page is collapsed when hidden, in its Layout tab.
Multipages
You can find an example of multipage, in the Assets menu. Instead of a page, we have created a group that contains 2 Pages, named “Multitab Page Asset”. In the Menu Option we have created a list field “Tabs” in which we added a list of text. Then we use the list to show / hide children Pages, using a condition:
Popups
Popups are managed with a reusable element named Popup Manager. This allows you to use the same popup from different pages, to edit or show data and messages.
In the Popup manager you can create your custom popup. Use statuses to refer to specific data items.
To show a popup, create a custom event in the Popup Manager workflows. Pass the data you need to the event parameters, such as the item that you need to show in the popup, or other parameters that you need:
In the Custom event, reset your popup and assign the correct status to the popup. Then just show it.
In any page, you can trigger the Popup Manager’s Custom event by using the action “Trigger a custom event from a reusable element”, and specify the parameters that you want to pass to it.
Make sure that you add the Popup Manager reusable element in all the pages that have to show a popup.
Dark Mode
You can easily switch between Light and Dark mode, by setting the main page status “Mode” to one of the two options “Light” or “Dark”.
Each mode contains a list of attributes, like “Text color”, “Card color”, etc.
Each attribute contain the HEX color code that has to be used in that specific mode. For example, the attribute “Text color” in the mode option “Light” is #000000, while in the “Dark” mode option is #FFFFFF.
This allows the app to switch elements color when changing the Mode.
Whenever you set an element’s color, make sure you use one of the available attributes:
If the element is not in the index, but in a Page, you should refer to that page Mode property, like in this example:
You can also create any number of Options, other than “Light” and “Dark”, for example to customize your app colors to different clients colors, or simply to create more color customization options to your users.
And that was it! 
I hope you’ll find this useful, here is the link to the free template again:
Good luck with all your great projects! 
Cosmic Steve 