New Component | Horizontal Avatar List

Y’all may have noticed something new in your components menu… :eyes:

But in case you missed it — a horizontal list has made its way into Adalo!
The Horizontal Avatar List is the first of three & we show you all the ways to style it below in our latest YouTube Video :point_down::point_down:

Also, we made a cloneable kit to access all the screen examples from the video for your use! Find that here: https://www.adalo.com/cloneables/horizontal-avatar-list

17 Likes

Absolute :fire:!
Thanks Adalo team!
Implementing this right away.

That’s just wonderful. And thanks for the ready made clonable kit. That makes job so very easy…Loving it. :partying_face:

Yayyyyy thanks for the new feature!
Go team Adalo :smiling_face_with_three_hearts:

This has been in my wishlist even before joining Adalo. Thanks for implementing it so nicely.

Since I use Airtable to make lists, can I make custom horizontal lists with my Airtable data? Right now I can make vertical lists using Airtable data @KatelynCampbell

Can you put a toggle icon on the avatar of a list and have it replicate across all the avatars in the horizontal list (similar to how you would for a vertical list)? I want to put a small play circle on the corner of the avatar to indicate who is online and who is offline.

Other than that, I have put a horizonal list into a vertical list and I am able to pull the combined data of who the avatar is and other information from the vertical list. I would just like to be able to show who is online in the horizontal list.

Thank you,
Erik

Heck Yeah - Keep up the awesome work! I’m days away from publishing my first app. I found a nice home for this component.

-JF

3 Likes

So good! I’ve been hacking this for a while, this opens up sooo many opportunities

1 Like

I had a question - can we use external database with the horizontal list? When I’m using Airtable, I have to make custom lists, and they’re all vertical. But I want to make a horizontal list using data from Airtable, can that be done?

Yes this is possible. :slight_smile:

1 Like

Guys, this component doesn’t let the user scroll down.
To test it, please put this component big on the screen and the use the preview on a smartphone and try to scroll down.

Like really put your finger on the component scrolling down, the screen does nota scroll.

Yes, I guess this happens only in the preview mode, can you check in testflight?

No, in my web app is the same…

It isnt in the avatar is on the horizontal list. Sorry

Hey @Colin & @KatelynCampbell, what’s the best way to show Menu Items belonging to a Menu Item Category Avatar and/or Chip List? Many to many relationships in the DB? Link to a series of new screens based on chosen Menu Category? I know @Victor used an InternalCategory property in Users Collection, but it was based on a button selection, not one of these horizontal lists. Thanks to all!

Hi @NoCode81,

As I understand, internally these lists are not very different from custom lists (I’m speaking about filtering capabilities).

So I assume you can use the same approach.

If you elaborate a bit what would you like to achieve (and where did I use InternalCategory :)) probably me or someone else can come with solution suggestions.

Best regards, Victor.

Hello @Victor. I was referring to your instant filtering tour experiment video (InternalSelectedTour property).

My use case: Multi-restaurant ordering app, listing menu item categories like lunch, breakfast, drinks, sweets for each restaurant These categories have M2M relationship to menu items offered by the restaurant. And menu items belong to only to one restaurant.

Can we use these horizontal lists to show user available categories ten also show related menu items based on the selected category? Or can this only be done with buttons and filters or buttons and multiple screens?

Hope this helps and thank you ! Great videos, btw!!