🎉 Filter Inline Lists Using Multi-Select Choice Components!

Hey all!

I found a super streamlined way to filter an inline list using multi-select choice components.

Take a look!

4 Likes

Nice!.. I would add an option to select all, so they don’t need to unclick selections… and that would come as a selected option when you enter that screen…

1 Like

That would be slick (and preferred), but to my knowledge there’s no way to auto select an item in a choice component upon switching tabs…only when diving into a details screen from an inline list or via button press etc.

The way I’ve “solved” this is to force the user to tap a button the first time they view the tab.
This sets the default, and from that point forward there is always a value set, so the next time they return to the tab they’ll see whatever option they had selected the previous time.

1 Like

@Robert_Petitto of course there is… :wink:
simply if-else it for an empty value and replace by default value and like Daren said you can use action when entering that screen…
also in choice values, you can use empty value and assign default to it

yes, but that doesn’t actually set the value in the choice list. So even though you might have a default selected in the backend, the choice component won’t reflect that. ie. it’ll still appear as though no option is selected.

you can use empty as a value and assign default to it… but it will not show the option clicked as @Darren_Murphy mentioned you have to use previous steps to set column for default… and if you wanna show as clicked… use a PRO choice component LOL, created from tiles :wink:

Screen Shot 2022-01-23 at 12.35.30 AM

@Darren_Murphy @Robert_Petitto one-day three of us should join forces on some great project lol

1 Like

Hey, yes it’s great.
And if you want to add a “dynamic sort” dimension to your filtering.

Approach:

Dataeditor -
1/ [data sheet] List of criteria to ‘group by’ (1 column)
2/ [content sheet] User specific which will receive the choice of “group by”
3/ [content sheet] Single value (select ‘first’) on the user specific
4/ [content sheet] If-then-else to match the Single value by each value (entered manually) of the List of criteria (attention : if the [datalist] criteria are changed, even in orthograph, the change must be also done in this if-then-else → alternative: the list of criteria is 1, 2, 3, x, and a relation/lookup deals with it in the [content sheet])

Databuilder:
1/ Choice component with source [data sheet / list of criteria] and destination [content sheet / user specific]
2/ Group-by the inline list by the if-then-else of the [content sheet]

With apologies to @Robert_Petitto for hijacking his topic, how about…

…a single component to control both the list layout and the list ordering? :thinking:

The two “buttons” on the left toggle between vertical and horizontal orientation, and the two buttons on the right toggle between newest first and most liked first :grin:

3 Likes

Hey Darren I have been trying to figure out how to do this calendar for ages. Would this template be available to copy, or can you do a bit of a setup walkthrough?

What I showed there isn’t actually a calendar, it’s just a method of navigation. Can you describe what you are trying to do?

excelente estoy nuevo en glide y ya cree una aplicación y estaba pensando como hacer este tipo de lista y me gustaria implementarla en mi aplicación ya que tengo una sección de productos en la aplicación y estaría genial tener este tipo de lista en la sección de productos agradecería una explicación mas detallada para lograrlo en mi pestaña de productos hay les envió una foto de como esta hasta el momento en mi aplicación

Just with that calendar setup i saw in your project management app.

Ideally, i would like a horizontal scroller that side swipes through dates and when you pick a date the inline list below shows items with a matching date.

But what you had in that app looked perfect.

Are you referring to this?

Screen Shot 2022-10-14 at 2.13.36 PM

  • The two “buttons” are an Inline List using a tiles style with the two middle tiles hidden. It advances backwards and forwards one week at a time
  • The day selectors are a choice component using a chips layout

The screen itself sits on top of a single row helper table, and everything is user specific.
There is a bunch of Glide date math and other logic that controls the flow. Not simple to setup, and not easy to explain.

1 Like

This is the one that i wish to replicate :slight_smile:

arr, okay.

As I said, there is really no easy way to explain that except in a generic way. If you know how to configure an Inline List to work like a choice component, then that would be a good start. Then it’s mostly a matter of taking the values from the list and the choice component and using them together to figure out the correct date. And then using that as a filter. When you boil it down, that’s really all it is - but obviously the devil is in the details. And the details will change for every application. It depends how your data is setup, and the exact behaviour you are looking to achieve. I can’t really be any more specific than that, sorry.

I understand what you mean. Ive configured the list in a similar way before. But like you say it will be a matter of the details for the design. Is that particular app a template i could download?

Sorry, no. That was for a client, so it can’t be shared.

If you start building something similar and get stuck, feel free to ask and I’ll help if I can. If you do, probably best to start a new topic.

1 Like

excelente solo que no logro sincronizar el choice compone con la lista en linea seria bueno indicarlo en el proximo tutorial en especial para los que somos nuevos en glide muchas gracias