[Tip of the Week] Variable Button Colors

hello all!!

this week I wanted to share a useful feature that allows you to dynamically change colors of a button based on a Color Variable in your app, this allows you to build more advanced interfaces that are easier for users to use!! here’s how to do it.

the first thing you’ll need to do is create a Color Variable, in my example I called it Color Variable. optionally you can also add a default color:

following that, you’ll want to dynamically change the button color in a Trigger. I’ve done it when a button is pressed, but you can do it on any Trigger you’d like:


the last thing you’ll need to do is change the button color to be a Variable, and here you can pick the one that was just created:

is anyone using variable color buttons?? if so, share in a post how you’re using them!!

1 Like

Thanks for your share!

1 Like

no problem @mcc6025!!

Hi gio
Thank you for this post.
I am though looking for a way to have one button color on the button (disabled color) until all the mandatory fields are filled in and filled in correctly until it changes color to an enabled color.
I tried to use the 1 second trigger (not the best way but the only way I could see), so every second it checks everything, but since this is not possible to use anymore (this has been removed by Tulip), we do not have a way of changing the button color.
Having a disabled button color until all is correctly entered would really improve the user experience. I have tested it (before the 1 second trigger possibility was removed) and most user recognise the color change and realise that they can now proceed.
Is there another way to do this? Or do I need to put in a product suggestion?

TIA, Sara

hello @skgc, welcome to the Tulip Community and great to hear you found this post useful!!

there are specific features that can be enabled/disabled following a specific process, and I have mentioned this to your Account Executive who is aware of this request and will be following up.

in the meantime, I’d also suggest upvoting this topic: Trigger for when a variable changes as it helps achieve what you’d like from what I’m understanding.

once again, welcome to the Tulip Community - it would be great if you could introduce yourself at: Welcome to the Community, let's meet!!

what if you you want to change the color multiple times based upon each press? 1st press green, 2nd press red, 3rd press yellow and so on???

simply check:

if green, then red
else if red then yellow
else if yellow…

Or make it a table with an index and a color column, load the record, check the index in the record, count one up and select this color.

3 Likes

Thank you. I used the first method. How do I have the same color when the app is started again/ Completed?

also here the table would be the solution