I have just finished building a huge project with bubble.
I built an advanced analysis and assessment system for a company which does assessments to companies traded in the stock market.
The biggest challenge was that the “company” data type had about 200 (!!!) fields and there were many functions to be done to each field. I cannot imagine how I would do it by myself with traditional coding…
So, I have many insights I wish to share with all you bubblers…
• Make sure to use the same element for a verity of actions – for example: a form for creating a new company should also be used for updating a company.
you can achieve this mainly with conditional formatting.
• USE GROUPS! It is very important regarding responsiveness and regarding maintaining order inside the page.
Once elements are inside groups it is easier to design their responsiveness – many times I was frustrated when elements didn’t behave as I wanted them to in mobile view and only when I put them together in a group (“group elements in a group”), they behaved as I wanted.
generally speaking, the use of groups helps to maintain order and functionality of the page and its look.
• Be familiar with the “mobile version” option.
Many times it is better to define a different page as the mobile version of the page – this means when bubble will detect that the user is viewing the page from a mobile device, bubble will show the mobile page you defined and not the original page.
In this way you design 2 pages – one for PC and one for mobile – I found it useful because it saved me a lot of work with all the responsive settings – all I had to do is when I finished building the regular page with all the workflows involved, I copied it for the mobile version, and only had to change the design to a mobile scale and that’s all – I had one page for PC and another for mobile!
• USE STYLES –
Be mindful that each element has a style. Create your own styles and use them repeatingly! Once each element has a style, you can make changes to multiple elements only by changing their style in one place!
Another advice regarding styles is to define your color pallet in the settings - I’ve added a screenshot of this.
• Always keep in mind the responsive subject – and if you copy and use an element many times, like a group in a complicated form or a robust table, remember to define in the original copied element (group or text, etc.) all the design and responsive settings, like max and minimum width or fixed width, and to set the type of content and the data source of the group – it’s not fun to create a complicated table or a complicated form and then find out that you need to set all those settings in each cell over and over, when you could just copied all the elements of the form or the table with the right setting from the first place.
• Utilize the DB mindfully – think ahead if a field should be a text field, a number or Boolean – yes/no field. It is important because you cannot do math with text fields. And it is not always easy and convenient to use Boolean values – sometimes it is better to use a text field and a condition or a workflow or even a custom state instead.
• Get to know the Ionic Icons plugin – most of the time it is better to use Ionic Icons and not the default check box or radio button - you will have much more control and the ability to customize the look and behavior of them using custom states, conditions and conditional workflows.
• Master custom states! Use it to create a single page UX. Show and hide groups on a single page instead of navigating to different pages.
To get an idea about custom states watch this video:
• Use the conditional tab not only for design but for complicated behaviors such as changing the text if the custom state is X. or hide this group and all its content and show another group with all its content if the custom state is Y. Show in a repeating group a different dynamic value if the custom state is Z, etc.
• Give a name to each object you create! Stick to a naming convention you prefer! Do not leave the default names that objects receive. It is very important for an organized and a systematic good practice. It helps a lot with workflows, when you need to tell the workflow the exact name of the element you need to use.
It comes in handy when the project grows and gets complicated.
• Use the “only when” option in the workflows to execute different actions from a single element.
Like with a button for example. A button click don’t have to always lead to the same result. You can define many workflows to a single element with various conditions – for example – if the user clicks on the button, and he didn’t choose a required field, you can create a workflow that will show an alert, or a certain button will lead an admin user to a different page than it will lead a regular user, etc.
• Give colors to your workflows and organize them in folders – it is very handy in complicated projects.
• Be aware of the search feature in the upper right corner in the editor – it is very helpful for finding elements and workflows when your app gets very complicated.
• Security – remember to define security settings and conditions with the workflow “when the page is loaded” – define few workflows like this with different conditions so if an unauthorized user mistakenly arrives to a page he is not allowed to be in, the system will throw him out, and such.
hide elements that unauthorized users shouldn’t see – it’s easier than to build a whole different page for each user type.
• My last and most important word of advice for you is to USE THE WONDERFUL BUBBLE FORUM! If you don’t know how to do something, or you think that the action you want to execute is impossible or maybe it’s a feature bubble doesn’t support, ask the forum – and very quickly you will get a surprisingly simple solution in most cases. In this way you will also learn and find how much bubble is powerful and even simple.
I will also mention the great bubble support team, who went out of their way and really and sincerely helped me many times – they are wonderful!
That’s it for now – congratulations if you survived all the way – I’ll be glad to answer questions for whom of you who are willing to dive into the great world of bubble!
