Friends,
I’m building a niche campaign builder that will allow users to create action/logic trees similar to Zapier, MailChimp, etc. Essentially users can create “Steps” in a marketing campaign and those Steps will run sequentially.
How can I get different logic branches to visually align?
As you can imagine, visually showing a specific logic path is easy. There’s a Repeating Group showing “Steps” for a specific “Experience” vertically.
The issue is aligning multiple logic paths in a way that visually makes sense.
To accomplish it - somewhat - I have a Repeating Group inside of a Repeating Group. The first Repeating Group is generating a vertical list of all the “Steps” of a campaign grouped by the “Step’s Number”. (These are just sequential numbers that can overlap as they represent the sequential order of actions that can be taken). The second Repeating Group is creating a horizontal list of the Steps that share the same Step Number, but have different Path ID’s.
This method creates all sorts of funky visual goofiness, like the screenshot below.
Undoubtedly, users are going to ask themselves “what path is this associated with?”
Of course, I’ll be drawing lines between each step… but I really want the paths to align in a sensible manner.
How can this be achieved?
(ChatGPT gave me a bunch of suggestions that I tried. I’m willing to share incase maybe someone just needs to tweak the code it was trying to give me).
Instead it appears as shown in my second screenshot on my original post.
I’ve tried using the X and Y coordinates from drag and drop groups, Creating different repeating groups within other repeating groups, and a few other strategies and I just can’t get the little nodes to align in a logical way.
Seemed like an interesting challenge @Tyler1 , had a bit of fun trying to build this out in Bubble.
Here’s an example going 3 levels deep with some basic UI:
Basically you’ll need a 3 level repeating group:
1- vertical scroll (list of ‘splits’)
2- horizontal scroll (list of possible branches)
3- vertical scroll (list of items within a branch)
The biggest challenge will be the data model, JSON might be better suited for this use case.
But @GH5T link looks promising, will definitely keep that in mind for future.
React Flow looks awesome! Do you have any resources or examples readily available with using it in Bubble?
Thank you so much for the suggestion!
@DjackLowCode, I love the implementation here! Thanks for putting that effort in. If I understand correctly, this would limit to three paths deep - is that correct? I may go this route temporarily as I figure out a less constrained option.
Now I’m thinking of it you should be able to do it within a repeating group within a repeating group (a graph)
It just might take some complex maths to assign the connection between tasks.
I’m going to do just this in the next couple of days.
You can make it as many paths deep as you’d like, it’s just a matter of getting the UX to work correctly (e.g showing parts of the tree / the whole tree).
