For Dropdowns, is it possible to pass a specific value (other than what is displayed to the user). For example, in HTML, this would look like:
<select>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>
Where the numbers 1, 2, 3, 4 would be passed as data to the server.
Is there a similar option in Bubble.
Thanks!
Yes, your workflow would like like this:
When dropdown’s value is changed > add action where value will be saved and add a condition “only when this dropdown’s value is Volvo”… field = 1
Gaby | Coaching Bubble
Thanks Gaby… this solution makes sense, but it seems to be a bit convoluted given the relatively simple objective. I do really appreciate your help though! Thanks.
No problem. If you find more straight-forward way, then I hope you’ll post here so that others may learn! A lot of these things also really depend on what you’re doing. If your value doesn’t exist in the database, then you’ll end up “hard coding” with some variation of my first suggestion anyway.
Here’s another path for if the value you’re looking for does exist in your DB:
If your dropdown is a dynamic list of Things, and the value that you want to save versus the caption of each choice are separate fields within the Thing data type, then you can simply say field = This dropdown’s value’s [value field].
For example your dropdown is a list of cars in your database, and you want to save the selection’s horsepower.
Source = search for cars
Caption = “current option’s model name”
When dropdown’s value is changed > field = this dropdown value’s horsepower.
There are usually many ways to achieve the same thing in Bubble, with some ways more more efficient than others. All really depends on what you’re doing. Hope this helps!
Can use an Expression element, then read the value in the workflow:
({“Audi”:1, “Mercedes”:2, “Volvo”:3})[“Dropdown Cars’s value”]
I’ve added an example here…
app editor
app runtime: Bubble Application
mishav, thank you - that is very cool. Let’s say I have 3 numbers that represent date parts (for month, day, and year), for example: 04,25,2017… can you please help me with the expression to join these into a date formatted string that the database will accept as a date?
Thanks again!
This converts them into a date type, rather than a formatted string:
new Date(Input year's value, Input month's value, Input day's value);
I’ve updated the same example app.
Note that collecting the day, month, etc. separately is often not a good idea, can get 31 Feb, etc.
Thanks mishav!
From your perspective, what is the best practice approach to collect dates (specifically birth dates)? The date picker in bubble is not good for picking birth dates and the date formatted text input field in bubble is not very user friendly on mobile. Thanks again.
What makes it unsuitable? Have you tried its display dropdown for month/year, and minimum date property?
Good question, I haven’t done that research yet.
Well, the year dropdown only displays 10 years and many people are older than that. So, there is a lot of clicking or manual manipulation to navigate to a specific year. Also, on mobile, it’s not a great experience, as the dates on the calendar are very small.
Haha yes some limitations. Maybe another datepicker would be appropriate.
I googled “javascript datepicker” and got a lot of results. I like how the years are easily selectable on this one:
Thanks mishav, that picker is much more usable… how would I go about installing the Javascript for that calendar please?
Also, I noticed on the “Expression Numbers to date” element you created, the month it’s displaying is one more than the input month (for instance input of 4 renders May). I can’t figure out why that is happening.
In javascript, months start with zero, so subtract one if using a human input value. : ) I fixed up the example.
If I get time I’ll have a look at that tomorrow.
I think these issues should be raised to the attention of the Bubble team, they need to be addressed.
##air-datepicker
Good question! I had a quick attempt, and every combination I tried I got a warning:
Can't find language "en" in Datepicker.language, will use "ru" instead
This topic was automatically closed after 70 days. New replies are no longer allowed.
