Building a Custom Dropdowns in Bubble

Creating a Custom Dropdown in Bubble

For when the default browser dropdown is not enough, in this Bubble tutorial video, I'm going to show you how we can create a custom dropdown that includes other elements. We'll be using this list of contacts and picking out the contact name and the profile image of the contact. So let's go in here and go into the page.

Setting Up the Group Container

The first thing I'm going to do is add in a group. Let's add it in here. And I want this to say let's be 320. And I'm going to give it a border just so it stands out. Okay. And so this group is going to contain a contact because ultimately I'm going to be referring to this group to know which contact has been selected. So I'll say type contact.

Creating the Group Focus Element

Now I'm going to add a group focus because this is going to be the bit that pops out, pops over the rest of the page content when it's clicked. So group focus. And I'm not paying too much attention to layout, but we will anchor it to the contact. And let's also give this a bit of a border. Yep, just so it stands out.

Setting Up the Toggle Action

Let's begin. So when I click on here, I would like it to show, in fact, we will say toggle the group focus. Let's preview that. So click and it's there. If I click anywhere else on the page, it disappears. If I click back on the group because it's toggle, it also disappears.

Creating the Repeating Group

Now this is a little bit of a bug with Bubble. It sometimes forgets where it's meant to be anchored. I don't think it actually matters. You can just proceed without having to fit that each time. So we'll say repeating group in here. And this is going to be a repeating group of contacts. And I'll say do a search for all contacts and I won't limit the number of rows, but I am going to limit the height because I want it to basically scroll internally. So let's say 200, get rid of them in height. 200 is way too low. Let's say 480. Something like that. Well, yeah, we'll get it working.

Adding Profile Images

I'm going to copy what I've got here for the image, which I've done a previous video on because it's basically taking the profile picture. Yeah, it's taking the profile picture or it's using the alphabet image. So the alphabet image is this element here. Do go and check out that video if you're unsure what that does, but I'm going to copy that into there and then copy this also into there. Link it back up with the new alphabet image that it's set next to. Yeah. Make sure that this is still current self's contact. Brilliant. I'm just going to check that that works. Yeah. There we go. And it's scrolling nicely, as I was hoping.

Adding Text Labels

So let's also add in a text label. So we'll say current self's contacts first name, and then I'm going to change this all into a row and put the image first. Let's test that. Perfect.

Improving User Experience

Now there's loads of other stuff that I could do here to improve the UX. Obviously, it's a bit ugly now, but I can add hover effects so that it's clear when the cursor's over a particular cell. I've got videos covering that too in a repeating group and in a table.

Setting Up Click Actions

But for now, I just want to be able to say if this is clicked, we want to set not the repeating group. Basically, if anything in this cell is clicked, so I'm going to select everything that's in here and group it together so that I can run a single action workflow based on if anything in that cell is clicked. And so we will simply say display data in... Okay, now we've got two groups called contact. So I'll call this one cell and then where it's attached. I call this one selected. So we want to display data in the selected and the one we want to display in the selected is the current group's contact.

Finalizing the Dropdown Functionality

Okay, now I'm actually going to copy this and you could turn this into a reusable element even because this is how I want my contacts to be displayed throughout my app. Let's just hide this. Oh, Bubble needs to sort that out. I'm going to paste that into there because that should now mean that if I select Wanda, Wanda now populates that group and that group has another group in it, which has got the image and the text label which say show data from parent groups. So show the image and show the text.

Adding Final Touches

So I'd say there's one final step to add here, which is that when the cell in the drop down is clicked, we actually just want to hide the float focus group focus. And then I can go in and change it and it will work. Now if this is part of a form and I want to know which contact is selected, I can just refer to the data that lives in here because I'm replacing that. I'm overwriting that every time a new cell is clicked in the makeshift drop down in that repeating group.

Conclusion

So there you go. That's how you can create your own custom drop down in Bubble, which includes images, text, and how you can incorporate that into a larger form.