After reading this article, you’ll know the following:
Major characteristics and options of the Filter
The structure of this component
How to use the Filter component in your application
What is the Filter component?
Filter is a page component that simplifies data searches within data lists or tables. Primarily combined with other data components, it enhances user experience by allowing custom data filtering based on specific requirements.
For example, as you create a new page using the Back office template, you’ll have Filter above your Data table by default:
Features & common use
Combination of components: Similar to the Detail view, the Filter component isn’t just a single entity but a combination of several components: Boxes and Buttons. It can be considered more of a widget than a standalone element on the canvas
Filter: data filtering works in the same way as within Models or Actions - you have a left-hand value (properties this particular model has - ‘Name’, ‘Email’, ‘Date of birth’, etc.), an operator/comparator (‘equals’, ‘contains’, ‘exists’, etc.), and a right-hand value (custom one, like ‘John’ or a specific date/time, etc., depending on the model properties)
You can also add one more row (Add filter row button) to narrow down the results of filtering
AND/OR defines between the operator and comparator
Add filter group: when multiple filter rows aren’t enough, one can add another filter group. More about that in the Filter group sectionClear filterdeletes all the values from the filter fieldsUse the
Apply filterbutton when you’re done setting up your filter details
Commonly, the Filter component is used along with other data components. It can be linked to the Data table, allowing users to narrow down the results by category (clothing, electronics, etc.), price range, or availability. This improves data exploration and helps users find exactly what they’re looking for.
Similarly, a Data list showing upcoming social media posts can be filtered by date, author, or engagement metrics. This can be linked to a Data container displaying the details of a specific post, allowing users to quickly jump to the content that interests them most. By connecting filters to various data components, you create a dynamic and user-friendly browsing experience.
Using the Filter component
The use of the Filter component is pretty straightforward. Let’s say, we have a Data table based on the Employee model, made for displaying the details: Id, Name, Email, and Active properties. We’d like to apply some filtering on these details.
Drag and drop the Filter component to your page. Usually, it is placed on top of a table.
Follow the configuration dialog to define the data component you want to apply this filtering to. In our example, there’s only one - our Data table.
Filter options
As mentioned before, the Filter component is a combination of components: Boxes, Buttons, and Filter itself. While you can discover editing Boxes and Buttons on your own, we’ll concentrate on the Filter options.
There are two primary options: model selection and property whitelisting:
Model: select a specific model for the data to be filtered. It is usually chosen via the configuration window
Property whitelist allows you to specify a limited set of data properties that users can filter by, ensuring a focused and controlled filtering experience.
The whitelist accepts a comma-separated list of property names that exactly match the corresponding database field names.
The rest are styling options that repeat the ones mentioned in the Theme builder reference document.
The Filter component is an essential tool in the Betty Blocks platform that stands beside other data components. By enabling precise and dynamic data searches, it can significantly improve user experience and efficiency in managing data.