🔰[New Free Plugin] Air Static Dropdown labels

Just published this tiny plugin called Air Static Dropdown labels, that i think some few people might find useful.

This plugin allows you to display dropdown labels different from the values when using the default bubble dropdown with the static option.
For dynamic choice you can simply use the features available in the default dropdown element.

If you want to have a dropdown with lables different from values, in most cases you create these as two different fields in your database and use the dynamic choice for the dropdown.

But there are cases that some developers want to use static choices for whatever reason.
Especially if you know your list is never going to change and therefore want to save your application from making a server side call to pull the list from the database.

This is where this plugin comes in handy.

Its very very tiny purely written in like 10 lines of javascript code so doesn’t really add any overhead to your app.

image
image

Here is a demo link:

And the editor link:

Usage Instructions

  1. Install the plugin
  2. Add the element AirDropdownLabels to your page.
  3. Assign a unique id attribute to your original dropdown element
    (If you haven’t already done so go to Settings page, General tab and check Expose the option to add an Id Attribute ...)
  4. Enter this same id in the AirDropdwonLabels Element id field.
  5. Enter the list of texts you want the dropdown to display. Must correspond the the values in the dropdown and should be the same length.
  6. If you checked “This input should not be empty” on the dropdown, check the same property on the AirDropdownLabels (this is important or some cats will die, seriously :cry:).

Note: As usual if you have multiple dropdowns make sure each of the id attribute values are different.

Enjoy

If you would like to see more free plugins :point_right:t5: Buy Me a Coffee at ko-fi.com

19 Likes

Great idea, can’t wait to try it out :ok_hand:

@seanhoots Hey man! Love your plugin. But, one thing I am running into is that if I use it in a repeating group, the top item will have it replace the options correctly, but the other items will show my original dropdown instead of the values stored in your plugin. Any ideas?

1 Like

You might have a problem with the ID attributes. Each one should have a unique name.
You can use the cell number to get unique names for each dropdown and the plugin elements.

Hi @seanhoots, your plugin works perfectly with bubble dropdowns. However, it seems not to work with multidropdowns.

I can’t conditionally change the option caption of the multidropdown, hence impossible to handle multi-language. I tried regex, but only allows me to access “current option…”, can’t access current user’s language. Do you know of any alternative to this limitation ?

Thought of building a multidropdown myself with repeating group but the formating will be disgusting…

HI @Tomdez1989, Did you find a solution to this problem? This is not the first time I have encountered this problem.

Hi @akrylov, I did find a way to handle that. I have been rethinking the whole multi-language issue using REGEX. It requires to create a pattern in the database’s text field where you store your multidropdown options.

Example, if your multidropdown Searches for text in Type XXXX, instead of having one field per langue that you conditionally pick depending on the user’s language, just have ONE field with your text pattern.

Example:

/english:hello/french:salut/italian:ciao/ is what your text needs to look like (don’t forget the “/” at beginning and end for REGEX extraction pattern to work).

Then use extract with regex function after the “search for” function as in below screenshot

The result is that when user’s language is french it will return “salut” and so on.

As a result you can drop all the conditional statements that can get very messy.

Hope this helps, and if there’s something that doesn’t work for you let me know.

Thomas

2 Likes

Hi, Thomas! Thanks for the answer. Looks good. I will try this method.

Could someone provide an example in the editor of this plugin?

thanks.

@avern87 did you manage to solve this problem ? I identified the same problem that you talked about in a repeater group

@formatusdesigner Yes, I did. Sean’s response was correct… The IDs have to be unique. So you’d use a dynamic statement in the ID for the element to make it reference the index of the repeating group.

For what it’s worth, I ended up replacing this functionality entirely with custom states since you can add an attribute to custom states. For instance, a field to display and a field that stores the actual value. Works better / faster.

2 Likes

@Andrew.Vernon Thanks for the help … But I was still lost. I’m starting on Bubble yet :frowning:

in the repeater group I put an ID see Screenshot by Lightshot
I put another id in the dropdown that has the options I want to translate Screenshot by Lightshot. I inserted this id in the plugin Screenshot by Lightshot

do I need to put another ID in the ID Attribute plugin too?

Ah, no problem. Happy to help!

You’ll want the dropdown and the plugin in the same cell of the repeating group. You’ll give them both IDs like you did, but you’ll also use a dynamic reference to their index from the repeating group. (Screenshot below) This basically means that even though you’ll have many copies on the same page, they will each have a unique ID from the others since each instance of the dropdown and the plugin will have a different index.

1 Like

Perfect! Now it worked perfectly !! Thank you very much @Andrew.Vernon !!!

Hi @Andrew.Vernon , I have troubles getting the plugin to work currently.
So your solution with custom states sounds very good.
Any way you can share how you’ve set that up?
Kind regards,
Sando

Hey @sando :wave:

Sure thing! For this, you’ll want an option set with atleast one attribute. So, your dropdown might show the ‘display’ of the option set as the option to the user. But when you save that to the database, you might actually reference and save the attribute of the option instead of it’s display value.

Here’s an example, let’s say you have a dropdown that asks someone to pick from a list of colors to customize their account in your app. Your option set might be a list of color options like Blue, Orange, Red, etc. But, you might want to save the attribute of each option which could have the hex value for the color.

Here’s a link to our video on how to set up Option Sets → How to Use Option Sets | Bubble Tutorial - YouTube

1 Like

good! i’m used unique id, it worked out!

1 Like

Im still trying to understand how this works and i feel like this will solve my problem with my app. So i have a multilanguage option (English & Japanese) and with dropdowns, its a pain when handling them.

I use dynamic options for most of my dropdown options then use conditions to display to English when it detects the user’s language is Japanese or manually selected.

So when i tried testing the plugin when i checked the dynamic option, it just showed undefined. Am i doing something wrong?

Hi @notjrag,
Thank you for reaching out.

Can you please share more details and screenshots of your setup, explaining how exactly you are using the Air Static Dropdown Labels Plugin?

The main plugin’s purpose is to assign labels to dropdown options. For instance, if you have a dropdown with static options 1,2,3, and the AirDropdownLabels plugin element on the page with the labels First, Second, Third → You Dropdown will display all three labels instead of showing 1,2,3 numbers.
See the screenshots below:



In case your dropdown will have fewer number options (1,2) it will display only the first two labels…

Hope the above example will be useful for your use case.

If you require any further information, let us know.
Best regards,
Zeroqode Support Team.

Hi.
Thanks, great job! It helped me as well.
But I encountered a problem:
In my app I have an “edit location” page. In this page there are many dropdowns, whose initial value AND placeholders are the previously chosen values and placeholders. So, for example, thinking of airbnb, you posted a house with KINGsize beds in a dropdown. Then you want to edit this number and are led to a page which has as default value the KINGsize" in the dropdown for the beds.
I used your wonderful plugin but it doesnĂ t seem to work. I.E. As long as there is a placeholder and-or initial content, the choices in the dropdown cannot be TRANSLATED, is this right?

Best regards and thank you immensely