Bubble Docs

Tips When Programming

As your app gets more complex, some pages may start having many workflows. A few tools have been added to Bubble's Workflow tab to help you organize your workflows.
Our Academy quick tip on how to color code your workflows

Keeping your workflows organized

It can be useful to organize your workflows in folders, for instance, navigation workflows, data operation workflows, etc. You can click on the arrow next to the Tabs bar to reveal the Folders View. You can see the different folders that you have created, or create new folders, or delete them.
Once a folder has been created, you can assign each workflow a folder. Clicking on a folder will show workflows in this folder. You can also assign a color to a workflow. The color of the workflow is purely visual, and does not have any impact on the execution of your workflows. It can be helpful to assign specific colors to some workflows to help organize your page.
Bubble generates automatic names for events and actions, but it can also be helpful to modify these names by clicking in the title bar of the Property Editor. Similarly to elements, naming workflows will prove to be useful in the long run.

Using shortcuts

You will find yourself going back and forth between the Design and the Workflow tabs as soon as your workflows rely on page elements. You can use the contextual menu (right click on an element or an event or action) and pick either 'Reveal workflow' or 'Reveal element'. This will highlight in the editor the workflow or the element that is linked to the element you're editing.
The button 'Start/edit workflow' in the Property Editor for some elements is another shortcut to be taken to the Workflow tab and see the workflows that are running when the user interacts with the current element. If no workflow exists, such a workflow will be created.