New WF editor tab: Share your pro tips

[fede.bubble]

Hi everyone

Since the Workflow tab update last week I noticed that a lot of you have little tips, tricks or just processes for working with the new UI. I thought it would be a good idea to have a thread to share all of them for everyone’s benefit.

Things like when compact mode is the most beneficial, pro tips on organizing folders, etc.
Share below and thanks in advance!

What are some of your favorite tricks when it comes to the new WF tab?

[austin3]

If you have a lot of workflows (or probably even if you don’t), expand the right panel all the way to the right as far as it will go, and set it to grid view. The workflow editor pane doesn’t need all that much space with the new vertical layout.

[emir.ozgun]

My pro tips for this transition period,

· If you have wf > 50 on a page, focus on design instead, don’t waste time due to delays and load time
· Don’t rename or put everything in the folders or over use reusables those features are optional and here to improve productivity not to limit you
· Give your feedback don’t get gaslighted by some people here

[lindsay_knowcode]

Folders folders folders

[Sarah_Esteve]

Renaming renaming renaming

[TipLister]

instead of using folders name workflows alphanumerically
eg 001 a. 001b 0001c for all payment workflows; 002a 002b 002c for all ones filling out forms.

[clementine.grosset]

Here are my tips for using the new workflow editor more efficiently:

1.Use color coding to visually organize your workflows.

I personally stick to three colors to keep things clear (other workflows remain with no color):
Green for saving or updating data
Orange for custom events or “do once” workflows
Red for deleting data
This makes it much easier to scan and understand complex flows at a glance.

2.Avoid overcrowding a single page with too many workflows.

To keep things tidy, I use reusable elements as often as possible, even when I don’t reuse them in the UI.
For example, turning a section of your page into a reusable element will keep its workflows separate.

3.Assign folders to your workflows as you build.

If you’re using folders, it’s much simpler to organize them progressively rather than sorting everything at the end.

4.Name your workflows clearly and consistently.

This makes searching (with the new search function!) and navigating yours workflows much easier, especially as your app grows.

5.Save time using the new trigger button.

You can check how many times and where a specific workflow is triggered.

6.Group related actions into custom events.

Instead of creating long workflows, break them into smaller chunks using custom events. It improves readability and lets you reuse logic when needed.

[J805]

Use emojis to organize and rename workflows so you can quickly find them. Like these etc. This helps me see what parts are connected to what.

[valerijs.melikovs]

Adapt and no cry

[NexradJosh]

Emoji naming is an awesome Bubble hack. I use that in Data Type names and Field names all the time.

[NexradJosh]

Pro Tip: make sure the property editor isn’t covering up the Triggers menu. That is one of the best features of the new editor and it can be out of sight on page load:

That tells you everywhere that triggers the selected API endpoint or Custom Event, similar to if you did a search for “Schedule API workflow…” but it’s way quicker.

[randomanon]

You stole my pro tip. Not cool, dude.

[ademiguel]

• Check the Show conditions option so conditionals are shown under the workflow name, rather than the number of actions
  

  

• Install the Codeless Love Powerup Chrome extension for allowing the whole folder name to be clickable, rather than the small arrow only.

[ademiguel]

Maybe not appliacable to everyone, but also:

• Give value to the Triggers section, with info about places where this workflow is triggered. Underrated but extremely useful.
• Setting the view to Compact will make the actions occupy more space, allowing conditionals to also expand. Better read of conditionals + better use of screen space.

[guillaume.raballand]

Hi, thanks for this useful thread!
My setup and tips after 1 week using this new workflow editor :

• Show conditions in left tab
• Extend left tab to show 2 columns to see enough workflows at the same time
• Hover the workflows to see all conditions in left tab
• Use compact mode to show 3x more actions at the same time (e.g. 20 actions instead of 7 on my screen)
• Keep enough space to show all actions and the floating tab to edit workflow and actions on the right of my screen
• Use folders and explicit names to organize folders, workflows and actions (I still need to work on it)
• Use search input next to the dropdown to select a page : write the keywords you’re looking for to find quickly a specific workflow or action, so useful after renaming them !
• Open workflow editor in 2 tabs at the same time to easily Copy and Paste : as soon as you can, duplicate workflows, copy and paste actions before modifying them to save time instead of creating everything from scratch, and keep an eye on the original action in one tab/screen while working on the new one you’re editing in another tab/screen
• Use custom events with specific conditions to create the “branching” if/then/else logic inside a workflow
• Use shortcuts : “Go to API event/custom event” when actions trigger other API workflows or custom events and the triggers referenced at the top of the editor
• => Extra tip : actions triggering an API event or custom event are designed as a stack of rectangles instead of a simple rectangle, not obvious at first sight but can be useful to identify them in complex worflows with a lot of actions

Thank you all for sharing your development hacks to improve your productivity with this new workflow editor
I hope this list can help you too!

[peterfwriter]

Color for navigation:
I’ve got a randomly picked color (cyan-usually) that I use for navigation only.
If something is coloured cyan - it means I’ll either have to finish, double check or reference it for something I’m going to do next. If the job is finished, I’ll turn color accordingly.

Category view:
Also: I tend to fall in love with the category view. I use it more often than folder view for sure. If you haven’t used it yet, definitely give it a try.

Conditions:
Just as many of you’ve pointed it out, defo check the “Show Conditions” for easier navigation. I think it should be on by default.

[pyli]

this is how i use it, it’s awesome