What Is The Best Approach To Enable Users To Create Their Own Categories & Tags That Can Be Used To Filter Their Posts?

[edengaitor17]

Does Anyone Know The Best Approach To Enable Users To Create Their Own Categories & Tags That Can Be Used To Filter Their Posts?

Greetings Bubble Community,
I am currently tackling what seems to be the most challenging aspect of my application.

Here’s what I’m trying to do:

1. On the page where users can submit a post, I want the users to also be able to create their own category and tags associated with the post as well.

2. Specifically when the user creates tags, I want those particular tags to be associated with the category. (Examples:
   Post #1 has 3 associated Tags - fantasy, adventure, family that belong to the Category - ‘Movies’)
   Post #2 has 2 associated Tags - startup ideas, marketing tips that belong to the Category - ‘Business Trends’)
   Post #3 has 3 associated Tags - horror, thriller, adventure that belong to the Category - ‘Movies’)

That way, when the user creates new posts in the future and selects from the dropdown menu of tags that they already created for a particular category, it doesn’t show irrelevant tags that has nothing to do with their pre-defined category.

3. On the User’s Profile Page, I want to showcase all the categories that the user created and display those categories as buttons to filter the user’s posts in a repeating group. I also want to display the tags associated with a selected category to allow for further filtering of posts

**I really want to know what is the best approach to achieve this. **
Nonetheless I will place some images below to display my setup so far:
In doing so, please let me know what you think I should add or change to achieve the desired outcome.

DATA TYPES
IMAGE A: Category Data Type

IMAGE B: Tag Data Type

IMAGE C: Post Data Type

POST SUBMIT PAGE
IMAGE D: Create New Post Page
Note: I’m still trying to figure out how to create a checkbox menu in a dropdown list for multiple tag options to be selected. Therefore, for now, I’ve just used the dropdown menu element.

When the user clicks on the ‘create a new category’ button, a popup becomes visible, where they can enter the category name and submit. Then the category name is listed in the drop down menu for selection. The same is true for the ‘create a new tag’ button.

IMAGE E: Post Button Workflow

CUSTOM STATES
Image F: I created Custom States on the Profile Page for Categories and Tags

Image G: I set a custom set for the category filter button in repeating group

Image H: I set a custom state for the tag filter button in repeating group

CATEGORIES DISPLAY
Image I: Category Repeating Group

TAGS DISPLAY
Image J: Tags Repeating Group

Image K: Tag Button Display Expression

POSTS DISPLAY
Image L: Posts Repeating Group

[edengaitor17]

UPDATE!

I think I’ve figured out how to enable users to create and select multiple tag options. I followed this recommendation that has a link to a video:

A quick tip on making use of the multiselect dropdown

Hey guys! Here’s a quick tip we put together after getting some questions about the multiselect dropdown… The multiselect dropdown is generally used to show and let users select from keywords, categories, tags, and more. This in done in a “tag-like” manner, where anything that’s been “tagged” with a keyword, category, etc will show up when its keyword, category, etc is chosen. Usually, you’ll have a predefined list of options for your multiselect dropdown, but sometimes, you might want to le…

I’m also able to show only the tags associated with a category

See here:
IMAGE #1

IMAGE #2

This is the logic I did:
IMAGE #3 Add Tags Input

IMAGE#4 Event for when the tag’s multi-drowdown’s value changes

IMAGE#5 Create a new tag action

IMAGE #6

I’m Still Stuck With Two Tasks:

1. Trying to filter posts via categories and tags on the user’s profile page.
   (Specifically: When a category filter button is selected - show all posts with that selected category. By default, the first category button should be selected.
   When a tag filter button is selected, show all posts that has that tag and the selected category it belongs to.
   Furthermore, when the tag filter button is de-selected, revert back to showing ALL posts of the selected category.)

2. Dynamically display only the tag filters on the page that are associated with a selected category

[alex.esposito.1108]

@edengaitor17 I’m glad you’ve made progress with allowing users to create and select multiple tags! There a couple things that jumped out at me from the first post:

1 - Image C showing the “Post” data type. The “Post Tag” field should be a list of tags rather than a single tag, shouldn’t it?

2 - Image F shows that the button text for the tags RG is a search. As far as I can tell, there’s no need to do a search in every cell. If your data type is tags and the data source is searching for all the tags with the selected Category then the button text should be Current cell’s Tag’s name. (This should address the 2nd question of your 2nd post).

3 - Image H, if I understand correctly what you’re trying to do, then you want this custom state to be a list of tags, not just a single tag, correct?

4 - Image L, in your search constraints check the box to ignore empty constraints. Without this being checked, if a category is selected and no tag is selected then you will never return any results (assuming every post has at least a tag).

Also, in order to select/deselect you’ll need to create separate workflows with conditionals. For example, when this button is clicked, set state (conditional = only when custom state list DOESN’T CONTAIN this button’s tag) action = add this button’s tag from list. Conversely, when this button is clicked, set state (conditional = only when custom state list CONTAINS this button’s tag) action = remove this button’s tag from list.

[edengaitor17]

Thank you @alex.esposito.1108

I will definitely start making some adjustments, however, I’m noticing an issue that I’m not sure how to resolve with the tag multiselect drop down.

In order to allow users to add their own tags, the Type Of Choices on the multi-drop down element has to be ‘text’. So the issue is that when I want to create a new post and enter the values from the multi-drop down in the tag field, it’s incompatible.

Is there a work around for me to still filter posts with tags with my current approach?
Or do I have to rethink my entire approach?

[alex.esposito.1108]

@edengaitor17 in the multi dropdown element you have a list of texts which is all the names of the of tags you need to add to the post. So when you’re creating the post set the tags field = to multi dropdown’s value intersect with the list of tags name (you can this with a search in the constraint or intersect with a list in a RG element or custom state)

[edengaitor17]

1. You’re right @alex.esposito.1108, I think your suggestion did answer my 2nd question in my 2nd post as it seems I’m now able to display tags dynamically that are associated with the category.

IMAGE A

IMAGE B

For now the posts are only being filtered by the selected category.
I’m still having trouble selecting the multi-dropdown value as it seems to be unclickable

I also tried to change the field ‘Post Tag’ in the Post Data Type to a list of tags to see if the multi-dropdown value would become clickable. That didn’t work.
So I’d like to know if maybe I didn’t understand your suggestion correctly.

Also, can you please clarify this suggestion you made to me?
Your statement:
“Also, in order to select/deselect you’ll need to create separate workflows with conditionals. For example, when this button is clicked, set state (conditional = only when custom state list DOESN’T CONTAIN this button’s tag) action = add this button’s tag from list. Conversely, when this button is clicked, set state (conditional = only when custom state list CONTAINS this button’s tag) action = remove this button’s tag from list.”

[alex.esposito.1108]

@edengaitor17 take a look at the page below. This should have everything you need.

Bubble Editor - Aetesting

[edengaitor17]

@alex.esposito.1108 it does show me how to do alot of the functionality that I want to achieve. Thank you

The only hiccup I have so far is that I added a constraint to the RG that shows all tags so that it only shows the tags that ‘belongs to’ (is associated with) a selected category. That’s when things get weird.

This image shows the result of me trying to add the tag ‘Thriller’.
But each time I hit the post button and refresh the page, I see blank cells where the tag ‘thriller’ should be in the first RG.

Also, whenever the category selection’s value in the dropdown is changed, I want to update the ‘Belongs to category’ field for the list of tags.
For instance: After the user has selected the category ‘movies’ and added tags for that category, they may decide right before hitting post to change the category to ‘tv series’.
But as it stands right now, the list of tags will remain associated with whatever value that was in the select category dropdown when the tag was created.

Furthermore it seems that when I added the tag ‘adventure’ for the movies category in one post, if I try to create a second post and add that same tag name ‘adventure’ to a different category called ‘tv series’, it results as a blank in the RG displaying all tags associated with the tv series category.

…I think I’m really in over my head as a newbie trying to figure out how to execute what now seems to be highly complicated functionality logic for my application.

Nonetheless, I like that I learn something new each time I progress.
Thanks for taking time to help me. Please let me know your thoughts on this.

Also, what does ‘:last item’ mean?
Does it mean that a search is done through the entire database until the last item?

[alex.esposito.1108]

@edengaitor17 I’ll follow up with a PM

[lukasraymann02]

Hi, I was very invested in this conversation as I am facing very similar issues. Could you maybe share what you shared via PM?
And thanks a lot for all the help so far, even for me who was not asking the questions, this was really helpful!