[SOLVED] Change text color on button click

Hi @ulrich_00132 :slight_smile: Here is a step-by-step:

Preview:

Editor:

In this example, there is a blue “Add” button:

In order to make sure the User only clicks the button one time, and the button turns grey after one click, we need to create and set a custom state (as @hikaru did) :slight_smile: There are a few different ways to set up a custom state, but I find the easiest one is to click on the button element to open the property editor, and then select the “i” icon in the top right corner to open the “Element Inspector”:

This Element Inspector will list all of the element’s custom states, and any workflow events that involve the element. In order to setup our custom state, we can click “Add a new custom state”:

Which brings up this popup:

Custom states are a bit confusing to explain, and sort of make more sense the more you set them up! :slight_smile: Custom states can be used for many different reasons (e.g., keeping track of when a button has been clicked, temporarily storing a list of Products that a User has selected, temporarily storing a specific preference, and more). Unlike your app’s data which is stored “server-side”, custom states are stored “locally” for each User, meaning - once the User refreshes the page or changes pages, the custom states all get refreshed as well. In this example, since we only need to know whether the User has clicked a button, or if the User hasn’t yet clicked the button, we can set up a “yes/no” custom state called “Clicked?”:

After saving that we can set the default value of the custom state to be “no” (or “false”) since when the page is first loaded, the User has not yet clicked the button.

Because we’ve set up this custom state, we can change it from “no”(false) to “yes” (true) in a workflow when the Add button is clicked. To do this, we can set up a workflow:

“When Button Add is clicked, *only when Button Add’s “Clicked?” custom state is no” → Set the Button Add’s “Clicked?” custom state to “yes”. This makes sure that this workflow only occurs when the User is clicking the button for the first time:

Element Actions → Set State:

Set State action:

This workflow successfully changes the button’s custom state, but in order to change it to grey as well, we need to add a conditional which changes the button’s color to grey when its “Clicked?” custom state value is “yes”:

You can see it in action here!
button_gif

And that should work! :slight_smile: Feel free to let me know if I can clarify anything or if you have any questions!

10 Likes