A quick tip on making use of the multiselect dropdown

[romanmg]

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 let users add their own options to it.

For example, if you were building a “meetup” app, your users might be creating meetup events. For each event, they might fill out the name and description, and also “tag” the event with some keywords so other people can easily search for and find it.

In this case, you might already know a lot of the most popular keywords for a user’s event.

​​So, by default, your list of keyword options could already be in there — things like “music, food, fitness, etc.”

To take it a step further, though, you could also let your users add their own keywords to the dropdown so they could specify even more — things like “folk music, outdoor barbecue, or HIIT workouts,” for example.

Setting up your multiselect dropdown like this adds an extra layer of customization that’s entirely under your users’ own control. If you need to implement something like this, take a look at this quick video tutorial to get going!

Cheers!
Gaby

Coaching No Code Apps
Join our Facebook group for insider access to no-code development
Get professional development services
Enroll in expert-led courses and products

[JohnMark]

I like this plugin

[mattb]

I haven’t watched the video as I’m on mobile, but wondering if you can help. When using the multi drop-down, is it possible to predefine a list on page load?

For example, user create new post article, goes to edit, and sees previously selected options in the multi drop-down box.

[romanmg]

Hi @mattb, yes, you can save the selected items to a field in the user’s record every time the multi-dropdown’s value changes, and set the initial content of the multi-dropdown to the current user’s field so it pre-fills on page load.

[mattb]

Hi Gaby, thanks for the reply. I’ve actually been playing around with a create and edit page all day today, which included these inputs.

Debate: Create and edit new thing. Single vs multiple pages

This is interesting and certainly something to test out. One of my issues with autobinding has always been undoing what was done but it never occurred to me to copy the thing before editing it. Really great thread, guys. You are making me rethink some of my methods

I’ve managed to create a page that allows users to create a new thing, plus edit that thing on the same page. By setting the page thing and using autobind, the list inputs populate and update nicely

[vinicius.tst.eng]

Hi Gaby @romanmg, The tutorial is amazing! thanks a lot for this!

I’ve noticed that when the user wants to type a new text, as standard, the plugin understands that the “tag” should be created after the user hit the space key. What if the user want to add a text with more than one word, so when he hits “enter” key, the new tag should be created. Is it possible? If so, how can I do it?

Thanks a lot!!

[romanmg]

Unfortunately, that element only takes single words. You’d need to use a hyphen or some other character to keep it as a single “tag.” This could be a point of friction with your users.

However, check out this great workaround that uses the multiselect element created by @NigelG here: Multi-word tags | Adding multiple things into a list from one input field

[cowles.cj]

Thank you, Gaby, for your videos!

I was wondering if someone could shed some insight. I’m not sure if this is an error with Bubble or me.

I have a CSV upload option however, I suspect that the uploaded data probably won’t be formatted correctly. I’m trying to create a way for the user to create mappings if things don’t match up.

I have created DB that will take all the different inputs and add them to a list. Then I used this as my source for the multiselect. That is going well, however, when I try to make a change to a list of things and I do a search of their inputs is in the multiselect value It turns blue, but shows up within the errors as ‘it should be a list of text but right now it is text.’

I guess the question is how do I make the multiselect a list of text? Thank you!

[mohamed1]

Hi @romanmg, thank you so much for your tutorial; it was extremely helpful.

(Ps. I’m using a type called Tag instead of Interest)

I’m kind of stuck in the step after however. After I create a new Type (Tag), I want to add the field name into another type [Client] that has the field called tag with the type Tag. Below is my implementation -

This works flawlessly when the text I’m adding to the dropdown does not already exist in the type Tag, since the first workflow runs normally without constraints and hence, the ‘Result of step 1…’ gets added to the Client type. However, if I want to add to a Client a tag that already exists in the Tag type, the first workflow doesn’t run because of the constraints, and therefore it doesn’t get added. I’ve been busting my head over this for 2 days now.

Do you have any workarounds that I can do to fix this?

Also, how do I make it so that when I remove one of the tags from a Client in the multidropdown field, it also gets deleted from the Tag field in the Client type?

Thanks!

[major_groove]

I’m gonna jump in here, as this is exactly the problem I am having, and I noticed that several people in the YouTube video comments had the same problem.

To enable your users to add their own Tags/Interests, the type of choices of the Multiselect needs to be ‘text’ - however in the next step, when you try to then save these Tags/Interests to anything, it does not work since they are text rather than the Data Type you are interested in.

So I tried to do it via Do a Search - where I search for Tags/Interests that match the tags that are in the multiselect. However, this only works for one tag. If I add more - then it saves none.

I tried another approach to save the Tags to a State on a page - but again the State will only save one Tag. If I try to add more, then it will save none. Everything is set up to be a List, but no joy…

anyone got any ideas abou this?

[major_groove]

So, I solved the above problem.

However, when I follow @romanmg 's instructions exactly from the video above, every time I select a Tag/Interest that is already in the database, it adds a blank Tag/Interest to the Interests table. I am sure I followed the instructions exactly, so not sure how can this can happen (the filters are a wee bit tricky).

/edit - well after going back and forth it seems this does work. Who knows - it’s been a long day on the same problem! However, I have not solved the above problem, because it does not allow me to remove a tag yet…

[rcretella]

Hi how i can set the initial content when i have the multiselect dropdown in a popup?
Thanks

[toby2]

I am not sure if this is the right area for this but I am having a hard time using the multi-select to filter my repeating group. I have “Deals” which has “DealCategory” which is a list of tags. I have created the multi select to source tags I want to use. When I try and do a search based on “DealCategory” I cannot get it to use the full list, it will only allow it if I only take one tag element, which defeats the purpose. Any help much appreciated.

[devyani-gupta]

Hi - did you manage to figure this out? i’m having the same issue

[toby2]

maybe try this other post I made Multi-Select OR filtering behaviour

I think ultimately it ended up being that I had to write the conditions in reverse.

I ended up not getting the full functionality that I wanted so I moved on, if I get a chance I will try and recreate this and see if I can figure it out again.

[toby2]

I think in this specific case I ended up using a list of texts instead of a list of objects and then the filter settings worked more as expected. I have to say I have really struggled with the multi select plugin. I think other recommendations of using custom states that you add / remove items to to use as the filter criteria still work better.

[pratima.dudhewar]

Hi @romanmg , i want to append two values but theyare of type text and with the dynamic data which is coming from API. I want to append those two values on top of dynamic values. How i can achieve that? please reply.

[knightsheath]

Struggling to find this information but how would you save multidropdown data into a user data type? For example, I’ve create a data type under user, and I want to the user to be able to select multiple choices on the multidropdown input and save it by clicking a button. But can’t for the life of me figure out how to setup the ‘Make changes to current user’ workflow so that the current users can save the info on the profile while displaying it on the input until they update it again.