Need help setting up filters

Hi!

So I’ve been trying for an hour now to set up the filters_template in my app. I looked through the forum and didn’t see any posts about the filters element, so hopefully this helps me and someone else struggling with this.

For context, I have a repeating group with a list of users and the employee resource groups (ERGs) that they are a member of. I want to use the filter element to filter the members by either first name (text input) or by ERG (checkbox list). The instructions aren’t super detailed so here’s what I have:

  1. I added two custom states to the filters_template element so users can filter by either an ERG or the name of a member.

  2. I updated the data source/type of content on the Repeating Group List element to by ERGs (not sure if this is correct or not)

  3. On the parent page, I’m not sure what data source to use for the filters_members element should be.

Admittedly, this is my first time using custom states so it’s very possible that I just don’t full get it, but I think my biggest confusion comes from how to get the custom states from the reusable element to be accessible on the parent page.

Any and all help is appreciated!!!

Hello Toby,

Thanks for trying out Canvas and sorry to hear those instructions aren’t clear.

Try setting up a workflow to change the custom state’s value when the value on the page is changed:

If only one thing needs passed from the page to the reusable element, you could also pass it as the data source for the reusable:

2 Likes

Hey Chris - sorry, I’m not following. How do I access the value of the filter_template from the parent page?

You have “When SearchBox A’s value…” in that screenshot, but where is the searchbox in your app? If that SearchBox A value is tied to the reusable, how did you access it from the parent page?

Not sure if my questions make sense. The way I understand custom states and this filters reusable, I am trying to set up a workflow that changes the visibility in my repeating group to only show things that match the criteria set by the custom state. So, in the screenshot below, if I click on one of the ERGs in the dropdown and click Update, the workflow should update the repeating group to only show people that are in that ERG. Where I’m struggling is with how to access the value of the filter’s custom state from the parent page (“home” in my app).

Does that make sense?

2 Likes

Hey @toby :slight_smile: We’ve added some documentation here on how to set up custom states on the filters_template reusable element:

https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/reusables/applyfilters

Custom states on reusable elements can be very confusing, but it looks like your setup is very close! At a high level, the steps would be to:

  1. Add/modify the group focus’ UI so that Users can select an ERG (as you’ve done already)
  2. Add a custom state on the filters_users reusable element which stores the value of the selected ERG (e.g., “selected ERG”, type: ERG, list: no). This would be similar to the documentation’s example of setting up a non-list filter.
  3. Modify the Update button’s workflow within the group focus element so that its “set state” action sets the value of Step 2’s custom state to be the value of the ERG dropdown.
  4. Back on the “home” page, update the data source of the repeating group of ERG members so that it’s something similar to “Do a Search for Users, constraint: ERG = filters_users’s selected erg”, with “ignore empty constraints” as checked. This will ensure the selected ERG custom state value filters the repeating group (i.e., any ERG, if any, that the Current User selected from the dropdown).
3 Likes

Hi Faye!

First, thanks for getting back to me and for updating the filters_template instructions. I have it 90% working now.

Is there a mistake in the instructions? For filtering a non-list, you’d want the workflow for the update button to set the custom state of the filters_template element, not the GroupFocus Filters element, right? Since you add a constraint on the parent page for the custom state of the filters_template and not the GroupFocus Filters. I couldn’t get my filters to work at first, but when I made this changed, it did work. It’s very possible that I just did something wrong though…

Also, in the instructions to filter a list, it says that the custom state should have the option for list checked, but in your instructions above, you say not to have it checked.

I tried both, and I either get an error on the parent page (it wants a single item)

Or I get an error on the filters_template Update button workflow (it wants a list of items)

Any thoughts?

Hi Toby! :slight_smile: No problem at all!

Thank you so much for catching that! I’m so sorry for the confusion; that is exactly right, the custom states are all supposed to be on the reusable element itself (filters_users) in this example, not the group focus element. This is now updated in the instructions.

In the top set of instructions, the “keyword” custom state should not be a list, since the User can only enter a single value into the “Input Keyword” element.

In contrast, the “Specializations” custom state is a list, because the Current User can select more than one Specialization in the multiselect checkbox repeating group. (This is why the “keyword” custom state has the list checkbox unchecked, and the “Specializations” custom state has the list checkbox checked).

Ah, got it! In the documentation example, Users could only have one Specialization, and the search constraint was “Specialization is in filters_users’sspecializations”. That setup had a single “Specialization” field on the User data type (type: Specialization, list: no).

This is slightly different from your application’s setup since Users can belong to more than one ERG, and it looks like the field on the User is “ERG membership” (type: ERG, list: yes). Because there’s an ERG list field on the User type, Bubble will only allow you to choose “contains” in the search constraint, which expects a single value.

If you want to display all of the Users that are in any of the selected ERGs, it may be best to adjust the data structure slightly so that you have a new data type (ERG_User, for example), which links a User to an ERG each time they become a member.

With this setup, you can display the Users in the selected ERGs using this search:

This would return all of the Users that are in any of the selected ERG; you would just need to make sure that a new ERG_User is created each time a User is added as a member to an ERG :slight_smile:

1 Like

Awesome. I’ll try that out. Thanks for your help

1 Like