I’m Kate, a product manager at Bubble focused on modernizing our editor interface. Last week, we rolled out a new Workflow tab experience in beta to improve your experience interacting with, managing, and building your app’s workflows.
With the new Workflow tab, you’ll more easily organize and navigate through your workflows. I’d like to walk through some of the new functionality you will see in this experience, as well as respond to some feedback we’ve already received.
The new workflow tab includes:
Improved organization with a new folder side panel
New search bar: At the top of the workflow list, you can search by workflow name or action name. See the results highlighted in yellow, making it easier to navigate to what you’re looking for.
You can add, edit, and delete workflow folders like before. You can always move workflows to new folders via drag and drop or via the right-click context menu.
Other features in the context menu include: rename workflow, add/view notes, cut/copy/paste, change color, disable workflow, and delete workflow.
View more about your workflows
Use of colors help you dynamically see which color label you have placed on a workflow (these are the same colors assigned to the “boxes” in the current UI). Use of icons help you dynamically see which event type triggers the workflow.
See how many actions and notes are associated with the workflow right under the workflow name. The number of notes is the total number of notes across the workflow, event, and all actions within the workflow.
More data about your workflow upon hover. As you hover your cursor over any workflow, you’ll immediately see more data about the workflow: event name, full conditional, and element preview (when applicable).
New Workflow canvas
The canvas is the first place you’ll notice that we’ve de-coupled the workflow name from the event name. Now, when you want to rename your workflow, you don’t lose context on what the event type was that triggered the workflow.
Interactions with actions are now smoother. Drag and drop workflow actions around the canvas and add new actions in between actions or at the end of the list
New minimap to show where you are in the list.
Navigating the workflow tab
The stacked-looking actions indicate that the action triggers another workflow. You can hover over this type of action to directly navigate to the event that gets triggered.
Viewing what workflows trigger the workflow you’re viewing just got easier. Click the “# trigger(s)” next to View Notes to navigate to any workflow that triggers your current workflow in one click.
Share, bookmark, and save your place with new URL paths for workflow. Now, you can directly navigate to exact workflows or workflow actions via URL.
What we’ve heard from you and what we’re doing about it
Since we launched we’ve seen your forum comments, tweets, feedback via the editor feedback form, and write-ins to our Success team. Thank you for the feedback! Here are some of the themes we’re working on addressing:
Alphabetically organizing the workflow folders to match current behavior
Resize folder side panel like in Elements tree
Organization of workflows by event type
See the full workflow at a glance
As we mentioned, this release is currently in beta. You can choose to opt into the new feature either through the banner on the Workflow tab or through Settings>Versions>Beta Features list. While in beta, you can navigate between the new and old experience.
Thank you to everyone who has already tried out the new UI and given feedback. We really appreciate hearing from you to make the experience best fit your needs - keep the feedback coming!
Love that you’re showcasing the feedback you’ve received that you’re already working on. Just what we want to see in a Beta. I’m already using this daily and it’s a huge improvement. Thanks to the team that built it, and to the PMs that prioritized this work!
Used this for a couple of days now. Four major challenges:
In our app we have approx ~200 Workflows per page (each page is like a mini SPA with various tabs and sections). In this new tree layout it’s become impossible to find a workflow or to browse and get an overview of what workflows exist on the page, at a glance.
Within a particular workflow with say 20 steps, it’s become very hard to get an at-a-glance view of what the workflow does. A lot of vertical scrolling is needed even though I’m using massive monitors, I’m not able to take in an entire workflow. The “line-wrap” or rather “action wrap” earlier showed all actions in a workflow together on one screen, that is very helpful to get a grip on what the many steps in a workflow are.
I’ve used folders to categorize workflows and find them in this new tree structure, but this is not always easy - do I categorize them by my apps feature, do I categorize them by type (Data Trigger), if there can be some auto-categorization that would be helpful.
Search was less than useful because many keywords are repeated in workflows. I abandoned my attempts to use the new tree and search to browse or find workflows and have begun to navigate by going back to the design view and clicking on the element and getting to the workflow from there.
To sum up, not sure if this is just resistance to change from my side, but the new Workflow Tab UI feels like a step backwards in many ways.
When you want to rename a workflow you are not able to select a certain part with the mouse, only clicking inside is possible. When you try to select more the whole workflow is moving.
Default view when opening the tab has the Uncategorized folder expanded and at the top. I find myself constantly collapsing this to get to my organized folders/workflows underneath. Can we:
Allow re-ordering of folders. I know you mentioned you’re going to sort them alphabetically but why not allow us to sort them ourselves? With alphabetically you’re just going to have people using a.1, a.2 etc to control reordering
Have Uncategorized collapsed and at the bottom of the folder list by default
Right-click anywhere for context menu (not just on an existing workflow)
The new view doesn’t show you which workflows are enabled/disabled.
Old design it is very clear:
New design (no indication as to which is disabled. You have to right click and then see that it is disabled):
This took me 20 min to figure out why the other event wasn’t running in step by step mode. Finally decided to turn off the beta and that’s when it was obvious.
I think the new design is good but these are the main three feature requests:
Show disabled workflows (as above)
Ability to search for actions (currently you can only filter the workflows that have those actions in them. In the previous version, the dropdown showed you workflows and actions)
Adding the delete button back in on both workflows and actions (i.e. not having to right click and then delete)
Thank you for the update. It feels strange at the moment as everything was quite more compressed before, so more information on the screen and faster work, but maybe we get used to this and better experience?
As reported above, the copy paste actions are not working well. Ctrl + C/V not working, right click copy/paste sometimes work but pasting a lot of times (sometimes 3, others 10, 20…).
Hey, @kate.mcnally, great work you and the team have done with the updates for our ease. But some challenges seem to be bugging me:
The workflow layout seems a bit intimidating, after using it for a few days it feels like horizontal workflow layout would have been better and it gets worse when the workflow count increases as already mentioned by others.
2… Do something about the issue viewer page name (see image) - make the page name slightly brighter - It can be a problem for people wearing glasses
Kindly bring back each item select (ctrl + mouse click on a text element or other) in the editor itself and editor sidebar
Minor peeve, @kate.mcnally. Any chance the folder contents can be indented in the sidebar?
To my eye, there are just too many icons of similar visual weight aligned vertically, which makes it more difficult than it needs to be to discern the hierarchy.
And if my argument doesn’t convince you, consider the fact that it’s inconsistent with the elements tree on the design tab, which gets it right. If one ignores the little disclosure triangles, the hierarchy should still be clear.
