Selecting line items. Shape has a background colour on click

Need help
1

Hey guys! First off love the platform. You guys have done a great job so far.

I am looking to do something which i know should be pretty easy but i can’t figure it out. What i would like to do is when a shape/button is clicked the colour of the shapebutton will change to a different colour and remain that way until it is unclicked. I would also like it to trigger an event like a new window from popping up.

Very similar to how Bubble has done it in their editor within the ‘styles section’.

Pasted image1843×900 86.3 KB

Any help would be greatly appreciated! Keep up the good work :smile:

2

It seems like what you need is to set a condition on a button and use the state ‘this button is pressed’ (see https://bubble.io/reference#Elements.GeneralConcepts.States.is_pressed).

Have you done the lesson about conditions? that’s the best way to start.

3

Thanks for your quick reply. Yep i did do the lessons.

Right now when i click the button it changes colour, but only for the time that it’s clicked. What i was looking more so for is when the user clicks the button it remains a different colour until the user selects it again. So more like a boolean on/off flag

This is what i have so far:

Pasted image725×432 19.3 KB

4

Well to do this you can define a custom state and modify this state when the user clicks on something, etc. You can then use this state in the same way you use is pressed, for instance. See https://bubble.io/reference#Elements.GeneralConcepts.States.CustomStates and https://bubble.io/reference#Actions.SetCustomState

5

I guess i was just looking for a quick example. Might help others on the site as well.

6

I recently used this for filtering a map/list.

Firstly, you need to define the custom state on the button, when it is clicked (you probably have a workflow on the button to do “stuff” anyway, so just add this).

Pasted image523×535 19.7 KB

You want “Set State” on the Button. Then set up the custom state.

Set up a Yes/No state.

That gets you to here…

However, that doesn’t implement the toggle on and off… So you need to double up your Action, one for Yes one for No.

So modify the existing action to fire when the Button has already been selected.

And Copy/Paste and change to “No” to give you…

If the state is “Yes” set it to “No”. And Vice Versa.

Also, it might be an idea to set the state on “Page Load” to “No” which I have done above.

So the button will always be blank when the page first loads.

Then set up the Condition on the button…

And you are done.

Except…the button has some default conditions on hover, so you might want to add them on (so change colour on hover and selected).

Hope that helps :smile:

1 Like
7

Just wanted to point out that this did work. Thanks for the help!

1 Like