I want to show a dropdown and I want to show the human-readable name to be different than the values.
For example a Youtube video list in a dropdown, set up so if I reference the value of the dropdown element elsewhere, I will return the ID.
value=dQw4w9WgXcQ label=Never Gonna Give You Up
value=9bZkp7q19f0 label=Gangnam Style
Ideally this would be dynamic, where both data elements could be pulled from data. The use case is: Nobody knows that the string of random characters is a Rick Astley video, so you want to show something that humans can recognize as the label. But you need the ID for it to be useful, not the name.
(Note that this is an example - I’m not trying to literally build a dropdown with these Youtube videos, I know there are other ways to do literally that.)
This is super easy in HTML. I have found forum posts that seem to suggest there is some way to do this in Bubble, but I can’t figure out specifically how it’s done, how element attributes should be set and so forth.
If you’re storing YouTube data in your Bubble database, you’d have a field for video name (text) and a field for id (also text). The dropdown would be set up as a dynamic list of choices, type = YouTube Video (your data type), and choices would be a search for YouTube videos. The option label would be “Current Option’s Name” so that it’s a list of the videos by video name.
The value of each option though is the entire record in your database, so when selected, you’d have access to any field within, including the ID.
Same principle if you’re using an API to pull in the data. You’d change the type to the API data type and the source would be through “get data from external API”. Your option label would be a field within the API response.
Thank you Gaby. Thinking in terms of labels and values is a relic of doing things in the bad old HTML days. Bubble.is works more by binding to records as objects, which is just different - for me at least - and really it’s a more powerful approach.
Rick is now doing his thing with the top button buttoned.
