Exploring horizontal lists, part 1: horizontal chip list as simple category selector

Resources & Tutorials
1

This is a first video of a short series about horizontal lists. These new awesome components greatly extends the design capabilities in Adalo, and could be used in various ways. Here I show how to create a basic version of horizontal “Category menu” with the help of horizontal chip list component and use it instead of dropdown.

Enjoy! Comments and suggestions are welcome!

8 Likes
2

Very nice! This is much better than a dropdown for sure!

2 Likes
3

Horizontal list is game changer!

1 Like
4

Hey @iron49man @pford have either of you found a work around for Adalo’s inability to inform users of their chip selection? I’ve been using List Labels, but Adalo’s latency is turning this great feature into a bad user experience

5

Do you mean changing the color of a selection or just like placing their selections as text in a new locations (e.g. filters enabled)?

6

I have the filters enabled, however the only way to “show/notify” the user that her selection has been made is to change the label of the filtered list. Unfortunately, Adalo’s speed issues can confuse the user, as the filtered lists simply don’t load immediately after clicking on a new chip…

I may test the left-hand nav to replace the chip list

7

@pford @NoCode81 did you guys manage to find a way to highlight the selected tab from the chip list?

8

Could you help me to know how I do so that in a chip list or horizontal list, each chip has a link to a specific page? I want the chips to be “categories” but to lead to the specific page for that category. Thanks a lot.

9

Hi @nachbsas,

This is not the best way to set up your app, sorry. Usually you create one screen for all the categories, and then display the information for current category on this screen. For each selected category the content will be different. You can even show/hide some screen elements based on selected category to add customization.

The result you’d like to have could be achieved by creating several (say, N) actions at this list, where each action leads to separate screen and each action is conditional. E.g. you have an action “Link to Screen X”, which happens sometimes, if current category name equals “Category X”.
But this is not sustainable for more than 4-5 categories in my opinion.

Best,
Victor.

11

hey @Victor ,

where is part 3 of this series?