Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Building a Custom Dropdowns in Bubble

Learn how to create a custom dropdown in Bubble.io without any code in this tutorial video. See how you can include elements like profile images and contact names for a seamless user experience.

Creating a Custom Dropdown in Bubble.io

For when the default browser drop down 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. And 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. And so the first thing I'm going to do is add in a group.

Adding a Group for Custom Dropdown

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 is being selected. So I'll say type contact. And 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 just so it stands out. Right, let's begin. So when I click on here, I would like it to show, in fact, we will say toggle the group focus.

Previewing 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. So let's now put into here. 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.

Creating a Repeating Group for 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 the min height. 200 is way too low. Let's say 380, something like that. We'll get it working. So 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 images 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. Then copy this also into there. Link it back up with the new Alphabet image that it's sat next to.

Yeah. Make sure that this is still current sales contact. Brilliant. I'm just going to check that that works. Yeah. There we go. And it's scrolling nicely as I was hoping. So let's also add in a text label so say carousel's contacts, first name. And then I'm going to change this all into a row and put the image first.

Improving the UX and Testing the Custom Dropdown

Let's test that. Perfect. 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. Got videos covering that too. In a repeating group and in a table. But for now I just want to be able to say if this is clicked, we want to set not the repeating group.

Setting Event for Custom Dropdown Cell Click

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 groups contact.

Copying and Pasting the Custom Dropdown

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, Bob, we need to sort that out. I'm going to paste that into there because that should now mean that if I select wonder, wonder 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 group. So show the image and show the text.

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 floater. Focus group, focus. And I can go in and change it and it all works. Now if this is part of a form and I want to know which contact is selected, I can just refer to.

Conclusion

Yeah, 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 dropdown in that repeating group. So there you go. That's how you can create your own custom dropdown in bubble, which includes images, text, and how you can incorporate that into a larger form.

Latest videos

crossmenu