How to Filter Lists and Repeaters Using Facets

Introduction

Allows the user to maximize the usefulness of a list-type page by filtering data according to certain criteria. In our example, we'll create criteria to display our accounts according to their industry type and account manager.

Before you start

Have a list page to contain our facets.

End result :

Step-by-step instructions

1. Using facets in a List

a. Start by adding a 'Vertical Facet' component next to the list. It automatically wrapped in a box a text, an icon and a facet component.

b. For this example, change the value of the Text component to "Specialities".

c. Next, choose an icon or delete the element if you don't need one.

d. Then, while selected on the Facet component, select the name of the field you wish to use for filtering in the 'Field name' section of the Attribut tab. In our case, "Specialities".

Additional Tips / Notes

Note 1 :

When a Facet is added to a list page, it automatically has a “Filter Key” attribute whose default value is “list”. This is because when you add a list to a page, the “list” key defaults to the PageState with the list configuration criterion as “Field name”. So, with the “Filter Key” attribute, the facet knows what data is available to it.

Note 2 :

A facet acts like a repeater.  In other words, the values available for filtering will be displayed according to the field name chosen. The “box” under the “Facet” will repeat itself for each value. When you select this box, you'll notice that it contains data. This data will be used to configure display and selection:

2. Using Facets in a Repeater

In the following example, we'll replicate the behaviors applied by default in a list page, so that the facet can recognize our data and apply filters in a repeater. Use the key “list” in the pageState, as a list does by default. If we wanted to do this recipe in a page that already contained a list, we'd have to replace the list key with a value of our choice. Doing this would ensure that the facets would be applied to the repeater and not the list.

a. We are going to add the “behavior Save Page Data” to our “box: vertical facet” and set the “key” that will be used to define our “repeater”. Then, while in Javascript, give it the search criteria data that the "repeater" should display as value.

Event: on load

Key: list

Value Source JS: return {query: { typename: "Restaurant" }, filters: [] };

Persist mode: No persistence

b. Add the account “Repeater” to the page. And set the “behavior Set Component data using page Data” and put “list” as the Key.

c. Then add a Set Component Data behavior, with the following javascript code:

const query = data.list?.filters?.reduce((d, filter) => d.add(filter.criteria),db.createQuery(data.list?.query));
return db.search(query)

This will cause the repeater to return data according to the search criteria set in the first step (in pageState.list) and update the facets.

Conclusion

By using facets and repeaters, you can create dynamic and customizable filtering options for list-type pages. This enhances user interactivity, allowing for a more flexible display of data based on criteria such as field names and custom filters. The integration of facets with repeaters provides a seamless way to manage and display filtered content efficiently.