[RELEASED] Selectize dropdown

Can you try just to Bring to front (plugin or group depending of your case). Most of the time this is just what you need to do.

The future update will have a different pointer. I didn’t change it from orignal one, but the next release have the selector pointer

1 Like

Thanks. It took some fiddling around. The column header band wasn’t actually in the group I thought it was in. Looks good now.

1 Like

One other minor matter. When I set the height to 24 at runtime it expands (I think to about 32). This also expands the floating header, covering up part of the RG on the page body.

Of course I can live with this. I just need to know the minimum height Selectize dropdown needs to be so it won’t get taller.

I played around with different sizes and it seems the minimum height is 37.

Hi! I will check but If I remember it’s 36px. But this is something that I can probably play with it to not apply a minimal height. I will check that probably tomorrow and let you know @laurence

1 Like

It would be nice if it could be as short as 30. I don’t know if that’s possible.

Here’s a typical mobile page design in my app:

The project drop-down is 32 high in this case. (in this case it’s still my clunky input and repeating group search, not really a drop-down.)

In this kind of page, 36 high looks a bit bigger than would be ideal.

I appreciate your work on this.

1 Like

Looking forward to using this all over my app!

Quick question: Is it possible for the field to be displayed to be dynamic? E.g. I have first name and last name in separate fields but would like to display full name.

Thanks for your work!

Hi @dev13
Yes!
For that, you need to use Custom HTML for both Items and Options.
If you have an image of how you would like it to be displayed, I can help you to get the correct HTML set

Ah ok. Yes, from your demo, this is essentially what I’d like to create.

I’m just grabbing from Users and would like it to eventually display whole name (appended) and search both first and last names.

Screen Shot 2021-03-12 at 11.39.50 AM

@dev13
In the Custom html use:

'<div style="padding: 10px;">'+item.display+' '+item.search2+'</div>'

you can play with the padding.

In the Custom Item HTML, use:

'<div >'+item.display+' '+item.search2+'</div>'

Wonderful - thank you!

1 Like

New version available
Lot of things added or fixed.

  • Search Conjunction: you can now choose between AND or OR for the search behavior
  • Search design: you can choose highligth color, underline and Bold
  • Design: You can choose the active selection BG color
  • Cursor: Fixed cursor to display pointer
  • 2 New states: Last ID and Value removed
  • Some other fixes.

Upcoming in v1.10

  • Show empty option: This will add an empty option and you can choose the text displayed
  • Scroll duration : enter scroll duration in MS
  • Make change to settings on the fly (from Conditionnal for example)
  • Items color when selected
  • Padding options and some more settings to work around the height @laurence

Upcoming in V2

  • Autobinding
  • New initial loading process
4 Likes

Hi! Can you show on screenshots basic setting of this plugin? I cant evitar errors((

The plugin Selectize Dropdown / element Selectize Dropdown threw the following error: TypeError: $(…).selectize is not a function
at runcar (PLUGIN_Selectize-Dropdown-update–Selectize-Dropdown-.js:618:24)
at eval (PLUGIN_Selectize-Dropdown-update–Selectize-Dropdown-.js:574:5) (please report this to the plugin author)

The plugin Selectize Dropdown / element Selectize Dropdown threw the following error: TypeError: properties.dynamic_list_type.get(…)[0].listProperties is not a function
at eval (PLUGIN_Selectize-Dropdown-update–Selectize-Dropdown-.js:491:140)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/b1d65d0291c047e4c648225ba9f0a5f79d1960439ac1f7f2aaf0bbf0ad5581eb/xfalse/x12:15:477992 (please report this to the plugin author)

Hi!
Can you send me a PM if you have issue with screenshot of your settings?
The demo page editor already show you some basic settings and this depend if you are using a Dynamic list or static one. If you use dynamic list, be sure to set the Unique ID field and the Display field.

Hello @Jici

Just wondering if the plugin work Sever side or client side?

I want to make sure about privacy when loading customers data.

@ryanck
When a plugin use an element (not just actions), this is always client side.
I didn’t test with privacy settings. But normally, if you use dynamic data for example, and you have privacy setting on search and you use a Do a search for, it should apply privacy settings.

Hello @Jici

I meant that if your plugin works on client side, my understanding is that first you download the data to the user´s browser and then you have the information available for usage.

Bubble´s search plugin searches directly to the server, it does not download the data. Does the selectize plugin works the same way or it downloads the data so the plugin can use it?

Because if the plugin downloads the data to the browser, then there is a security concern when using sensitive data.

Thanks a lot.

If you mean the Searchbox, it will load data from server yes. I think it’s probably the only one that do that (and also have a delay because of that). But once you select the item, it’s now available on the page. But this is not the purpose of a dropdown. If you compare with Bubble dropdown, this is not different.

Also, the plugin will only load the specified fields, nothing else. And this is the same for searchbox once there’s result that appear in the options list. So if you use a field “name” in searchbox, the name list will be displayed on the page. If in Dropdown you also use name for display and for id, it will only load this field.

If you use API Connector with dynamic search value to find in DB, it will work probably like Bubble do searchbox. But this will slow options list display exactly like searchbox.

Again, for any privacy concern, you should more check your privacy settings than anything else. If you have sensitive data, just don’t set any fields related to that in the plugin too and I don’t think this should be an issue once you have set both privacy and fields correctly. But don’t forget that once the items is selected, the data not set in privacy setting will be loaded, exactly like searchbox.

Thanks for the explanation @Jici

So when the plugin loads on the page, it only downloads the field values selected in the plugin. For example if I´m searching customers, and the search field is the name, it will only load “customer´s names” not all the data. Is it what you´re saying?

My concern is about downloading all the information about the customer in the browser so that we can be GDPR compliant using your plugin for customer sensitive data.

@ryanck
Exactly. At least from what I know and see when I’m debugging.
For example, when you set a Dynamic type. this information is used to know which DB thing to call. This step can return two things: lenght (number of items) and list of available fields. Only with that, I cannot get data. Then you select a field. And with the dynamic type, we get this field data. But nothing else. At least, from what I know and from my tests.
Request in plugin will look like this
properties.dynamic_list_type.get(0,properties.dynamic_list_type.length()).map( x => x.get(properties.dynamic_field_display))
properties is all settings available in the plugin. dynamic list type is the type you select. The first step is to get alist of items (0 and length). If you only take this part, it will return (json stringified version: [{},{},{}]. So like you can see, I know there’s 3 element in the list, but no data are loaded. And the last part get dynamic field display, will get data for each item of the previous step for the specific field (in this case, display). this will return: ["Joan of Arc","Marco Polo","Leornardo DaVinci"]

But I suggest you to ask to Bubble support to be sure of that. But always keep in mind that privacy settings is the key for all client side stuff. Also, some DB structure can increase a lot the security in your app. (Example: Store all sensitive Data of a user in a specific DB that only this user can have access. Even if related to current user, if you have a profile page that all user can see a user profile where data is the USER DB, if you store sensitive data in a related DB, it will be more secure).

1 Like

Thanks a lot for the explanation @Jici

My main concern was the downloading data on the user´s browser so that it can get hacked or something like that.

1 Like