# 🎉 Filter Inline Lists Using Multi-Select Choice Components!

**URL:** <https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566>\
**Category:** Community Resources\
**Tags:** tutorial\
**Created:** [January 23, 2022, 4:23am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566 "2022-01-23T04:23:58Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 23, 2022, 4:23am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/1 "2022-01-23T04:23:58Z")

</div>

# Hey all!

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

Take a look!

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/3/a36de7f79d84a25c639ffd2dfb909bd7dc8a12b6.jpeg "Glide: Filter an Inline List with Choice Components") ](https://www.youtube.com/watch?v=NOYFsVUWQXw)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 23, 2022, 4:37am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/2 "2022-01-23T04:37:05Z")

</div>

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…

 ![Screen Shot 2022-01-22 at 11.40.48 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/9/b920e05a4e187bb44a69a5062ef0c4e987ca335b.jpeg)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 23, 2022, 4:49am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/3 "2022-01-23T04:49:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [January 23, 2022, 5:04am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/4 "2022-01-23T05:04:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 23, 2022, 5:12am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/5 "2022-01-23T05:12:11Z")

</div>

@Robert_Petitto of course there is… 😉  
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

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [January 23, 2022, 5:14am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/6 "2022-01-23T05:14:29Z")

</div>

> [@Uzo](#):
>
> simply if-else it for an empty value and replace by default value

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.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 23, 2022, 5:16am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/7 "2022-01-23T05:16:29Z")

</div>

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 😉

[![Screen Shot 2022-01-23 at 12.35.30 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/6/c616e1d3a9cf3824ed3253dcbfd1ff928d6a6a69.jpeg)](https://time-duration-demo.glideapp.io/dl/ewAiAHQAIgA6ADAALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AVABpAG0AZQAgAFAAaQBjAGsAZQByACIALAAiAHIAIgA6ACIAUgBGAHAAWQBiAEkAcgBHAFEATAA2AEwAYwB6ADcAMABiADAAQQBzAHcAQQAiACwAIgBuACIAOgAiAFQAaQBtAGUAIABQAGkAYwBrAGUAcgAgAEEATQAvAFAATQAiAH0A)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 23, 2022, 5:41am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/8 "2022-01-23T05:41:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [January 23, 2022, 7:31am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/9 "2022-01-23T07:31:31Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/e/befb539e003c315a8f2a0d2632dbe9dc6474ab4f.png)

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]

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [January 23, 2022, 9:54am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/10 "2022-01-23T09:54:02Z")

</div>

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

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

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 😁

---

<div class="post-metadata">

**Author:** ![Dale\_Nelson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dale_nelson/32/18650_2.png) [@Dale\_Nelson](https://community.glideapps.com/u/Dale_Nelson)\
**Post date:** [October 14, 2022, 12:02am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/11 "2022-10-14T00:02:51Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 14, 2022, 12:47am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/12 "2022-10-14T00:47:59Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![estebandelgado](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/estebandelgado/32/46258_2.png) [@estebandelgado](https://community.glideapps.com/u/estebandelgado)\
**Post date:** [October 14, 2022, 1:46am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/13 "2022-10-14T01:46:26Z")

</div>

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

 ![2022-10-13](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/9/a97d4105222d0b3e299495ad6ed5ab3b3ea37a06.jpeg)

---

<div class="post-metadata">

**Author:** ![Dale\_Nelson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dale_nelson/32/18650_2.png) [@Dale\_Nelson](https://community.glideapps.com/u/Dale_Nelson)\
**Post date:** [October 14, 2022, 6:12am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/14 "2022-10-14T06:12:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 14, 2022, 6:19am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/15 "2022-10-14T06:19:42Z")

</div>

Are you referring to this?

![Screen Shot 2022-10-14 at 2.13.36 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/4/14352175f599bd59199bc6911d683369809766fa.png)

- 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.

---

<div class="post-metadata">

**Author:** ![Dale\_Nelson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dale_nelson/32/18650_2.png) [@Dale\_Nelson](https://community.glideapps.com/u/Dale_Nelson)\
**Post date:** [October 14, 2022, 6:31am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/16 "2022-10-14T06:31:08Z")

</div>

This is the one that i wish to replicate 🙂

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 14, 2022, 6:43am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/17 "2022-10-14T06:43:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Dale\_Nelson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dale_nelson/32/18650_2.png) [@Dale\_Nelson](https://community.glideapps.com/u/Dale_Nelson)\
**Post date:** [October 14, 2022, 7:26am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/18 "2022-10-14T07:26:06Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 14, 2022, 7:44am UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/19 "2022-10-14T07:44:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![estebandelgado](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/estebandelgado/32/46258_2.png) [@estebandelgado](https://community.glideapps.com/u/estebandelgado)\
**Post date:** [October 15, 2022, 1:17pm UTC](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566/20 "2022-10-15T13:17:03Z")

</div>

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

[Next page](https://community.glideapps.com/t/filter-inline-lists-using-multi-select-choice-components/37566.md?page=2)
