Inverting icon to show selection in a repeating group

stephanegroud · 2025-01-16T15:11:30.510Z

Hello.

I have a navigation bar between different sections of my app, made of icons that are shown in a repeating group. These icons are stored in the database within each section data. When clicking on a given icon, I set the state to a value and show the required group. I also want to change the icon (invert colors) to allow users to understand in which section they are. How can I do this? I thought about creating an additional image field against each section in the database with the inverted icon image and swap it for the selected section but it doesn’t work as part of a repeating group. Should I ditch the repeating group and hardcode the sections in the app (not ideal if I add more)?

Thanks,

Stephane

geesonofgee · 2025-01-16T16:58:06.179Z

Am not sure if I understand this fully but, you should be able to condition the icon and the group to your specification based on the icon selected by the user…

maybe you should attach some screenshot, that will foster the understanding

mitchbaylis · 2025-01-16T23:27:03.347Z

if the icon is a built in icon from bubble you can use a condition to change the icons color on hover or if active

if it is a manual icon you can either set it up as an option set (use svg files) or a reuseable element and add params to adjust the color properties. or if it is an image then a reuseable element that switches the image based on property would also work (although svg would be best).

there are also animated icons available from sources like lordicon
you can make them animate on hover for example

stephanegroud · 2025-01-22T17:25:18.725Z

Hello and thank you both. I only saw your replies today. Apologies for the late message.

Below is a screenshot to help understand. Depending on which icon is clicked, I display a specific group. This is working well.

But I don’t know how to only modify the one icon that has been clicked. I use google icons that I have stored in an option set with one entry for each section. I tried having two versions of the icon per entry to use one or the other but this doesn’t work as it replaces the entire set by one icon only. Not sure what to do. Thanks again for your time
Screenshot 2025-01-22 at 18.24.28

stephanegroud · 2025-01-23T08:19:04.714Z

I think the issue I need help with is how to only change one of the 7 icons at a time as they are part of a repeating group. If I use a condition, it tends to replace the entire row with just one new icon.

stephanegroud · 2025-01-23T08:31:10.438Z

Found the solution. My condition was not formatted properly and it replaced the entire row. Now it works by replacing just the right icon