Bubble Developer Kit

Oh I see. I honestly haven’t used the other plugin so can’t specifically tell you the differences (maybe give it a try?). But if I were to take a guess - the ability to set a timezone in the bubble editor element for the bdk one is unique compared to other datetime pickers.

Ok thanks

@gaurav,

What I’ve been looking for is a time-only picker. Failing to find one, I created a reusable element that pretty much does what I need.

image

Hopefully, you can see the element here:
https://bubble.io/page?type=page&name=index&id=lh-sampler2&tab=tabs-1

I’m not familiar with sharing apps publicly, so I hope it comes across and you can see but not edit it.
Here’s the “live” version:
https://lh-sampler2.bubbleapps.io/

I’m using the Bubble date picker and Air Date/Time picker for setting values in the sample page.

For my purposes, increments of 5 minutes is fine.

It’s pretty clunky, using repeating groups and a data type storing the time pieces (hour, minute, am/pm), but . . .
So far it seems to work as intended although I haven’t tried it on a phone or in a group focus or floating group.

I know I’m not the only one who wants a simple, clean time-only picker as a plugin that works on phones and in floating group and group focus elements.

Are you interested in doing something like this?

@laurence the Air datetime picker allow you to only use time picker and set interval. I guess that is the sane eith the one from gaurav. After, you can use :extract to only have the hour and minutes

1 Like

@Jici,

The sliders on Air Date/time Picker are finicky in general, and especially awkward on phones. Also, Air Date/time Picker doesn’t work properly on a Group Focus element. It hides the Group Focus after date or time is picked, messing up the UI intended by using the Group Focus.

Here’s a general problem with UI: what works well in a computer browser, with mouse, doesn’t always work well on a phone. What generally works well on a phone, i.e. with touch, doesn’t always work well or at all on a tablet. Here’s an example: Drag-drop on a Tablet?

Device and browser variations make UI development in Bubble an expensive trial and error (frequently error) process.

Simple plugins are needed that work reliably and consistently on computer and phone, and within any Bubble group element. Not necessarily fancy, just reliably functional.

1 Like

The bdk date/time/range picker has the same problem as Air Date/Time Picker and many other elements: When used in a Group Focus, it prematurely closes the gf.

I can’t really show you what’s going on. In the snip below, as soon as it lost focus (clicking on the screen image snipper outside the Bubble app), the bdk picker began to fade away:

Interestingly, in this scenario, the gf remained visible. However, when I choose a date or time from the picker, both the picker and gf go away.

Bubble’s date/time picker hasn’t had such problems. When a date is picked, the picker closes without taking the gf with it:

image

Since Bubble has made this work, it seems like the solution must be available to plugin developers to work well with Group Focus.

EDIT:
after posting this and returning to the app, I noticed errors in the debugger:

Sorry, we have encountered an unexpected error. Please file a bug report (Help → Report a bug), including error code 1571886798448x832926146958972500 and a step-by-step explanation of how to reproduce this issue.

20:13:11

Element bdkPickWhenDone

The plugin Date/Time/Range Picker (bdk) / element Date/Time/Range Picker threw the following error: TypeError: b.data.publishInitialContent is not a function at eval (eval at m.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/a804149b996ba07507ca58733de861843b71b5a900da1d111446d0cafad01224/xfalse/x5:13:1927713), :12:8) at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/a804149b996ba07507ca58733de861843b71b5a900da1d111446d0cafad01224/xfalse/x5:13:1952086 (please report this to the plugin author)

20:13:11

Element bdkPickWhenDone

The plugin Date/Time/Range Picker (bdk) / element Date/Time/Range Picker threw the following error: ReferenceError: spacetime is not defined at eval (eval at m.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/a804149b996ba07507ca58733de861843b71b5a900da1d111446d0cafad01224/xfalse/x5:13:1927713), :5:1) at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/a804149b996ba07507ca58733de861843b71b5a900da1d111446d0cafad01224/xfalse/x5:13:1951853 (please report this to the plugin author)

@gaurav Does Floater work on hidden groups? I coudn’t get it working in my testing

Hello @gaurav

Would it be possible to localise the country names for the Phone Input plugin? This way, the user can look up the country based on the language set.

Ideally there could be a setting in the plugin to pass the language to localise the countries’ names.

Regards.

Hello @gaurav, would you be so kind to just inform me if you would consider to localise the country names to your Phone Input plugin?

Not sure what JS phone input script you are using, but some (such us International Telephone Input already provide the localised country names.

Just so I can consider other options, as I need the country names localised.

Thanks in advance.

Hi @miguel,
Thanks for the suggestion. Can you help me understand what localize the country names means. The plugin already provides for the name in both English and Local language doesn’t it? I might be misunderstanding your request.

Cheers,
Gaurav

Hello @gaurav

Thanks a lot for answering.

You are right, the list provides the country name in both English and the local language. The problem is that the list is sorted by the English name, and the user cannot quickly find her country by typing the local name when opening the dropdown list, because it’s sorted by the English name.

Hence why I think the user experience would be improved a lot if the country names were actually displayed in a specific language (perhaps set as a parameter). This way the user could quickly type the name of her country and find the country (unfortunately not everyone speaks English…yet :).

Kind regards.

Hello @gaurav, did I make any sense?

Thanks!

Yep. I need to take a look if the library supports this (if you already know it does, would be great if you could point me to the same) :slight_smile:

Hi, thanks for replying!

I am not sure which javascript library you are using for this plugin, but if it’s International Telephone Number, if you follow the link you will find that there is the parameter localizedCountries in the options:

localizedCountries
Type: Object Default: {}
Allows to translate the countries by its given iso code e.g.:
{ 'de': 'Deutschland' }

What I am not sure is if this library has already the translations for each ISO language though.

I am guessing that your plugin could enable a parameter for the language to localize the countries.

Regards.

1 Like

Right, the library might not have the translations (makes sense, as it would be a huge file).

I found a place with all the translations though: https://github.com/umpirsky/country-list/tree/master/data

Regards.

1 Like

Hello @gaurav, did you get a chance to evaluate this?

Thanks!

Hi @miguel,
Yep. I will add the parameter localizedCountries in the next update (within the next week / two). I will also add the default selected country option. However adding the translation using the the other library is a longer ask and I don’t think I will be able to add that in the next update.

1 Like

Thanks a lot @gaurav

1 Like

Quick question @gaurav

If I had several phone numbers being displayed in a Repeating Group, how can I know when one of them has changed?

I don’t see that the plugin fires an event when the content has changed.

Thanks!

Right the plugin doesn’t have this as bubble allows for content changes to be set up using its ‘Do when’ workflow action. I guess you won’t be able to use that approach in a repeating group though as you can’t reference an element inside repeating group in bubble.

I’ll look into adding this event in the next plugin update

1 Like