Create a RG that allows users to select/unselect tags

I’ve been tinkering away and can’t seem to figure this out. Would appreciate any valuable help.

I would like users to add/remove tags which would add them to there “interests”. I would like the tag to change colour once the user has clicked it and later once the save button is clicked, it adds the selected tag in the users list of interests.

Currently I have two data types. User & Interests. In the User data type I have added a field called “selected interests” which is mapped to “interests” data type and is a list. In the Interests data type I have added both the interest name and category as I am going to be categorising the tags later on.

Currently on the page I have a RG with the following settings:


And I have a text element inside the RG with my preferred styling:

At first I tried adding custom states but I don’t think I’ve done it correctly as each time I selected a tag the colour would not change to the selected state styling I made.

I understand Bubble but I’m definitely not a pro so would be greatly appreciated if someone could help figure out what I’m doing wrong.

Thanks

Hello @thealbertodelrey

  • Based on what the post describes what is deemed a tag is actually a category in the dB. If I understand things correctly.
  • On click you want a change in styling and is not working.

Normally I see the following UX. A user sees a list of tags, clicks on one or more where he/she sees them added or styled to indicate that they were selected. And later a button is clicked that does actually place all of these tags somewhere else. Question: Would this be close to the UX that you would want to achieve?

Yes. Correct. Just like the example in the image I’ve attached. The user would choose the interests they want, click update which would then save them in the users “selected interests” list

1 Like

What is an interest in the context of the UX of the app?

A user can add these so it displays on their profiles to other users. Similar to how Tinder lets you pick interests and it’s displayed on your profile.

I see. So … the updateButton on your screenshot updates the selected tags into a userInterestDataType?

You can do these in two ways.

  1. In the first way, the repeating group can directly show the interests of the current user and you can set workflows/conditionals etc to display them in repeating group live. See the demo below:
    interests-live

It has the same structure as your DB. The repeating group just changes color if the current cell’s interest is in the current user’s interest:

And here are the workflow when clicked on these interests:


image

  1. The second way is to keep a list of interests as a custom state somewhere. I kept them in the page. Basically, in the first repeating group, I show all interests and whenever they are clicked, I add them to the page custom state. Another repeating group just shows the interests in the page custom state. Finally, you can set these page custom state interests to the current user if you want. See demo below:
    interests-live2

The left repeating group (technically the middle one) has all interests:

When they are clicked, current cell’s interest is added to the page custom state:

And the right-most repeating group just shows the interests in the page custom state (here Interest2 is the name of the page):

Then, when the button is clicked:
image

It takes the page custom state’s list and updates the user’s interest:


image

I hope that helps.

You can see the page yourself in this sample app: Tests for Forum 3 | Bubble Editor

1 Like

@hergin rocks!

There are other ways to do this of course.

Going for performance and lower cost … then creating a tag system via texts-only is the way to go. A bit trickier though :smiling_face:

And … if you just go for Bubble handling this for you … consider using the multiselect dropdown element (available as a plugin but it is a Bubble made plugin). Your UI looks nicer though :wink:

Correct

Is this image from your app? If so, how did you figure the layout? If not, do you have a plan how to design it like this? I guess I have tried yesterday to design a repeating group like this, but no luck.

This is from my design. But I have configured the RG so that they display this way too. These are my settings for the RG:


Note: the 39px min height is mostly to maintain the height of the tag itself.

Then I added a text element and styled it and added the following:

I see what you’ve done here. I don’t know if I’ve understood you correctly, but I’m struggling to have the tag that has been clicked transition to a clicked state (the background colour changing etc) to show the user they have selected it. I don’t want to have two RG with one that has a list of the interests and another that has the selected interests.

I want the user to make the selections then and there and once they hit Update those selected interests will be added to the User data type in the “selected interests” list field.

I am mostly stuck with how to make the tag/interest change colour on click. There is conditional styling for pressed states etc but I guess I don’t know much about Bubble.

Pressed state is actually just checking if the current cell’s interest is contained in something or not. If it is contained, change colors etc.

But this only transitions for that split second. Once I lift my thumb off the tag the button returns to it’s default state. It’s not staying selected. Then I want to also be able to unselect it as well.

This setting worked like a charm for any future bubblers reading this. Each oval box here is a repeating group cell. I didn’t know if RG can be formatted like this. Thanks @thealbertodelrey

1 Like

Ok! Tested this out and this is the best way! Worked perfectly!