Framer Update, CMS

Framer Update: CMS Dynamic Filters

Framer Update: CMS Dynamic Filters

Framer Update: CMS Dynamic Filters

·

7:25

·

14K views

·

About this lesson

Introducing Dynamic Filters in Framer. They bring powerful, fully customizable filtering of CMS content to your Framer sites. Setting them up is simple. Select a collection list, head to the new Dynamic section under Filters, and add options like Search Fields, Tabs, Toggles, Dropdowns, or Checkboxes. Everything works instantly, with no complex configuration needed. Each filter connects to automatically created page variables. Because filters are not tied to a specific layer, you can place them anywhere on the page for full layout flexibility, and have complete freedom in fully customizing their controls, just like you’d do with regular canvas layers. You can even add a “Clear Filters” button by resetting variables, allowing visitors to start fresh with a single click. Everything is fully compatible with existing Framer features like Empty States and Pagination. Dynamic Filters make advanced filtering effortless, and we can’t wait to see what you’ll create.

https://www.framer.com/updates/cms-dynamic-filters

Sign up: https://framer.link/yt

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:14[music]0:21Hi everyone. Today we are super excited0:24to bring dynamic filters to Framer.0:28You can now add a number of fully0:30customizable filter controls to your0:33site and viewers can then use them to0:36search for collection items in line or0:39select an option from a drop-down like0:42I'm doing here or switch categories0:45which is one of the most popular0:47filtering patterns on framer sites. All0:50of these filters are compatible with0:52each other, so viewers can narrow down0:55results to exactly what they're looking0:58for.0:59As you add filters, you'll notice the1:01URL updating with query parameters. That1:05means you can copy and share a specific1:07filtered view.1:09And we made dynamic filters compatible1:12with all the other concepts shipped in1:14frame so far, like empty states. Now let1:19me show you another example which is a1:22gallery of framer sites. You have1:25complete flexibility over the design of1:27these controls. Here for instance I'm1:30showing an icon depending on the tab1:33category. And I like to show you that1:36filters are perfectly compatible with1:38pagionation. both load more and infinite1:41scrolling1:43tabs are very popular but they are not1:45the only option for categories1:48for instance in this page they show as1:50checkboxes1:53as you can see the possibilities are1:55endless now I want to go back to the1:59first example to show you how to [music]2:02set up dynamic filters from scratch2:05let me open framer2:08right Here I have my familiar default2:11blog and I want to show you how2:14incredibly easy is to add interactive2:18tabs on top where I can filter the list2:21by category. So I'm going to select the2:24list, head to filters2:27and you notice [music] there is a new2:29dynamic menu. So I'm going under2:32categories dynamic tabs and here they2:36are. I can immediately preview and show2:40you that they work right away. No more2:44complicated setups with component2:46variants needed. They just work.2:51Now I also going to show how easy is to2:54customize them. So if I simply double2:57click, I can change my active variant3:00background color for some more contrast3:03and the text color as well. Then I'm3:06going to preview to show you that the3:08component is immediately updated for all3:11tabs. And as you've seen before,3:14components give you the full flexibility3:16of adding icons with vector sets and so3:19on. Now before explaining you how3:23dynamic filters work in detail, I want3:26to add a few more. So let me select the3:30list. Head to filters add and under3:34title pick search field.3:37I'm going to select the list again.3:41And I'm going to look for authors3:45and pick drop-down.3:48Now going [music] to do add again3:53featured checkbox.3:56And lastly, I want to add multiple3:59checkboxes for levels.4:03There you go. Our main goal when4:06building dynamic filters was to make4:08them super easy to set up. So after4:11adding all of them to your page, they4:14just work. So if you preview and start4:16typing in, you'll see the results4:19updating. Same when you change a drop4:22down or hit a checkbox, the result is4:24immediately displayed.4:27All these filters can be moved anywhere4:30on the page. They are not tied to a4:33specific layer, which makes it extremely4:36flexible to create your own layouts. Let4:40me pick one page in which I already did4:42that. Now, this is a good moment to show4:46you how dynamic filters work behind the4:48scenes. If you select one input field,4:51you'll notice it's pretty much the same4:53as a form input where you can edit any4:57style and then it's also connected to a5:01variable.5:02This variable is a page variable. If I5:06click on it, it shows with the other5:08page variables that were automatically5:10added when we set our fields.5:14Now, what's special here is that they5:16show a query parameter property.5:19which allows you to customize what shows5:22up in the address bar when you are using5:25filters.5:27Now, page variables are crucial to the5:30functionality of dynamic filters because5:34these inputs is linked to a page5:38variable and then the filters we set5:41earlier are also linked to page5:44variables. So, as you can see, page5:47variables play a crucial role. They can5:50be set by inputs and they control5:54filters.5:56This setup with the page variables5:58applies to all the controls we've been6:01adding so far. And we've seen that6:03customizing search fields, drop-downs,6:06and checkboxes is really6:08straightforward. While tabs are built6:11with components, which means each6:13instance has a transform applied in the6:16properties that checks which category is6:19set on the page and then converts to an6:22active or a default variant. And there6:24is also an interaction that sets the6:27category variable on click. While6:31speaking of interactions, let me explain6:34that they are very useful when adding an6:37action like clearing a filter. So let's6:40say I have a button with a clear filters6:43label. I can just go to interactions6:45over here and click reset variables.6:50As easy as that, when I preview and then6:53I start searching for something and6:55maybe use some additional filters that6:58lead to an empty state, I can just click7:01to clear all filters and restart.7:04That's it for this overview. We know7:06many of you have been waiting for7:09dynamic filters and we are very excited7:11to see what you will create. See you7:14online and happy building.7:18>> [music]

Watch on YouTube ↗

More in this topic

Framer Update: Logo Shaders2:05
Framer Update: Logo Shaders
Framer Update12K views · 1 month ago
Framer Update: CMS 3.04:13
Framer Update: CMS 3.0
Framer Update14K views · 1 month ago
Framer Update: Holo Shader1:46
Framer Update: Holo Shader
Framer Update6K views · 2 months ago
Framer Update: Auto Translate3:09
Framer Update: Auto Translate
Framer Update4K views · 2 months ago
Framer Update: Stack Sorting and Bento Grids2:16
Framer Update: Stack Sorting and Bento Grids
Framer Update7K views · 2 months ago
Shader: Chromatic Aberration1:56
Shader: Chromatic Aberration
Framer Update7K views · 2 months ago
Framer Convert5:42
Framer Convert
Framer Update13K views · 3 months ago
Ship websites with enterprise needs, at startup speeds0:33
Ship websites with enterprise needs, at startup speeds
Announcement8.3M views · 3 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.