Process arrow steps

Hi,

Is it possible to create arrow steps like below in bubble. For example using groups?

I have done this with the bubble editor. It is possible, but as a word of advise, in my experience has taught me to leave these kinds of UX enhancements for the end. Although it can technically be done, it is not as straightforward as one might like within the editor.

If you are looking to literally copy the 3-step example above and don’t need any of the special features of the bubble editor I’d suggest building this graphic outside bubble as 3 images and conditionally show them. I’d venture to say this would be the easiest approach in the end.

If you need to build this in bubble, there are a few intricacies that can take a bit to sort out.

If you are going to have a variable number of steps, or your steps are represented by items in the db, you can use a repeating group with conditional formatting for each cell. (You can also achieve the same with properly positioned groups and conditional formatting for each group). I’ve shown the repeating group example.

CloudApp

You can see because the repeating group has equal width cells (and no overlap), that your formatting must span across two cells. Current cell index and current cell index +1. Note: that there is a bit more area in step 3 that is outside the repeating group, which will get highlighted. To handle this you’d need to

(a) not do it or
(b) add another conditional group at the end to trigger when the last index in the RG has been set.

Additionally, how will you get the 45 degree arrows drawn in bubble? You can
(a) generate separate background images showing the portions of the arrow for each cell
(b) draw the arrow head and tail as shape objects in bubble and hide/show them. Option B is a bit of a pain to align and a bit of a hacky solution. I’m not confident on the pixel-perfect nature of this in every browser. and I can’t say I’d recommend it, but if you must: https://cl.ly/7def0f44d574/Image%202019-06-14%20at%205.55.09%20PM.png

1 Like

Thanks for this clear explanation. I will look into this.