Finsweet CMS Filter

Finsweet's CMS Filter tool is probably one of their most popular toolsets.

It allows you to dynamically filter CMS data using a Webflow-designed form as your filtering controls.

You can filter on;

• Specific categories, such as #tags or product categories
• Dates, including single dates and date ranges
• Text matches, such as a partial product name

Learn more:

https://finsweet.com/attributes/cms-filter

Filter UX

Radio Buttons

The label text itself is the filtered-matching content.

Button styling and a11y considerations can be handled well using Finsweet's cloneable or library, which has a11y filter elements.

Creating an "All" button;

https://forum.finsweet.com/t/how-can-i-add-and-style-an-all-button-for-cms-filter/123

Selects

Selects as range filters

https://forum.finsweet.com/t/cms-filter-number-ranges-with-select-field/2537

Special Notes

Using Dates

Your data can contain multiple individual dates and date ranges, and Finsweet seems to handle this collection of dates well.

Finsweet supports date-range filtering in the filter, so you can filter elements that are between a from and to date.

It also allows your filtered data to specify from and to dates, so that if the ranges overlap, it's considered a matched item.

Note however, that a date range in which the start and end date are the same will not work properly.

Progressive Filtering

In complex filter setups, it may be desirable to progressively filter your UX so that your filtering options are themselves filtered.

For example, a single list of all of the cities of the world isn't very user friendly. Ideally, you'd progressively filter by continent, then country, and then see the cities just in that country.

To some extent, simple arrangements like this are possible with multiple filters.

Demo & cloneable;

https://webflow.com/made-in-webflow/website/progressive-finsweet-cms-filter

Range Filtering

Range filtering has 3 possible scenarios;

• 1-N where a single value is specified in the filter, but the filtered results specify a range which that filtered value should match
• N-1 where the filter specifies a range, but the results have single values to match
• N-N where both the filter and the data identify ranges, and matches should intersect

Three possible types of ranges

• numeric range
• date range
• alphabetic match range ( e.g. aardvark to azimuth )

Date Range Filtering Problems

Finsweet Filter currently [ 2023-07-14 ] appears to have a bug which prevents date range filtering in the N-1 scenario and likely N-N as well.

However 1-N seems fairly reliable?

Notes;

https://forum.finsweet.com/t/datepicker-cms-filter-date-format-in-french/1054

https://forum.finsweet.com/t/load-filter-with-scripts/771

https://forum.finsweet.com/t/using-load-more-with-filter/1591

https://forum.finsweet.com/t/cms-filter-api-restart-collection-of-filterable-props/689

https://forum.finsweet.com/t/using-load-more-with-filter/1591

https://forum.finsweet.com/t/trigger-script-when-using-cms-load/1601

Advanced Use

Attributes API

Finsweet offers an API, which allows you to use client-side Javascript to further extend the capabilities of loading and filtering.

https://finsweet.com/attributes/api

https://finsweet.com/attributes/api/cms-filter

https://github.com/finsweet/attributes-examples/tree/master/src%2Fcms%2Fpopulate-external-data

‍

https://github.com/finsweet/attributes-examples/tree/master/src%2Fcms%2Fpopulate-external-data

https://finsweet.com/attributes/api/cms-filter

https://www.npmjs.com/package/@finsweet/attributes-cmscore

https://finsweet.com/attributes/api/cms-load

Styling

https://www.youtube.com/watch?v=mzHG5JwqB2M&ab_channel=thelazygod

https://www.youtube.com/watch?v=qq4uM0-R5BA&ab_channel=RuairiMcNicholas

‍

‍