I’m currently using a Custom State to permanently change the background color of a Text Cell (from: White To: Green) within a Repeating Group when that Text Cell is Clicked on. This Repeating group holds different email addresses and where I am getting stuck is having the Clicked “Text Current Cell” revert back to original background color (White) once another Text Cell within the Repeating Group is Clicked on? My goal is to only have the most recently Clicked Text Cell change and stay Green until the next Text Cell is Clicked.
Hi @bwvemma, you can achieve this with the following:
When text is clicked > set state > label = selected, type = data Thing that your repeating group is (e.g. if the RG type is User, then make the custom state type User), value = current cell’s User.
I’m assuming you have a shape in the cell to change color per cell. Have a condition on that shape: when custom state’s selected is current cell’s thing > change color to green. By default, this shape is white or no color.
This means every time a different text gets clicked, the custom state changes, so only 1 shape can be changed at a time.
This doesn’t work for me.
When text Animal is clicked, set State Selected (label = Selected, data type = Animal), value = Current Cell’s Animal.
Neither of these work:
When text Animal’s Selected is Current Animal, change background color to blue (changes all Animals in repeating group to blue when clicked)
When text Animal’s Selected is Current Animal, show Selected icon (can’t work because when icon is inside current cell, it does not show as an option in a Clear button’s drop down)
I’m expecting that when I click on one cell in the repeating group it changes to blue, when I click on another cell in the repeating group, it changes to blue and the other cell goes back to white. I can then send the ‘selected’ cell text to another group.
i give the 2 repeating groups a state of not clickable after clicking to force user to only select one item.
however even without setting the repeating group state, I can’t get a color change to appear on one cell and disappear on the other and the clear button is unable to set a state on the text.
Custom states can either be a list of values or a single value. You have the custom state correctly set up as a single value (since you only want the User to select one Animal). In situations where one Animal is clicked, and the User changes their mind to select a different animal, the value of the custom state is ‘set’ only to the new animal (without needing to make the other selections not-clickable).
In your example, there are also two different custom states set on the text inside of the two repeating groups with the same name “Selected” (type: Animal, list: no):
Since you have two repeating groups (one for snakes and one for birds), you can’t access the “Current cell’s snake text element” custom state when “Current cell’s bird text element” is clicked, and vice versa. For example:
When Current cell’s snake text is clicked, the “Selected” state on ‘Text Current cell’s Snake’ is set:
Argh. Thanks Faye. I’ve been stubbornly trying to work this out for 3 weeks! I never ever would have guessed that this was the solution. I was thinking to myself “Why do I have to create the exact same state for every element, why isn’t it available from the drop down!”
So to summarise for other people looking at this solution:
“If you want a State to be accessible by/have an influence on, other elements in the page or in a group, set the state on the page or on the group, not on the element”
There’s probably a better way of wording it.
Seems so obvious now. I think this single piece of understanding will widely open up what I can do in the app now!
No problem at all! I’m pretty sure I learned that the hard way as well. I usually just create/set all custom states on the page (unless it’s a button which becomes unclickable) so it’s easier to keep track of them all. The only downside to setting them on the page is if you move the elements whose workflows set the custom state on the page, from one page to another, you have to recreate the custom state. Setting the state on the RG itself or a group won’t cause that issue.
Thanks all for the above thread. I am also new and still having trouble. Can you please help?
I have a list of things that are displayed in a repeating group (food items the user can select).
I want to highlight the specific food the user has selected when they click on it. Based on the above thread, it seems like I should set a custom state on the page or repeating group to “Selected” per Gaby’s note. But then she asks to set the type to selected thing. In my definition of state, I am not able to see the type as an option.
All I want to do is:
If user is shown option:
Protein: Eggs , Yogurt, Tofu
They select one example eggs by clicking on it. I want to 1) highlight the selected cell so they can see what they picked and 2) capture the selection for later use
Hi @shubha.chakravarthy What is the ‘Label’ custom state’s type? I’m assuming the repeating group is of Type Food and is doing a search for Foods or displaying a list of Foods? Since you’d like a User to only select a single Food from the list of Foods, the custom state set up could be:
And the ‘set state’ action value would be:
Value: Current cell’s Food
Then place the text element which displays the Current cell’s Food’s Name inside a group. Add a conditional formatting statement to that Group which is:
“When RepeatingGroupFood’sSelectedFood is Current cell’s Food” --> Background color: [your highlight color].
That should work! But feel free to let me know if you need any help setting this up!
The background color did not work for me as it kept showing only gray regardless of the color code i used for the color i wanted it to change to
A separate problem I have not yet figured out is right now I cannot unselect a box. It could also do this by automatically unselecting other boxes in the same row if another one is selected. That is next on my list
No worries at all!! I know custom states can be really confusing! We’ll definitely get this working!
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:
(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:
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:
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)
Hello @fayewatson, thank you so much for this incredibly detailed walk through. I am able to follow all the steps until the set state. So when I try to set the custom state of the element “Parent group’s food” I am not seeing that option when I click outside of the element. Perhaps I set up something wrong. Sorry to be slow (just signed up for udemy class too ) . Here is the screenshot:
it is not giving me the design workflow option. I independently figured out that you have to set the group’s parent as the repeating group which I didn’t realize from reading your instructions, hope that was correct. Any help hugely appreciated, thank you so much!!
@shubha.chakravarthy No problem at all! The ‘set state’ action occurs when the text inside of the repeating group is clicked, not when the repeating group is clicked.
Once you have the event “When [Text element in the cell] is clicked”, go to Element Actions --> set state. The ‘set state’ action in the workflow tab then asks which element to set the custom state on, and the element to select there is the repeating group. The workflow is:
When [Text Inside Cell] is clicked -->
Element Actions —> set state
Set State Action:
Element: Repeating Group of Foods
Custom State: SelectedFood (needs to be created)
Value: Parent Group’s Food
My apologies, I am on mobile at the moment but if you look in the example editor that I linked the workflow occurs for the text inside of the cell, and the custom state in the set state action is set on the element: Repeating Group of Food
@fayewatson, thank you again for the prompt response. I was getting really confused (because I am so new). So I read over your other earlier reply where you said to set the state of any element other than the text. So I tried a new tactic as this group inside the repeating group was throwing me for a loop: I set custom state of Repeating Group’s SelectedFood to Current Cell’s Food’s name and UI conditional formatting as follows:
If repeatinggroup’s selectedfood is current food’s name then display the conditional formatting. It looked like that’s what you may have suggested but it’s not working.
The challenge I had with the group name was figuring out how to populate the other 3 rows (same concept different macronutrients, e.g. carbs, fiber etc). Sorry for being slow!
Thank you very much @fayewatson! Your post is an incredible resource foor Bubble newbies! Now my only challenge is to edit some of this logic so that my end users can select multiple values (i.e. “this state is a list”) and filter the results accordingly
Can you share a link to the editor?
In your app, I created a new page called “example2” so you can compare.
) . Here is the screenshot: