Framer Update: CMS Dynamic Filters

Quick Overview

Framer's new dynamic filters feature allows users to create highly customizable, interactive filtering systems for CMS content directly within the platform, synchronizing URL query parameters with filter states for easy sharing and bookmarking of specific filtered views.

Key Points: Dynamic filters allow users to build fully customizable filtering controls (tabs, dropdowns, checkboxes) for CMS lists directly on Framer sites. The filtering system is compatible with essential input types like text search, dropdowns, checkboxes, and level selectors. Page variables are crucial for dynamic filtering, automatically mapping CMS fields (Title, Categories, Featured, Levels, Author) to query parameters in the URL. The demonstration shows setting up a 'Categories' filter using a dynamic tab component, where clicking a tab immediately updates the displayed content. Interactions can be configured on filter components (like a 'Clear Filters' button) to trigger 'Reset Variables' actions, clearing all active filters. The resulting filtered view updates the URL with query parameters (e.g., authors=pablo&categories=updates&featured=yes), allowing users to copy and share specific filter states.

Context: This video provides a tutorial on implementing dynamic filtering for Content Management System (CMS) lists within the Framer web design platform. The demonstration focuses on setting up interactive filter components, such as tabs and dropdowns, that allow visitors to narrow down content listings based on different CMS fields like categories, authors, and featured status, ensuring the filtering state is reflected in the page's URL.

Detailed Analysis

The video introduces and demonstrates Framer's dynamic filtering capabilities for CMS-driven content lists. The presenter starts by showing a blog page with various filtering options on the left sidebar, including Title search, Author dropdown, Categories tags (All, CMS, Pro Tips, Updates), Staff Picks checkbox (Featured), and Level checkboxes (Beginner, Intermediate, Advanced). The core of the tutorial involves setting up dynamic tabs above the article list to filter the content instantly. This is achieved by creating Page Variables corresponding to the CMS fields being filtered (Title, Categories, Featured, Levels, Author). When configuring the dynamic tab component, the presenter sets up an interaction on the tab variant that uses a 'Set Variable' action to change the 'Categories' page variable based on which tab is clicked. Crucially, these page variables are linked to URL query parameters, meaning when a filter is applied (e.g., clicking 'CMS' tab), the URL updates dynamically, allowing users to bookmark or share the exact filtered state. The presenter also shows how to add filters dynamically within the CMS list's properties panel, linking filter inputs (like the search bar or dropdowns) to these page variables. Finally, the demonstration includes setting up a 'Clear Filters' button interaction to trigger a 'Reset Variables' action, returning the list to its default, unfiltered state. The video emphasizes that this powerful filtering mechanism is fully compatible with both standard pagination and infinite scrolling methods.