Change a button color to different colors every time it is clicked on

Hello!
Is there a way to add more than just two parameters to a formula to change button colors? I’m working on a quiz app and I want to change a button color from its original color to another one when clicked on and then go back to the original color if the user taps on the button again ?
P.S. I can successfully work with buttons that use an IF formula. The only problem is, the button won’t go back to its original color if clicked on again.
Help please!!!

probs easier to have multiple buttons with visible false and then run a flow with hide and show components :slight_smile:

Select that button go to Styles and select background, click on local pallete and choose formula.

You can make your own formula to change background based on PageVars, AppVars or whatever.

In example: {“VALUE1”: “#D3F1FC”, “VALUE2”: “#D3F1FC”, “VALUE3”: “#D3F1FC”}[PageVars.Prop1]

Much easier than fiddling around with several instances of one button.

2 Likes

Thanks for your reply. Could you please help me with the entire formula. What’s shown in the picture is not enough for my noobie brain to process. Thanks in advance!!!

This was the entire formula from that screen. It checks PageVars.Prop1 and based on its value it sets the color of the background. If the value is literally “VALUE1” then the color is set to #D3F1FC, etc.

1 Like

What kind of variable value do you use? Text, Number, color, True/false? I don’t know which type of variable I’m supposed to use for your formula to work. Thank you for your help!

PageVars.CLICKED2 should be text because it has to match one of your keys in your “color array” which uses text keys.

The other errors in your formula are just copy paste issues, like different “” characters and closing bracket is ] not }.

1 Like

Thanks again for your help. Here’s my progress:
I managed to fix the formula with your help…


Problem now is that when I click on Convert, it creates a new style called Tertiary button and it I get the following warning…


The container had a white background on the text section and I changed it to transparent but I still get that error and the button won’t show the first color (blue); instead, it shows me a black button.

Can you please help me with this error. What should I do?
Again, thank you for your patience and help. I really appreciate it!

The red text is more of an FYI stuff rather then error. Your app will work just fine. It just tells you that color assignment won’t be automatic but fixed based on your formula.

Regarding the button color. Are you sure your pageVars.CLICKED2 value is one of VALUE1 or VALUE2 or VALUE3?

I’m assuming you set the pageVar.CLICKED2 in Button.ComponentTap event.

image

image

If you want to switch BG on click between red and blue, you can use bool variable with the following formula.

{“true”: “blue”, “false”: “red”}[STRING(pageVars.clicked2)]

1 Like

Hey sorry I took this long to thank you for your help. No matter what I do, I can’t seem to make this thing work like you do. The formula with the values is properly inserted in the formula box…

However, as soon as I click on submit and convert, the button will turn black no matter what.

You told me this about the black button problem…

This is what I did…

The initial value you can see in the picture is the first value in the formula: #0010CF. However, the button will still go black and when I try it, nothing happens, no changing colors.

You also told me this:

This is what I got:

I honestly feel frustrated cuz I don’t know what I am doing wrong. I’m thinking on using the bool formula you suggested:

Would you please be kind to tell me how to do it? What kind of variable do I need? Text, True/False? Do I have to use the formula in the button style? Please help a poor and desperate soul!
Thanks in advance!!!

Hi Jorge,

based on your input you have to do the following.

Use this formula for background: {"BLUE": "#0000FF", "RED": "#FF0000", "WHITE": "#FFFFFF"}[pageVars.CLICKED2TEXT]

You can then use CLICKED2TEXT (text) pageVar with initial value “RED” and change its value to “BLUE” or “WHITE”. Please adjust the keys and values according to your app needs.

Hello again,
First off, Thanks for your help.
Here’s my progress…


With that doemula and the initial value set to green (second color)

The button is not black anymore…

However, when I click on it, nothing happens if I insert the following formula in the variable settings of the tap component…
image

When I try the button, nothing happens. However, when I use an exclamation mark before the formula, the button changes from green to black when clicking on it…
image

Is there solmething else I should change or modify on the page variable section?
image
Maybe add something else other than just one initial value?

Thanks in advance for any and all help you can provide!!!

When you click on the button your function flow should be like this:

Set pageVar.CLICKED2 to “BLUE”.

image