Hey guys, how are you? I’m creating a data flow in my Bubble application, but I’m using the same workflow logic on two pages and they just don’t react the same way. Can you help me understand what’s going on?
On the Interior Architecture Composition page, there is this multidropdown:
In it you can choose which environments you want to design. According to the options you choose, a workflow opens a new card to detail its information, scrolls the screen to the card and also closes the card if there is no environment “tag” in the multidropdown.
The workflow logic was structured by clicking on the “select” button. With “open”, “scroll” and “hide” actions, with conditionals for each Workflow to happen according to the multidrodown tag. On screen 01 this logic works fine.
However, I went to replicate the same actions on a slightly more complex page that follows the same logic… Page 02 includes constructive architecture projects. In that case he can select things to build inside the house and outside the house.
This way, if you select “House” in the multidropdown, it opens a second Multidropdown to choose inside the house which would be the environments that he would like to focus on… (This part of the form using the same logic also works well) But in the external environments that are in the multidropdown that is appearing in the page load of the page does not work with the same workflow logic for some reason that I could not identify…
Select from Main Multidropdown:
Select from Multidropdown Home:
Holy Christ that’s a lot of Only when statements…
Have you used any conditional statements on the elements before? Or any custom states before?
If this works for your user experience, I recommend:
- Putting a custom state on the page, make it the same Option Set as the Multidropdown and make it a list.
- When they press the button do the action “Set state of an element” and set the page’s state to the Multidropdown’s value.
- For a given card under the Conditional tab, you would do "Only when
[your page]'s[custom state] contains [the relative option] and the property is
This element is visible and check “yes”
- Then go to the Layout tab and uncheck “This element is visible on page load” as well as “Collapse when hidden”
- Repeat this for each card, picking their relative option from your option set.
Then things are just automatically showing/hiding based on what shows up in your custom state. What is it scrolling to? Are there multiple cards on screen at once? If it’s only showing one I would think the user would already be looking at it when it is shown?
I would copy your workflow you have now then disable it, then nuke all those actions and try what I suggested IF what I decribed sounds like I’m understanding what you are trying to do
Oh man that looks like a nightmare of potential bugs with so many conditional actions.
It looks like you are trying to create a navigation system. The way I do it is here https://www.knowcode.tech/blog/creating-a-navigation-system-in-bubble There are many ways - do some searching for “Navigation in single page apps” - also plugins to help.
The question of the best way to do Navigation Systems is one of those questions that if you ask 10 Bubblers, you will get 10 answers and many them of them will be right.
I saw a tweet from @rico.trevisan with a clever way of using Optionsets https://twitter.com/RicoTrevisan/status/1602548402885099520
There are plenty of ways to do it - some people use URL parameters - which is fine also.
I’ve been pondering a nice way to do Forward and Back button functionality in a Single page app … but still pondering
Indeed, take a look at this video:
This topic was automatically closed after 14 days. New replies are no longer allowed.