How do I create a tagging system?

My goal is to allow a user to select multiple tags from a list of existing tags in the database.
I had trouble figuring out how to create a new tag if one wasn’t already in the list.

Attempt 1 - Using Multidropdown plugin - Trying to something similar to example 2 in this video. I have it set to start roughly where I started working from. Also, there way you build the expression has updated, there is a place where it seems you now will choose “every items field” instead of “field” as it is shown in video. There is several places where this pops up.

The trick here is that it is suggested to set the type of choices to text, which lets you enable the option to add new items. I had this working except I couldn’t figure out how to bind the list back to items and properly update the database (due to the text field setting but if you chose my data type, it would hide the create new item option). If that works that would be everything I needed to do. Just map the input text to the correct field and it would be good to go.

Attempt 2 - Using the search element. There is a place where is says you can allow entries not in the list while typing. I think this would be how I could create a new item, but I can’t quite figure out how to code it. I am close, I have a when element is changed workflow that adds the tag to the item that we are editing. I just can’t get the new item creation working in this model.

Hoping to get some feedback on a better way to approach this : )

Edit: I have a basic version of this working but I am not making it work through the Tag datatype. I modified the datatype Post with a tag field defined as a list of texts. The tags are currently stored in the post type they are tagging as item1,item2,item3. I am not sure how flexible this approach will be, as I want to use some type of autocomplete fields to encourage tag reuse across the platform. I have not figured out how to approach that yet.

You would definitely want a Tag data type with some fields like Name, (maybe a color hex value?). For your Post data type add a field with the type Tag and make it a list.

For your user experience do you want them to search for a tag, or pick from a list? Or pick from a list or search? If it needs to make a tag that hasn’t existed before would you want it to just auto-create it from the input box?

1 Like

Maybe the announcement below might help?

1 Like

This will be helpful for displaying the tags but I think he needs the actual set up of searching, creating them

We did it like this, lots of ways to do it though.

Edit tags on contact button:

Spawns add/edit tags modal:

Display list of tags on contact:
Screenshot 2022-09-23 at 2.52.24 PM

Tags database structure:

Contacts have a list of tags:
Screenshot 2022-09-23 at 2.53.12 PM

1 Like

Do you have any protection so the Add only shows up when the search result is 0? To avoid users forcing duplicates?

Yes we do. We minus out the list of tags already added to the contact which leaves us just with the list of tags that haven’t been previously assigned.

Screenshot 2022-09-23 at 3.05.58 PM

3 Likes

You would definitely want a Tag data type with some fields like Name, (maybe a color hex value?).

For your Post data type add a field with the type Tag and make it a list.
This is exactly how I have the database structured which I was referencing in attempt 1 & 2. Only the current approach ditched that to get something working for a demo. Now that time has passed, I want to finalize my solution here.

For your user experience do you want them to search for a tag, or pick from a list?

The multiselect dropdown method has a better UX example than how the searchbox dropdown works. Either would be functional as long as I solve the issue I am having with new tag creation somehow blended into that display.

I have seen some where when the user hits # it pulls up a list of tag ( it actually did something similar to that just now in the when I typed that symbol in ) #
Screen Shot 2022-09-23 at 3.06.07 PM

If it needs to make a tag that hasn’t existed before would you want it to just auto-create it from the input box?

Yes this is the goal

That is a good note & will help with tag display once this is working.

Spawns add/edit tags modal:

Where it says no results found, is that the searchbox element or did you custom code that?

Thank you for sharing. That is important logic relating to this idea. I had not yet used the minus list function as well.

Oh right forgot to mention that important piece. We primarily use this component when building out tag logic (or similar functionality). We use it in most apps… anyways it is the multiselect dropdown plugin from Bubble:

And now that I’ve mentioned it again, I’m still perplexed as to why this doesn’t come as one of the core components of Bubble as it is highly useful.

1 Like

That is the plugin I am referring to in attempt 1. Basically I would be 100% ready to use that plugin as the solution here except I can’t figure out how to allow a user to create a new tag while loading a dynamic list of items from a datatype Tag

The video is set to play almost exactly where they talk about this setup in the plugin. The Allow users to type new texts option is hidden when you use the dynamic setting if it is not set to the text type. If that option persisted when you chose a datatype… if checked you would need to map the input text value to data type Tag, field Tagname (defined as text) in the database.

The video also introduced a method of grabbing the input text value which was a key part of the approach I took when trying to get it working set as text. I was able to grab the text and add it to a list but I had a list of texts that wasn’t bound to tags. I was loading the list into a custom state but got stuck on how to relink the list of texts back into tag fields & then update the item the user was working on with the correct relationships as they are added/removed.

I think that would require a plugin update unless I am overlooking something. Still refining this idea, I have several more places I want to implement similar solutions.

Did you end up figuring it out? You have some options but when the user types in to search, you could have a repeating group show up and show results with what the user typed in. Then if the results are 0 you could have a new button saying create a new one and add it

how do you make a the multiselect menu appear when user hits the # key? Is that even possible? Pressing a key to activate a workflow?

Bubble has a plugin on the plugin store to activate a workflow from user key input.

2 Likes

That is nice to know. I can see how that could assist in future iterations of this idea.

Currently I have a list of texts running the show, appended directly to the item. I just tried to create a list of unique tags from that and I couldn’t figure out how.

I have data stored in this manner (the tags are stored as a list of texts):
Item1: Orange, Banana
Item2: Apple, Orange
Item3: Apple, Avocado

I want to give the users a list of the 4 unique items in this list. I was not sure how to build the logic to display that. I am wondering if I need to write a loop that indexes this information into a tag data type.

Bubble automatically doesn’t display duplicates, so if you listed all of those in a list it would show Orange, Banana, Apple, Avocado. If that helps at all. If people are able to make their own tags though they would be able to type “apple” and it would make a new one since it’s technically different.

Making a separate data type “Tag” wasn’t working out? That would probably be the best

1 Like

I didn’t know about this default. That is exactly what I was hoping to do.

I think you are right. I rushed to get it working for demo purposes. This has been bugging me, I am going to try again. I tried to implement the solution with a group focus dropdown. I was having trouble with it closing even after trying to adjust the logic. I saw a mention of that element getting a tune up in the recent update. Possibly the day I tried it they were working on it because I had gotten them working in other places but here I was getting unpredictable results. The issue seemed specific to group focus elements displayed in a popup.

Yea, make a new data type called Tag, with a field for the name. Under your Contact type make a new field called “Tags” and make it a list and type Tag.

Get the “Input Watcher” plugin, put the plugins element on the page, give your input a HTML ID and put that ID in the plugin’s element.

Make the groupfocus show up when the Input Watcher’s input is not empty. Inside the group focus put a repeating group and make it “Do a search for Tags” where the Name “contains keywords” of Input Watchers’s Input value. Make a workflow so when the tag is pressed inside the repeating group, it adds that tag to the current page’s Contact, then it hides the group focus.

Once you get that we can fancy it up with subtracting the current contact’s tags from the list.

Then after that’s working, make the repeating group not visible on page load, then add a conditional “This repeating group’s List of Tags:count > 0” and make the element visible. So it’s only there when there’s at least 1 tag that matches. Then make a new group under the repeating group with the same conditional but it’s “Reapeating group’s List of Tags:count is 0” and it will have text saying “No tag found, create one?” and it has a button to create a tag from the input’s value, then it adds to the current contact, then hides the GroupFocus

5 Likes

I recoded the solution based on this approach.

Thanks for all the help in this thread!!

2 Likes