Creating a progress status

From the picture attached, I’m trying to turn those three groups into something like a progress status. When you’re on the professional page then the color should be blue. But I tried using my parameters and conditionals it won’t work. Please I’ll appreciate if anyone can point MR to the right thing.

You should talk more about the group structure if you need help. Are these just showing/hiding groups underneath them? What is progress status? Or you want just the active group’s name to be highlighted blue.

I just need the active group giggled in blue just to serve as way to let the user know he’s currently on the particular page. Same for the other two

Just add a custom state called Active Tab Name of type text somewhere on the page (even the page itself is fine) and update this custom state whenever these buttons are clicked (if they are buttons or whenever you display these groups if there is no button but something else). Then, in conditionals of these, check if the Active Tab Name is the same as the button’s (or textfield’s) name (such as 1 Professional Details). If so, change background color.

See this example. There are many ways. This is just one. This is bubble built-in stuff and at the core of it anyways:

Thank you, I’ll try this now. I’ll give you a feedback soon

From this your video I see you perfectly understand my question. But I’m still a little bit confused because those are not buttons. They’re just text groups. So how do I apply the custom states I created.

The examples I put are text fields too. Please check the editor to see the details: Tests for Forum 8 | Bubble Editor

The page itself has a custom state:

Clicking on the text changes this custom state:

And conditionally, the text changes its background:

1 Like

Depending on how static you want these tabs to be, also consider using URL parameters as states of your tabs.
That way the selected tab is remembered even when the user refreshes the page because it gets stored in the URL - so you can even share a link where a certain tab is open by default.

1 Like

the reason it didn’t work how you had it setup, assuming everything was setup properly, is that you were using a URL path, which in your screen shot is professional_detailsand in your conditionals you were probably attempting to match it against Professional Detailswhich would not match. Another potential issue is that you were using an option set as the values, and when using a URL path, Bubble does not automatically URL decode URL path list items, so it is needing to be matched against a conditional that uses a URL encoded value, so it is just a big headache because Bubble has not done the same thing they did with URL parameters, which is to automatically URL decode parameters.

I don’t know why they can not apply the same logic to URL path as URL parameters, and I’ve requested several times over the past several years for them to do it as it would make working with URL paths so much easier and open up so many functionalities.

1 Like

I finally did. Took me several hours. I paid attention to your correction regarding the naming of the url parameters and it worked. Thank you

1 Like