Is there a way to annotate workflows?

First time forum participant and I’ve been on bubble for 14 months now.

I’m noticing how easy it is to lose track of the logic in complex workflows when I focus on other parts, and after some time I return to a workflow to apply tweaks of fix bugs. The time to re-familiarize with the steps in a complex workflow is getting costly, not to mentioning introducing the risk of more bugs.

I’m curious if there is a way to annotate workflows within bubble with a sentence or two (like commented code) that could describe workflows, flag some risks, or explain why I decided to do it that way vs. another way (as a reminder and to orient new developers). I use the color coding quite a bit, and feel the annotation could tie into that somehow.

Is annotation already possible with a plugin, or hidden within the existing functionality,
or do folks have tricks they’d love to share?

Thank you all so much!

PS: super proud to be a bubbler. As a founder who lost his CTO and had to rebuild from scratch, bubble saved me and my startup.

2 Likes

There is a way to do this, yes. Look for the speech bubble icon in the Property Editor (no pun intended). Clicking on it will reveal a panel on the right to have some notes :slight_smile:

Screenshot 2023-08-29 at 15.54.24

7 Likes

Oh my god it’s him

13 Likes

Wow Emmanuel - I was looking on the face/cover of the property editor, didn’t click inside to see this, obviously staring back at me. I feel so silly for not seeing this before!

Thanks so much for the help and the quick response!

:rofl: :rofl: :rofl: :rofl:

OUT OF NOWHERE

2 Likes

I’ll be impressed when I see him on an editor bug topic :joy:

3 Likes

:upside_down_face: The matrix just glitched weirdly.

#EditorBugTopic {
display: none;
}

In addition to adding comments as suggested. Our approach to keeping things in order is to label workflows accordingly, so instead of something like WHEN Icon fa-fa-bars is clicked, we label it to what it does WHEN Popup Users is clicked.
image
image

We also group all functionality into folders and then colour code them accordingly. One of our pages has over 70 workflow actions and you can pretty quickly lose your mind over what goes where.

Here is screen shot of folders, labels and colours in action:

Hope it helps.

2 Likes

I think we need some optimizations in the visual identification of some things related to WFs.

Using the labels approach helps a lot, but it has a downside as well that if we want to know what is the element or conditionals associated with that workflow, we will need to click on the WF and investigate.

Maybe if the labels were shown differently, like a small tooltip (always visible), something that would allow us to see both (the original description and the label) at the same time, it would help a lot.

The comments too, we should be able to know visually that a WF or even its steps have notes and comments, some icon (always visible) that indicates that there is a comment, without having to click on the WF or Step.

About colors, I also use them and they help a lot in visual identification. I created my own methodology for assigning colors, but I still think we could have a few more colors or variations of the existing ones, perhaps more shades of green (one darker, the other lighter) and so on for all the others.

I also always use folders, it helps a lot to organize WFs, especially very complex pages.

1 Like

I second this.

Grouping and color coding helps a lot - changing the labels is something I wasn’t doing - this is brilliant thank you!

I group workflows into folders. It is a must. Then for complex workflow group, I add number as prefix to the workflow name so I can see how the workflows are related to each other.

1

2 Likes