Click Text Cell Change Color Using Custom State

No worries at all!! I know custom states can be really confusing! We’ll definitely get this working! :slight_smile:

For this custom state action:

My mistake, I didn’t realize that the custom state is set on the text element within the repeating group cell (“Text [center]…”). This is totally not intuitive and I’ve done the same thing many times, but the custom state needs to be set on the repeating group itself (or any element outside of the repeating group that you prefer), and not elements inside the repeating group. This is because elements and their custom states/values within repeating group cells are not accessible by other elements and workflows on the page. Setting the custom state on the repeating group fixes this.

I created a quick demo to try to make this seem less confusing! In this example, I have a repeating group which Does a Search for Foods:

Within that I added a Group to the first cell of the repeating group, which fills the height and width of the cell, and a text element which displays each Fruit’s name in that Group:

Group:

Text:

(The text is now saying 'Parent Group’s Food’s Name instead of Current cell’s Food’s Name because the text element is inside of a Group. However, it will all display the same data, since the Group’s data is the Current cell’s Food).

To change the custom state to be the Food that the User just clicked on, I added this ‘set state’ action when the Food Name Text Element is clicked:

First, we want to make sure the element we’re choosing is not inside of the repeating group, so I selected the RepeatingGroup of Foods as the Element:

Then, since no custom states are set, I clicked the custom state dropdown and created a new custom state to ‘store’ which Food was just clicked by the User. The name for the custom state can be anything you choose, but it should be of type Food (since the User is choosing between different Foods in the repeating group), and it should not be a list since the User can only choose one Fruit out of all of the options:

Creating the custom state:

The Value is going to be the single Food that the User just selected, so we’ll select Parent Group’s Food:

Then we can go back to the UI editor, and make sure the background color of the SelectedFood is different from the other Foods in the repeating group:

Through this method, the page will load and none of the Foods have been selected yet:

Then the User can click on one of the options, and it will turn blue:

Preview:

Editor:

That should work, but if you have any other requirements (i.e. the User needs to be able to ‘de-select’ the Food by clicking it again, feel free to let me know and I can adjust the demo for sure) :slight_smile:

3 Likes