# How to use a Select on a Collection?

**URL:** <https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000>\
**Category:** How do I?\
**Tags:** select\
**Created:** [June 9, 2023, 3:06pm UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000 "2023-06-09T15:06:18Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Francesc](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/francesc/32/2988_2.png) [@Francesc](https://community.weweb.io/u/Francesc)\
**Post date:** [June 9, 2023, 3:06pm UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000/1 "2023-06-09T15:06:18Z")

</div>

Hi, I’m trying to use a select element, loading a specific field from a collection (want to show all the customers’ names).

I follow indications I found on documentation, using function rollup as indicated, but I keep getting this error:

 ![CleanShot 2023-06-09 at 12.02.06@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/a31c1cd583801a2bc347f318d292d3681853954d.jpeg)

If I only bind the collection, without the formula, I do not get the error but then list is empty. How do I load a collection into a select?

Thanks

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [June 9, 2023, 4:04pm UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000/2 "2023-06-09T16:04:33Z")

</div>

Hi @Francesc 👋

Thanks for your question, it inspired me to record a [new video tutorial](https://youtu.be/8e3-qvGb1ms) on the topic!

It covers:

- how to bind the select options to a separate collection (not your use case but thought I’d show it anyway!)
- how to use the rollup formula to create a list of options if you don’t want to load a separate collection (hopefully that answers your question!)
- how to add a frontend filter so the select filters through the collection based on the select component variable

Does that help? Don’t hesitate to let me know if anything is still unclear 🙂

---

<div class="post-metadata">

**Author:** ![Francesc](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/francesc/32/2988_2.png) [@Francesc](https://community.weweb.io/u/Francesc)\
**Post date:** [June 9, 2023, 4:41pm UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000/3 "2023-06-09T16:41:35Z")

</div>

It works. First it did not , when typing the formula name (no type mismatch) but, when I picked it up from the formulas part, it worked

---

<div class="post-metadata">

**Author:** ![Francesc](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/francesc/32/2988_2.png) [@Francesc](https://community.weweb.io/u/Francesc)\
**Post date:** [June 9, 2023, 4:57pm UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000/4 "2023-06-09T16:57:55Z")

</div>

I have a twist. My collection is composed by hours logged by freelancers. One field of the main table (hours) is project id, which is linked to project tables, and from there to customers table, where the customer name finally is.

My collection has all the joins, and I can show data from any of the 3 tables in the table. BUT, when I go to filter by customer name, the option filter only shows filed from the main table; I cannot select the customer name, which is on the joined one

 ![CleanShot 2023-06-09 at 13.55.25@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9f5e33498ce2b907f893f9bc0c00345caacd9495.jpeg)

But the name is there

 ![CleanShot 2023-06-09 at 13.57.23@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d3af77f39c46ebb3249bd5701d08d0143f9a701b.jpeg)

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [June 9, 2023, 5:28pm UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000/5 "2023-06-09T17:28:03Z")

</div>

Great video thanks @Joyce! I just implemented this.

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [June 9, 2023, 5:36pm UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000/6 "2023-06-09T17:36:03Z")

</div>

I added ‘sort’ to the formula so that the select list values are in alphabetical order:

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/db380ff91fa40692ec5687a7c6e667f08e126655.png)

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [June 9, 2023, 10:53pm UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000/7 "2023-06-09T22:53:45Z")

</div>

Nice touch! Well done, @Dorian 👏

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [June 9, 2023, 11:00pm UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000/8 "2023-06-09T23:00:39Z")

</div>

> [@Francesc](#):
>
> My collection has all the joins, and I can show data from any of the 3 tables in the table. BUT, when I go to filter by customer name, the option filter only shows filed from the main table; I cannot select the customer name, which is on the joined one

Got it!

2 questions:

1. What was your rationale for adding the info of the project\_data and customers to the Freelance\_Hours collection instead of creating 3 separate collections and using the `lookup` formula in WeWeb to link the 3?

There’s no right or wrong answer, just curious as to your reasoning because the solution I have to offer _may_ involve having those 3 collections in WeWeb but I would prefer to avoid loading the same data twice if I can avoid it 🙂

1. Would you mind if I had a look at your project and created a test page to try things out?

If you don’t mind, can you send me the link to the project in a direct message and, if needed, the login details for a fake user to test things out? If it’s not possible, I’ll try to recreate a similar use case on my side, no worries. Just thought it might be easier to try with your specific setup 🙂

---

<div class="post-metadata">

**Author:** ![Francesc](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/francesc/32/2988_2.png) [@Francesc](https://community.weweb.io/u/Francesc)\
**Post date:** [June 12, 2023, 12:01pm UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000/9 "2023-06-12T12:01:46Z")

</div>

Hi Joyce. Sorry for the late answer, but I’m travelling in Argentina and been off the grid for few days.

Answer to question 1 is because I did not know better 🙂 I did not know I could join the collections in WeWeb and thought data had to come from Xano. I’m doing my best but still a rookie. That was the only reason.

I’ll send you the connection details in DM

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [June 12, 2023, 12:43pm UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000/10 "2023-06-12T12:43:01Z")

</div>

> [@Francesc](#):
>
> Answer to question 1 is because I did not know better 🙂 I did not know I could join the collections in WeWeb and thought data had to come from Xano. I’m doing my best but still a rookie.

Haha it’s not necessarily a bad approach 🙂 Just wanted to make sure it wasn’t intentional in case the only solution I find requires the 3 collections and lookup approach.

Thanks for the DM. I’ll take a look asap!

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [June 12, 2023, 5:17pm UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000/11 "2023-06-12T17:17:33Z")

</div>

Alright!

This will do the trick on a collection that is not paginated in the frontend (instead of using the “Filter” toggle, you use the `filterByKey` formula:

 ![CleanShot 2023-06-12 at 19.09.49@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f183fd0cb3eb3428c9b6e0de0ee254c03ccf703a.png)

If you try this in your project @Francesc, you’ll see it works for a couple of customers (the ones that appear in the first 100 items of your collection. This is because your collection is paginated, which is a good thing because you don’t want to render too many items on the same page.

All this to say I need to think about your use case some more 😄

Would it be ok with you if I created a dummy page in your project to test out some things?

---

<div class="post-metadata">

**Author:** ![Francesc](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/francesc/32/2988_2.png) [@Francesc](https://community.weweb.io/u/Francesc)\
**Post date:** [June 12, 2023, 5:52pm UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000/12 "2023-06-12T17:52:44Z")

</div>

Wow! I would be honored if you play around!! This will be an internal tool, not a customer one, so freelancers can log their hours and we can pay them and bill customers easily. So there is no rush.

In addition, I’m traveling again abroad until end of July to Mozambique with very bad internet connection, so I might be disconnected a bit (my day job is at Medecins Sans Frontières). So honored to have your help but no need to rush.

Thanks again

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [June 12, 2023, 5:55pm UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000/13 "2023-06-12T17:55:17Z")

</div>

Awesome! Thanks for letting me know it’s not urgent, really appreciate it! 🤗 In any case, it’s on my to-do list to find one or two viable solutions for you 🙂

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [July 12, 2023, 2:13pm UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000/14 "2023-07-12T14:13:56Z")

</div>

Hey @Francesc 👋

I’m heading out on vacation and won’t have time to look further into this before you get back 😕

2 thoughts:

1. you might find the solution for this in the new “Ticketing app” template that comes with the level 2 of the WeWeb academy. This [video on backend filters](https://academy.weweb.io/scale-your-web-app/backend-filters/) and in particular around minute 14 might help

2. if you’re open to sharing your work in public, it might be a great use case to work on with @flo and @Quentin during the next Office Hours

---

<div class="post-metadata">

**Author:** ![Francesc](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/francesc/32/2988_2.png) [@Francesc](https://community.weweb.io/u/Francesc)\
**Post date:** [July 13, 2023, 5:37am UTC](https://community.weweb.io/t/how-to-use-a-select-on-a-collection/3000/15 "2023-07-13T05:37:56Z")

</div>

Hi Joyce, regards from Mozambique.

I will check the template as soon as I get back to civilization, early August.

Regarding the Office Hours, I do not know exactly what is it, but I would be honoured to share my work with weweb. My only problem is that, until my current commitment with Medecins Sans Frontières ends on March next year, my availability is quite hectic. I’m coming back from Moz on August 3rd and I’ve already been told I’m going back to Ukraine early September and Soudan after that.

But, if we manage to match agendas (and my proximity to a reliable internet connection), and I’m able to work a bit on my portal, I would love to get insights from you.

Enjoy your holidays and take a break, you’ve been a busy bee lately producing videos 🙂

**Francesc Box**
