(2022) Webflow CMS Filter Active Class | No-Code Attributes

welcome to a walkthrough of active classes in cms filter with attributes we launched attributes 10 days ago and we had one very popular comment request feedback item and that was how do i create an active state for my checkboxes and radios [Music] but wouldn't it be better if we could create an active class that goes on the form ui that's what this new version is and it's going to be a brand new option based on your feedback i want to have a custom active class on the filter ui elements we'll be using a new attribute called fscms filter active and you'll be able to specify the class name there are two places where you can add this attribute option number one on the field identifier so any element with a cms filter field identifier attribute can get the active class or you can apply it to the list the list that's being filtered this would be a global setting where every single filter field would get this active class so set up your field by field or set it to everything we're going to go over both of those examples in the walkthrough and before we do that let's be clear on just where this class is being added so we know we need to apply it to the field and when we add it to the check box or radio label which is where we put our identifier it's going to be added to the parent element this is what we would want as a user right we want that entire outer box of the checkbox the checkbox field to have that class so we can apply a background color a border whatever four elements that don't have any nested structure in webflow like the search input like the form select we can apply that direct on the element regardless it's always on this field identifier let's go see this visually let's see make sure that we understand this we have our active class or our active attribute name i'll go copy that and i'm going to do our first test on this makes this uh this makes checkbox section here on the label we'll see the fscms filter field make i'm going to go and add this let's call this is is active filter let's call it is active filter very clear what this is for and i'm going to show you the difference between creating a combo class of this and the difference of creating a more global style with this let's first add this div block i'll give it a class of is active filter and is active filter i can go and apply let's say a background color i'll apply this background color and let's apply a color of white excellent so if i were to apply this to the field i think we'll see a pretty big change we have our is active filter there we go that's what this looks like we have this class it's being styled like this and now we can apply this to anything in here and it's going to change what this looks like so we can do is active filter we can do it on this radio field here is active filter and this now serves as a sort of global style that we can apply anywhere this would be what i'd want to do if it was being applied to the list if this was going to be applied to every single field we have a really nice global style on this but let's go and remove this first before we get into other elements here let's test this so what i'll do is give a publish and actually i want to remove this if we keep the active class on this we'll probably see a quick flicker as we remove it from the project so we wanted to start with not active all right let's give another publish now this is what we actually want to check with and the idea is when we go and select one of these check boxes we're going to see that active class that green with white text show up on that checkbox field and on the publish page we'll see when we click volkswagen we have this background color showing if i were to clear it there we go it works exactly like the rest of the filter we can also see these check boxes working so now this is working this is exactly what we want let's now make this look a little bit nicer i'm going to go and let's say yep let's go opacity zero let's remove this let's make this look like a real active state here and let's also go and apply it to this notice how only this makes section has the active class we didn't apply it anywhere else so here does not get the active class treatment i am now going to give it the active class treatment by applying that same attribute to the label so let's go fscms filter active and that's going to be is active filter and let's publish this and we'll see both working we'll see make working we'll see fuel type working we're still not going to see any of the other ones working right this is not working this is not working this is not working and what i mean by not working is not applying the active class so on this reload we want to see make and we want to see fuel type with active class let's see what this is give a reload and let's see we have our active class looking awesome by the way this is very clear that it's active i get complete style control with that class and fuel type also working and again note how nothing else is working only the ones that we've applied this class to now let's go and apply this to the list so watch what happens when we add this active class to the list itself when this is on the list it's going to apply it everywhere all the radios will get it all the check boxes the select the search input everything is going to get this active class after we see this we'll jump a little bit into css and how we can manage these classes and we're on the published site this is working as expected let's look at this working as expected let's look at the radios working check this out that is correct this is exactly what we want this active state for everything it's applied to the list it's a global so let's now check the year there we go we have an active class on the year remove it no active and that goes for search also so i can go and search and as that is actively being searched for it's going to have that active class so list is really powerful if you want to set it up like that let's go here let's look at how powerful this can be as a combo class so i'm going to do is active filter this will be my base green this is going to be the heart and soul of the active class but for this one specifically the search field let's give it a bit of a customization here this will be black so now everything is going to inherit this active filter with the green but just this search field is going to get a different treatment a different style and this is a really nice difference in power between using your active classes as combos or using your active classes as more global as we see in the green so when this publishes we're going to see the green everywhere as we saw before with the exception of the search input and a black background we're on the publish page we see the active class and we see it's already black so we forgot to remove this combo class from it we did the styling everything worked out as we see in designer we left this class in here so i'm going to remove it it still exists in the project i'm going to republish so we can check this for real but let's look this works reset everything and this is working this is a this was the intended outcome where we have our green and oops we have our green and then we have our search and the search only is black so this was intended let's do the check here to see this working without the class applied there we go so a fresh refresh of the project and the active class is working as intended excellent this is super super powerful we went over list we went over field level please go ahead check out all of the great options that we have inside of filter there's a lot you can do here when you become a pro with cms filter you are going to be able to offer so much more to your clients to your end users so give a look at this if you're a pro with these classes you have a lot of great filter setups ahead of you if you have questions let us know we're listening we want to help you we want this filter solution to be on your next project [Music] you

Channel: Finsweet

Views: 6,613

Keywords: webflow

Id: CrBumEUQowI

Length: 10min 49sec (649 seconds)

Published: Fri May 20 2022