Advanced Element Filtering ❺
Filtering any element or Collection List using custom logic.
Webflow has a powerful conditional visibility feature, however it falls short when you have complex or dynamic rules.
SA5's advanced filtering allows you to filter any element using a simple JavaScript expression or evaluation function.
Use Cases
Here are a few ways you could use it;
Display certain elements only between certain hours of the day, certain days of the week, months or seasons of the year, etc.
Show employees who have a birthday today, or this month.
Demonstration
Getting Started
First, add the library as detailed in Quick Start.
Add the attributes below that you want for your desired behavior.
Attributes
The basic approach is to attach the filter attribute to the elements you want to conditionally display, and then add simple JavaScript logic that is evaluated.
Elements will be displayed If the evaluation returns true
.
wfu-filter-match
attribute
wfu-filter-match
attributeSpecify a CSS selector to match. If the element matches the selector, the element will be displayed. This is most powerful when paired with Webflow's CMS-bound custom attributes, and an evaluation string.
For example, suppose your CMS items have a numeric field indicating the day of week. In JavaScript convention, 0 is Sunday, 1 is Monday, through to 6 is Saturday.
If you store that number in a CMS field and then bind it to a custom attribute, you can easily create a custom attribute on your Collection Item of e.g. weekday
= 2
You can then use the SA5's match filter attribute with a CSS selector and a JavaScript template literal, create a match filter like this;
This indicates that the element should be displayed IF the weekday attribute is equal to today's weekday number, according the the visitor's local system clock.
The constructions can be complex as they involve 3 combined syntaxes;
CSS selectors, which are very powerful. In this example, our selector takes the form
[weekday='2']
which matches all elements that have theweekday
attribute, with the value2
.Template literals, the
${
...}
part, which allows us to embed evaluated JS content such as today's weekday.The JavaScript expression, in this case
new Date().getDay()
which returns today's weekday number 0 - 6.
This feature is useful in very compact situations where your filter-match expression is concise. If it gets long or complex, use wfu-filter-func
instead.
wfu-filter-eval
attribute
wfu-filter-eval
attributeSpecify a formula for evaluation. If it evaluates to true, the element will be displayed.
Best used for short and simple expressions.
wfu-filter-func
attribute
wfu-filter-func
attributeUse wfu-filter-func
to call a function you define, and to pass in the element as an HTML element. From there, you can perform any checks or calculations you want and then return true
if you’d like the element to display, or false
if you want to hide it.
And then define a function by that name, e.g.;
Here's another example that filters based on an in-text match;
Make sure to give it a single parameter, as it will be passed the element you are evaluating in the filter. The evaluation function you create must be top level, so it will be referenced from the window
object.
Last updated