Feature release - Short list and Selectable list

Drum roll please…

Short list (container) and Selectable list (input) elements are now live (and the accompanyig docs will be out soon!

The short list is similar to the repeating group element for web that allows you to show a short list of dynamic data on a view. Since it loads all data at once and doesn’t allow for scrolling itself, multiple of these can be added to a view. Keep in mind that for longer lists of data, it is much better to use the list view because it will be far more performant.

The selectable list input element, on the other hand, is a swiss army knife short list style element that allows you to easily create any type of picker or select form because it remembers the list state without the need to set up custom states or workflows. Since dropdowns and web style radio buttons aren’t really a thing in mobile design, the selectable list is your answer!

Feature walkthrough

Thanks for your patience on these, and excited to see what y’all build with them!

:clap::clap::clap: deployment on a Friday and last day of the month for something that has been in the works for a bit, but solves lots of use cases…

We can use this to populate options sets and customize onboarding screens, etc, or make navigation menus dynamic now with it…

Super stoked. This and location services, I can now continue my mobile app buildout.

@ramzi I believe this solves the use case of my navigation web app functionality, right?

Kudos :clap: to the entire mobile team on this one.

4 Likes

:metal:t3: sweet

Yoooohhhh :heart_eyes:

It seems that there may have been a recent regression where selectable list values aren’t appearing on Android BubbleGo. We are investigating to see if its an issue with BubbleGo or the element on android itself

2 Likes

I dont know man, i cant get anything to appear properly on android bubblego… feedback isnt giving any feedback, reviews in the play store arent getting any responses… the only one im hearing from in this beta is you nick. Which is why youre awesome

1 Like

I’m testing these features and I have to say they’re fantastic. They arrived at the right time. Only one doubt: if for example I wanted to change something in my database, and I took the user to an editing page. Is there a way to select directly on the selectable list the choice you have in the database?

:partying_face: :drum: :drum: :drum: :drum: :drum: :drum: :partying_face:
Hell Yeah!!!

I’d really love for these lists to scroll properly. Horizontal lists should scroll when you swipe them left to right with your finger. Vertical lists should scroll when swipe up and down. None of my lists scroll properly but I’m on webview only so im not sure if this is working in mobile.

@nick.carroll

Hi, are there any plans to include these 3 items?

1 - Search box

2 - Dropdown menu

3 - Select date range

Transforming my web application into a native app, I’m “stuck” due to the lack of these 3 features

Same question on the first point, only I would add that it would be good to fix the formatting of the input. Geographical addresses and numeric formats don’t work as expected.

As for the dropdown element, it seems to me that this is more related to the UIMenu on iOS and ContextMenu on Android devices, that is provided by the OS and as a consequence it is harder to customize on the Bubble side.
That’s why we are all using Sheets for now

And as for the date range, if you need to move forward, you could probably make this from two date/time pickers and a custom state

Not saying that this is how it should be long term, but with the selectable list/short list items I’d think you could sort of hack a searchbox for the time being if you needed. Have an input above a short list/selectable list that’s conditionally shown when the input has a value which then searches your DB for the desired results based on whatever fields you want to look at.

On the date range side of things, you could simply have two date picker elements. In my opinion this provides a better UI than having an actual single range input.

For the Dropdown, you could also sort of hack the selectable list UI to make it work like a dropdown. Show a group that says “Select One…” and when it’s clicked, show your selectable list below it.

Again, I think there’s room for more input types in the future but for now this should get you further along than just feeling stuck! Hope it helps :slight_smile:

Yay!

How “short” does a short list need to be?

Or to put it another way, how long can they be? What’s the limiting factor on their length?

1 Like

Is it expected that text won’t wrap if it’s set to Fit width to content is checked?

(It wraps if Fit width to content is unchecked:)

1 Like

Great question, i was also wondering how many items this can show and is it scrollable

There is no technical limit, but since it loads all items, you’ll notice some performance issues the longer the list gets. I’d recommend keeping the total number of items below 20. I think if you are using the short list for much more than that, you should really be using a list view.

If the short list is longer than the view or sheet it’s on, the view/sheet will scroll. This container will not scroll within itself.

Correct! The most common pattern is to have the search happen in a modal or full screen sheet, as the focus of that view. This way you can display the list of items and put the search input at the top of the view to filter the items using a constraint on the database search. The Google Maps app is a good example of this. When you click search, a new view is opened. It really is not a mobile pattern to have an inline “dropdown” or search like it is on web.

The only time “dropdowns” are used are for context menus where only a few items will show - but this is a separate native element.

1 Like

Is there a way to set a default value or default values?

Am I missing this? Pretty important to have the previously chosen settings selected sometimes.

Also, is ‘reset relevant inputs’ missing?

It seems we have zero control over the selected option. Other than refreshing the entire view, is there some other way to update the selected value?

2 Likes

That’s what I’doing in my app @nick.carroll and when clicking on a choice I set the property to the view and then I have a button “apply my filter” that goes back to my list view with the selected filters as properties. My problem here is that I cannot reset the properties of a view if I want to clear my filters…, at least not by setting a property with empty values. Is that a bug?