filters_template
Last updated
Last updated
This is a reusable element that includes a focus group for applying filters to a repeating group. No workflows are associated with this module.
This reusable contains a focus group that includes common filter UI components.
This page comes with one popup:
Popup Hidden Variables contains two groups:
var - Website object This group stores the website object (e.g., app name, primary color, etc.)
var - dummy data A placeholder group in case you want to use any hidden variable groups later.
This reusable has a state of type text
You can pass either 'dropdown' or 'icon' text upon page load. This will determine what filter style type is shown.
Make a copy of the filters_template reusable element for each type of data that you will query, and rename it so that you can easily find it when adding it above repeating groups.
For example, if you are creating a search page that allows website visitors to filter Users, your copied reusable element could be called filters_users.
This will preserve the original filters_template so that you have a blank copy for any other data types in the future.
Then, back on the page where you will use this reusable, replace the filters_template instance with the copied instance (filters_users in this example).
Within the copied reusable (filters_users in this example), add or remove any input elements in the focus group to fit your use case.
You can show or hide a section by selecting the parent group and checking/unchecking the box for This element is visible on page load.
Not all filters_template copies will need a "type of content" or a "data source" unless your filters are dynamic based on a single unique Thing's data source. You can leave the "type of content" and "data source" blank in most cases.
If you add or remove filters, please resize Group PLACEHOLDER filters to avoid overlapping with any other elements (for responsiveness).
Because the filters_template is a reusable element, we need to add custom states to the reusable element, so that the filter input values are accessible on different pages in your app.
If you don't set up these custom states, the values from the inputs will not be accessible to the parent page, and it won't be possible to use the input values to filter searches.
In the example described above of filtering a list of Users, we can create a single "keyword" custom state to filter our list of Users. At a high level, we need to:
Set up the UI for this filter (e.g., Input keyword within the group focus)
Create a custom state on the reusable element that can store the value of this keyword custom state.
Modify the Button Update element's workflow so that the "keyword" custom state value is always equal to the value of its related input.
Utilize the reusable element's custom state value as a constraint in a repeating group on a page to filter the repeating group's results.
Make sure the group focus element has the UI you need for this non-list filter. This can be any non-list input element. In this example, we'll use a standard input so that website visitors can enter a keyword and filter a list of Users by that keyword:
Our keyword input is not a list, and it is of type "text" in this example. We need to store this value in a custom state so it's accessible on other pages in the app.
To create this custom state, open the reusable element's property editor. Then click on the small "i" icon to open the reusable's Element inspector panel. This is where we can create custom states:
After clicking on "add a new custom state" Bubble will prompt you to name the state name, state type, and whether this state is a list.
In the "keyword" example, we can define these properties:
State name: keyword
The custom state's name is "keyword" which serves as a label for our custom state. Similar to naming fields, the state name can be any name you choose (e.g., keyword, keyword filter value, etc.)
State type: text
The custom state's type is "text" because the value of the Standard input's type is of type text.
List: unchecked (no, it's not a list)
This keyword filter will always be the value that the user entered into a standard input element. It is a single text and not a list of texts.
Next, click Create to create a custom state. It will now appear in that reusable list of custom states.
Now that our UI and our custom state are set up, the last step is to connect the keyword input to that custom state value. To do this, navigate to the Update button workflow:
In the first action of the workflow, click on the first action and click "Set another state":
Select the custom state ("keyword" in this example), and set the value to be its related input value ("Input filter keyword") in this example:
Now that this workflow is in place, clicking on the "Update" button in the group focus element will set the value of the custom state to be what the user typed into that input.
Back on the page where this filters reusable is, add a constraint to your repeating group which filters the repeating group by this custom state value:
If you do not see your custom state, please make sure that you replace the filters_template reusable with the cloned reusable instance (e.g., filters_users in this example).
If your filters are not mandatory (e.g., they can be left empty), please make sure that "ignore empty constraints" is checked on the repeating group:
The steps to add a list filter are very similar to the steps above to add a non-list filter.
At a high level, we need to:
Set up the UI for this list filter (e.g., Repeating Group List within the group focus)
Create a custom state on the reusable element that can store the value of a list of things (e.g., a list of selected checkboxes).
Modify the Button Update element's workflow so that the "selected list" custom state value is always equal to the value of its related input.
Utilize the reusable element's custom state value as a constraint in a repeating group on a page to filter the results.
Make sure the group focus element has the UI you need for this list filter. This can be any list-compatible input element or custom UI (e.g., a custom checkbox repeating group, a multiselect dropdown).
In this example, we'll modify Canvas' checkbox repeating group so that Users can select different Specializations and filter a list of Users by those Specializations:
By default, this repeating group's type of content and data source will display "Dummy" content. First, change this type of content to your multi-select checkboxes' type of content. In this example, we can change this to "Specializations".
By default, the RepeatingGroup List element has a custom state on it called "selectedlist". Please change this list's type of content to match your multiselect checkboxes' type of content (as shown below), and make sure the type of content for all elements within this repeating group matches as well.
This will fix the errors that popped up after switching the repeating group's type of content.
Now that the multi-select checkbox repeating group is set up, we can create a list custom state that stores the list of values that the user selects. In this example, website visitors can select a list of "Specializations", so the list custom state can be called "specializations".
Our repeating group of Specializations is a list, and it is of type "Specialization" in this example. We need to store this value in a custom state so that it's accessible on other pages in the app.
To create this custom state, open the reusable element's property editor. Then click on the small "i" icon to open the reusable's Element inspector panel. This is where we can create custom states:
After clicking on "add a new custom state", Bubble will prompt you to name the state name, state type, and whether this state is a list.
In the "specializations" example, we can define these properties:
State name: specializations
The custom state's name is "specializations" which serves as a label for our custom state. Similar to naming fields, this can be any name you choose (e.g., specializations, specializations filter, selected specializations, etc.)
State type: Specialization
The custom state's type is "Specialization" because the multiselect checkbox repeating group's type of content is "Specialization" in this example.
List: checked (yes, it's a list)
This "specializations" filter will always be the list of Specializations that the user clicked on within the multiselect checkbox repeating group. It is a list of Specializations since the User can select more than one Specialization if they would like to.
Next, click Create to create a custom state. It will now appear in that reusable list of custom states.
Now that our UI and our custom state are set up, the last step is to connect the keyword input to that custom state value. To do this, navigate to the Update button workflow:
Because this action will set the value of a list custom state and not a single value custom state, the list custom state needs to be set in its own action. To do this, click to add a new "Set state" action (Element actions --> All elements --> set state):
In the set state action, select your reusable as the "element", select your custom state ("Specializations" in this example), and set the value to be the RepeatingGroup List's "selected list" custom state value:
Now that this workflow is in place clicking on the Button Update filters element in the group focus element will set the value of the custom state to be what the user typed into that input.
Back on the page where this filters reusable is, add a constraint to your repeating group, which filters the repeating group by this list custom state value:
If you do not see your custom state, please make sure that you replace the filters_template reusable with the cloned reusable instance (e.g., filters_users in this example).
If your filters are not mandatory (e.g., they can be left empty), please make sure that "ignore empty constraints" is checked on the repeating group:
