Learn it Live - Attributes CMS Filter

all right ready set let's go what's up everybody welcome back we actually welcome back i don't know this is a new segment learning live here we're just gonna jump in and uh you know this attributes product launch happen at no code conf we've been building filter systems and kind of explaining the flexibility of the system and so we're excited to go through this and kind of walk through some builds inside of webflow inside of your sites right community submitted sites so joe talk to me a little bit what are what are we going to go through today we are going to implement attribute cms filter on four different websites and these are people from the community people that are constantly showing up to finn suite events uh fin suite live streams and one of our live streams we posted a link for people to submit their filter sites these four people were selected and we're going to rebuild filters and attributes it's going to be super super educational today yeah yeah and i'm excited we're trying something new again we've got the folks uh kind of waiting on hold here so we've got a queue of uh people hanging out and i think we're just gonna dive right into it we've got um let's say what's up to everyone in the comments first we always do that there's a bunch of people here with us so what's up go ahead and say hi in the comments here let's do this little thing and we could actually run some of these what's up daniel um good to see you here christian uh armando what's up maria hey maria caleb's in the house what's up caleb and jay aditya's here uh joshua what's up louis tomlin hello everybody we're gonna get deep into attributes today so let's bring in our first guest let's go to this shot here uh pepsi to net what's up tom shane grady in the house hey what's up everybody we will continue to uh to have those up and and we'll let you ask comments and share thoughts as we go here but uh right now let's say what's up to uh justin justin say hello just let me unmute my mic and say hello everyone there you go what's going on not much just excited just kind of see how this works and uh go from the cms filter to the new attribute on my site here nice okay well joe i'm gonna let you drive it from here and i'll be interacting with the crowd if anybody has any thoughts or questions as we go feel free to leave those in the comments and i'll bring those up throughout the course of the show otherwise um joe you're up cool okay the first thing that we're going to talk about are new updates to the system we have some really really juicy updates to cms load so before we get into justin's build let's go over these the first update you'll see in the docs is speed boost overnight we have supercharged our cms load functionality and now it is significantly faster with just this one step and this one step is just enabling show page count inside your cms list so with this this single step you you are now able to greatly increase the speed of your load time so that's going to help with filtering it's going to help with just getting the information ready to to work with on the site so really big update there we're going to actually implement this on the the walkthroughs yeah okay i was going to say can you explain that a little bit more what's that doing would it show page count that's a feature in webflow their native pagination lots of people turn it off because you know whatever i don't want to see the count but tell me why turning it on what that's doing and how that's really um giving us the performance enhancement here absolutely this is a native web flow setting so when you go and put a collection list on a page and then you go and enable pagination when you click on that next button in the settings panel you have the option to show page count and this is going to put a new element on your webflow site and that is going to be the page count one of ten two of ten three of ten and as you continue going through the pages the page count jumps the reason why we can now increase the speed of your site with this new page count is to understand how many pages we have to load so instead of loading one page and checking loading one page and checking for another one and just one by one seeing how many pages you have you're actually telling us how many pages you have immediately so if you have 20 pages we can see that you have 20 pages and load all 20 right away super super performant we're seeing amazing amazing improvements to how our cms load functionality works it exponentially improves so i believe it is every four pages you see a 100 percent increase in load time so if there's four pages in your list it's a 100 increase in load time if there are five if there are 20 pages in your site it's a six that's a lot of math this is locked yeah we'll let you could do the math we're going to post this in the docs the point is there's huge speed improvements and this is now live so we're going to go over this live in the walkthroughs but this is a big update from us really excited about it nice we also have another update which is not inside the docs right now we're going to update it today and that is you can now use load under and infinite with cms filter so we have this little option here this option is recommended when using load more with filter on pagination we're going to remove this because now it's going to work with load under and infinite that means you can have this load under functionality where you have the load more button the post will load underneath but you're able to filter the entire list not just the ones that are there same thing with infinite so this could be a really really nice upgrade for some people that want a certain user experience nice and then the last update is we have released an updates page and that updates page is a very transparent log of everything that we are releasing everything that we're working on so you can see that we just released our beta and the beta was that speed improvement and we talked about that right here we it's just super transparent it's like the developer notes we have linked this with github and this is actually using attributes filter so you can search anything you can cert you can filter by solution you can sort uh and and this is coming right from github so you have direct access to what we are working on on the technical side awesome okay i think that's it do we have any comments or questions from the crowd before we get into these live builds we did have this one this uh high all fs attributes is blowing up on all webflow communities from discord slack twitter flux and many more 100 getting great response from the community that's why we're doing this live to show y'all the flexibility how fast it is and then also to re-emphasize that this is available to all webflow users for free so um yeah and then it says i've been waiting for the load under update nice all right so let's get into it let's uh pull up just in sight here okay here we are justin's site find a doctor near you we're going to be searching by last name and we're going to be searching by state so we have a text input and we have a form select we're going to go through add the attributes for this and we're going to go and watch it live let's go into the docs for cms filter the first thing i want to do here is copy my script go and put this on the head of the page okay so now when we go and put attributes on the page they will be recognized from this script and this save button is taking a bit of time here while we're waiting we have a question from fmrgz curious how do you plan to monetize this fabulous solution right now no plans to monetize this solution this is purely for community engagement for marketing for our own agency work so no plans on that for now okay we have it in the head that did save correctly now let's go and apply our attributes i'll go to the docs and the first thing i see here is the list you can see we've broken up this setup required for minimum setup and that's exactly what we're going to do first the list the filters and the field identifier so we'll start with the list i'm going to copy this and we're going to put it on the list element so i go back to this page this is the list that i want to go and filter by so i will add it here and this is my list great next we have the filters i'm going to copy this we have filters as the value and this is going to be a form surrounding the filter ui now justin has went and set this up before this video and i'm going to show you what the structure looks like we have a form block here this is a webflow form block you can see from the form settings here and inside we have the form ui these are the elements that we will use to go and filter the list so before we get to the elements we're going to put an attribute on the form element so we we will call this the filters spelled correctly the biggest issue that we're seeing in the community is misspelling be very careful about spelling it will get you so we have cms filter element filters just like it says here cool so now our form is is connected now we need to link the form ui to the list so let's see what this is fs cms filter field identifier so we need to tie together the search input and the field that it should search for we need to put the select input and figure out the field that it needs to search for so just like this we are going to go into the build i will do let's do first the select field and this has a legacy cms library attribute we'll go and remove that we'll call this filter field by state excellent and we're going to do the same thing for the state now notice how we have a diff what looks like a different format initially md and full state names it all matters what the value is so this is actually correct here dc ca z and it's going to filter by this type of info perfect so we'll put that same exact attribute here so fs cms filter field state and we have the matching state right here this is now creating a relationship between this all these options and this text field in here oops let's go right into the search this is going to work and let's go and do the same thing we need the same exact step here hey joe real quick too can you let people know what work was set up ahead of time i'm seeing some of those extra attributes in there and like um can you just make sure we're explaining if anything was done ahead of time or what what those other attributes how they got there so that people are clear on that and the audience watching sure the the only thing that was done was added this form block around these elements these attributes that are still here are from the cms library setup so justin had cms library installed we had the filter by attribute here we are no longer going to use that so i think this is just something that was not removed from the the copied page and yeah just the form that's the only thing we asked every single person we're going with today to just wrap their things in a form element and make sure that we are filtering with form elements right cool okay so i'm now going to go fs cms filter field and we're going to let this search by state we're also going to want this oh no we're not searching by state sorry this is last name that's that's what we're searching for cms filter field last name so now we have a new element to add here we need to link this search field to the last name so i will go and do the same field last name and this last name is targeting the class there right the class name of that element no it has absolutely nothing to do with the class name good question we can call this last name is awesome and i'll go and change this to last name is awesome great so has absolutely nothing to do with classes the only time you work with classes and attributes is when we give you an attribute to add an active class which is not the case here that's what i wanted to clarify it's that it doesn't need to call what's happening there it's just what you set as that attribute and the initial one is what you have to you're just basically connecting two dots that you're putting on the page there exactly exactly okay so i've put a publish through and this should work we have our list in here we have our filters uh we have our field identifiers and let's see ah okay hold on we have some pagination in here this is something we need to check for now i'm just going to i'm just going to watch this working but this is only going to search through the first set of pagination items so let's look at this we have acuna we have atoms massachusetts okay where can we find some people here okay new jersey new jersey okay so this is actually not working right here i do not know why nj this is md is there anything with um because i still have the um the old cms library stuff on the page would that be messing it up i don't know oh maybe oh there's load more on here okay yep let me remove this it's good that we see this stuff because i'm sure people are going to have these as they make this uh you know as they make these transitions as you make this stuff like that's part of the fun of this whole system is troubleshooting as you go like that's that's what this whole no code thing and building is about is really just figuring things out as you go here so if anybody's watching this you're getting a real life example of how this stuff usually works hey connor's saying it wouldn't be a live demo if it actually just worked that's right that's right we always got to run into some little stumble connor knows that uh all too well he does a lot of live demos and builds in real time so got hard in the house go ahead that did seem to be the issue now this is searching much more reliably we're getting all the results that we need and that's why i wanted you guys to help with my first uh conversion yep okay so search works good so we should put in the docs you need to remove cms library they don't work on top of each other they shouldn't work on top of each other and you can see delaware we are now reliably searching for de montana we are reliably searching for montana pennsylvania and so on nice now we are only searching through the first 100 items as of right now because we do not have our cms load implemented on here there are more than 100 items and in that case we're now going to implement our load functionality and then we'll be able to search and filter through all of the items regardless of how many pages there are okay so let's go and now copy cms load to the page and we'll go into load doctor search let's go and add this now we go into load and we want to add a list so look at this very similar but different cms load element list and we're going to apply that to the same exact list that we have this filter on this is the list great we do need to make sure pagination is enabled which it is that's good and is there anything else we have to do justin would you like the speed boost can we help you with the speed boost all right you got it i need like a let's go up here sound effect we're going to go and select this next button and we're going to show the page count that's it this just needs to be on the page we don't have to apply a class to it we don't have to apply an attribute to it i'm actually going to hide it it's not part of the design we don't need it on the page we just have it so now you have you have a more efficient load almost by 100 just by adding that element there excellent uh and let's see what kind of mode do we want on this load justin would you like pagination this can be changed also pagination load under infinite i kind of want to do the either the load under or the infinite i think right now it was using uh it was kind of a it was kind of like infinite but not exactly the same um but i think uh because it's filtering by everything i think load under would be great okay cool so this is going to be right up to the minute here we just pushed the update for this about an hour ago to be able to use filter with load under so if the cache of our the cdn has updated this will work if not we'll test with pagination which is definitely going to work so we have our fs cms load mode and this is going to be load under so let's go and push this let's see how this works and you'll start to see the value of this is that like the names are all going to be consistent so as you start learning this stuff you're not going to need to go to the site the documentation anymore you're just going to start remembering you know cms filter cms load what do you want it to do load under oh okay and people yeah you'll just this will just become part of the workflow here and you'll just bake it into the cake at your building that's exactly correct i've been using it for about two weeks now and for the minimum setup for every single attribute solution i do not need the docs i go into the dock still when i need to look at the deeper options and and some of the other things that we can do but yeah it it really is easy to catch on to okay so now we're going to search um i don't know how to search to find something on the next page okay yeah i there's one that's like a root below like r-u-p-o-l-o that should be near the bottom it should be alphabetical by last name okay we have load under oh okay right so yeah this is it this is hard to test exactly how it how it's working without knowing an item on the first page of an item on the second page right i think um that rupaulo name though was coming up on that first view there and i and like you said it was probably going to be loaded in a later like if it's alphabetical that would have been loaded towards the end of that batch yeah it's alphabetical by last name so i should have been on one of the later pages there we go okay yep this would be on the last pages so this did work load under and we see the load under working right this is actually loading items underneath and we have successfully searched and filtered items from page two and page three we see those z's down here which were com which were showing in the original load and so this is all working yeah and tenet was asking what does load under mean you just explain that there so to net that just means it's loading under the existing listings it's um yeah bringing those up and we'll search for this again if i go and search for the z we have now returning in the search alan saying holy i just turned on the speed boost in my collection uh loaded 200 items instantly wow nice yeah i can see just with what you're doing here this is loading so much faster than it was um and it's not a giant list but it's it's so much faster just i can see it yeah awesome this is awesome so justin do you have any questions you're all set up you're ready to to go live with attributes i don't have any questions but i definitely learned to make sure to remove the um the cmf library good all right yeah thank you very much okay thanks justin yeah that's that's soon super cool um hang on who who's next i don't remember who's next on the list penny's next penny okay awesome that was great uh thanks for hanging with us justin and again we have the folks on the um on the stream here just so that they can answer any questions in real time and we can make sure uh any any issues that we have with the site as we're working on this stuff we can chat with them so um and this helps us experiment because we're we're experimenting with some like call-in stuff and so some live calling stuff so we'll see if uh this is the answer for that but uh okay what's the next setup actually i had one i had one question i wanted to bring up here uh joe there was okay can the drop down list also be a cms item a cms list or would that break attributes no no that can work and i want to say that there's one of the ones that we're doing today that has that set up drop down list inside the drop down list you can put a cms list inside that cms list you can put your check boxes or radios or or anything so yeah that is possible nice okay uh desean amazing can we add cms items to the filter inside select i think maybe that's a variation of the same question or no i don't i don't yes we can do that and that is a separate solution and this can be used for anything it can be used for your filtering it could be used for form submissions and that's cms select so what this is going to do is allow you to choose a text value inside your cms collection list and then your select element and it's going to populate the select element for you and that select element will be dynamic so yes and this works with cms filter with cms sort the whole thing nice yeah armando saying it right here yesterday i set it up in less than five minutes it works amazing uh yeah that's the whole thing i'm so thankful that you guys release these amazing solutions i've used the cms load cms filters on the current site i'm building it works amazingly great i'd love to see that um okay great uh oh one one more that i wanted to get to i was curious if you could style radio buttons and check boxes more like buttons and still have it work in attributes i think that was something we were talking about internally um yeah a lot that's something lots of people are asking yeah absolutely we can and we can look at that today i think there's there can be definitely an opportunity where we look at completely removing the look and feel of a check box and radio we have a new option for active class and with this new option of active class you really can make this look however you want nice nice okay i'm bringing up penny's site right now great uh i'm almost there let's see uh is it possible to set a default filter for a drop-down or checkbox for example ah this is um i think you can yes you have to use url parameters this is active and available in the docs you can see that uh i assume what you're asking there is that you can you know load a page with a certain set of filters applied yes this is possible yeah you can also use the native start checked button that's another option if you're using check boxes you can say this one starts checked and we are going to respect that setting that you've set in in webflow nice okay let's jump right into penny site okay cool we're on penny's site so we are going to be filtering by categories and butler products this setup is going to require cms nest so not only are we going to filter i think we may also do some load we're also going to nest and nest has been something that people are asking about all the time so we are going to cover this penny is this something that has over 100 items here 71 71 yeah okay so do you think that that will ever go over 100 or is it always going to be around this 71. uh it could go over a hundred um okay so we'll set you up for growth then it'll just the setting will be there for when there is over a hundred and it will just work and penny tonight is saying hello in the comments hey donette hopefully we'll see you at the atlanta meet-up uh i know uh tinette is here in atlanta so uh next week on wednesday if anybody's in the atlanta area we're doing a meet-up so uh anyway shout out to tonight okay so first before we get started let's copy this script to the head of the page this one's easy to forget we are getting some uh support requests in and people just are not doing that i always do it as a first first thing we're going to look at a native web flow nested collection and then we're going to use this one as nest so let's start first with the native nested we are going to nest project categories inside our projects so let's go and do this collection list link to the project category and the project category is going to have text link here okay connected to the name great now we've chosen this one is the nested instead of this one because there are no items that have more than five here so this does fit into the nested the native nested webflow setup this does not this can have more than five so it just doesn't qualify so let's now go and get just this working we're not going to jump into the nested part yet the the attributes nested part let's go and do the same thing that we did fs you know what i'm not going to type it i'm going to go in the docs this is the best way to do it because you're going to mistype something and it's going to be frustrating so just go to the docs copy it and then you have a very easy list waiting for you great and let's do the same thing for this surrounding filter wrapper so let's make sure we understand this we have all of our filter ui elements we have our search our clear our check boxes everything they're all inside a filter that filter needs an attribute of filters cms filter element filters so we have it on our list we have it on our filters now we're going to start to make the relationship between this filter ui and the content within that item we do not need to do that i'm going to go and back to the docs i will go and grab this fs cms filter field identifier let's go add that as a name and the value is an identifier this means something that is clear as to what it's for it's like a it's like an id that you use that represents what this is so this is going to be our services and now we're going to to make that relationship in here with services so i'll add the same exact thing now let's just write a quick test i think this is going to work as is just this sidebar of filtering categories and you can see penny has the submit button in here and what this means is we're going to have to press this submit button in order for the filter to filter in order the list to filter and penny while we're waiting do you want that do you want to submit buttons that has to be pressed no i actually kind of left it for you so that you could have this conversation about whether submit needs to be there or not perfect i'm glad you did that we'll we'll watch the submit button work and then we'll look at how to turn that off cool okay let's load up this page and if i go and choose re-roofing and renovations and i submit this it's going to now filter so that worked renovations re-roofing renovations renovations they all have either renovations or re-roofing let's go and just do re-roofing and there we go so this is working uh this is yeah i we nailed it great warehouse and logistics perfect okay now that was the easy part now let's go into also an easy part but not as easy it's going to be the cms nest cms nest is going to feel a little weird on your first implementation maybe a little less weird on your second implementation but after the second one you're going to be a pro it's really not that difficult once you understand the steps so before we do any filter stuff let's first get this information inside the item i'm going to open up the nest documentation and see what we have to do here first copy the script i'll go in here and paste it in the head much like the identifier in the filter where we are creating relationships we need to do the same thing with nests we need to create a relationship between the the cms item and what it's going to be nested into so let's look at what that means questions no no no i did you was saying it's good to have a submit button when you have lots of filters um yeah but yeah and then a couple other ones that are not relevant to this but yeah we'll do those later yep okay we have fscms nest element this is on the list so we're going to apply it to this same list that receives our nest so we go and put that right here on the same list that's being filtered great now back to here nest collection here this is now nested inside list look how we're trying to represent this inside the docks we have our list nested inside of it we need this div block which is going to be the target to add the nested collection items so i'll copy this and we'll look at what this is this is a blank div with an identifier value so we will go inside this project item and i'm going to add a div block with this exactly we'll go and add the collection and this identifier should be i don't know what are we filtering by um that was okay butler products yeah yeah great butler products let's make sure we have this spelled correctly butler products okay great that step is complete now let's go to the collection to nest this is going to be the collection list that will be the source of the content and it will be placed inside this list it's going to be put in the place of this div block so this is just a placeholder of where we want the real content to go so i'm going to go and add a collection list above below anywhere on the same page as my list and we're going to add the same attribute that we did again making this relationship cms nest collection categories so i will go here on the page let's reduce everything this will go on the very bottom of the page this is going to be removed from the page you can display none it it's just there to be put somewhere else okay this is for our butler products nice okay and now before we forget let's add this attribute to it cms nest collection and we have our butler products great okay important step we have to place a text link inside this item it doesn't have to be the primary visible element but it needs to be inside this item we need to be able to read which page it goes to okay so we're going to go to the current butler page we need to know where this is in our cms this is the name and great so this is actually going to cut and paste into these boxes every single one of these items will get its own list just like you would expect in a native nested collection so that's it for this step we have this complete this is all we need now the last step and this is where we're seeing the most people fail in their implementations of nest this is by far the official step that everybody does not do collection on template i want this collection list to be the hidden source on the template page this needs to make the same relationship that we are making we're going to go to the template page of our primary list we have our projects so i'll go to the template page of projects here inside projects we can go in the body and we can go and add this collection list this collection list needs to have a reference collection here so we have our project fields it is a multi-reference and we're going to select that and we do the same exact thing that we did in the last step same thing we'll go to the list we'll go to the attributes and we will call this the butler products and same as the last step we need to go and add this text link not url we need to go to the current butler product and we'll just get some visibility on the name here this doesn't matter in terms of styling this is completely hidden it's not going to be cut or copied or pasted anywhere so what i'm going to do is go ahead and hide this goodbye that's it now let's go back to this page and i want to say that we are ready to check this work here we haven't implemented anything with filter yet we've just implemented the nest so what we would expect here is for the nest this nested list this list of orange links to show up in each of the items and let's go see if that happened do we have any questions while we wait not related to this okay we do have nicolas saying i'd love to see nesting filtered together which is what we're doing right now so here you go yeah exactly okay there we go look at that so we have nested items here we can have as many as we want this one has five i want to see a six it works with six i don't see six here but i'm not sure if there is any that have six okay it works with regardless how many items you have the point is this is working we have a nested collection here and i'm going to open up inspector just so you understand what is actually in here we have our nest collection just like we have in webflow this is the webflow dynamic list that we have no class on this is where we added the attribute cms nest collection butler products and then we have our cms items it's literally copy and pasting this to this list here so before we move on let's just confirm that and we'll get a little bit of a different layout to make sure that we are looking at this the way we want to um although penny you have to give me the okay to make a class in here is that okay yes go ahead okay i'm going to just give a prefix here so it's clear what we have uh fs messlist i'm just going to call it here we'll give a horizontal let's wrap this list and we're not going to go official design here i just want to show you that now this flex setting on this list down here is going to be reflected up here so now we're going to see all of these links go from a vertical list to a horizontal so you do your stylings down here and whatever you put here is going to be copy and pasted to every single one of these and while we wait the the actual yeah i was going to say there's a question here from wkd saying let's say i have a big collection hidden like that for reference purposes does the browser still load it yes yeah absolutely the browser is going to load that list of tags and that's how it's getting it right it's got to load that in order to inject it as those list elements so whether you're doing it one way or as like actually nested lists there like the browser's got to load that data to display it so yeah does it slow it down at all in the load no this is not this is not something that's going to have a significant impact on your load absolutely not yeah if you have a giant list it's possible if you have multi thousand item list yeah i mean anytime you're putting thousands of elements on the page there is something with page speed but penny at the size of your list the 70 items no this is not something that i would be concerned about for for speed yeah and and joe also if you're loading let's maybe let's talk about this like if you're loading images and other things in there rather than just a title or a list like that could affect page load speed right if you're bringing other elements in yep sure sure so like loading a list a text list is you know on most internet connections is not going to create a problem even if it's a couple hundred items you know like once you start getting into thousands of items you start bringing in images you start bringing in anything else then uh sure that just like anything else on the page it's gonna affect your load so just keep that in mind as y'all are building okay great and alex alex is in the crowd here he says yes it does so yes there is an effect and alex if you want to if you want to elaborate on that i think the crowd would uh appreciate that okay so what are we looking for here and eve's asking real quick are these links clickable to access the category page all right those links should work because that's what we attach them to correct um hold on i are these links clickable to access the category page so like if you go to the live site and click on it will it take you to that category page in webflow yeah sure absolutely these happen to be text blocks um we we can switch these to like talking about the load the nested list there that are linked if you go to the live site where it injects those lists he just wants to know i think are those links clickable on this site like if you click on one of these will take us to that page yeah absolutely there you go great yeah keegan uh you're very welcome um i think a lot of times it's good to see this stuff work through uh wkd you're welcome there and and yeah and it's this is how you learn is seeing other people kind of stumble through some stuff do it in real time walk through all of the different elements you know go back and forth sometimes you look at the documentation page and it can be intimidating to see all these options in front of you and you're like oh where do i start what do i do which one goes where but then you start seeing like it actually being put to use and it starts to make a little bit more sense so hey um joe for the second time i'm wondering if we got two more of these to run through if we should pop to um the next one here yeah this is uh not responding very well so i i would prefer to finish this implementation sure sure i didn't i i don't mean to cut anything short i'm just saying yeah this is the explanation is is definitely taking time but yeah let's um and alex all items to be nested or loaded as usual so if you have images those images will be loaded like if they were natively nested so i think that's the greater point we're trying to make earlier is that whether it loads them at the bottom of the page and the list we're injecting or if it was native in webflow they're still gonna have to load and the page treats that as any other asset that's being loaded on the page right so the page um the page killed before so i'm trying to get this this update in oh nice is a webflow crashing on us yeah it did how dare you okay and so is the idea that that list will stay there attached or are we gonna be able to can we hide it just out of interest oh absolutely time to ask yeah no that's a good time absolutely so let's check this you know what i think this actually isn't this isn't this is a i'm glad this happened i don't think that this is wrapping because these titles are too long these names are actually too long and it's not going to wrap to the next line right here right so okay let's um let's just keep working we'll prove it with this on the next load we'll see that but this is this is good our nest is now working now let's connect filter to it let's confirm it works and then we'll hide everything okay now we need to go back to filter so we finished our nest implementation but we still need the filter we already have this applied we already did this in the first step we now need this field identifier step and we're going to copy this and we're going to apply it to these check boxes here penny has three different lists they are separate lists but they are all from the same collection butler products so we're going to go to each list and go apply this butler products excellent and then one here we'll go butler products so they all get the same identifier you need the same identifier yes they're going to be searching through the same list and again butler products okay great so now that's applied to all three of these columns and now what we want to do is do that same thing to our newly nested list here we go we have this right here we're going to apply that same attribute here because remember this is actually going to be inside that list so now we can search for that information butler products excellent okay so we have this background we're going to check we're going to check that the filter is working and let's also hide this submit button so we were pressing submit to check we have the option to completely remove it from the build or hide it if you hide it it will not attributes will see it is not there it gives you the option to not have it for desktop and have it for mobile or have it for desktop and not have it for mobile so that's why we went with the display option but if you never ever want this feature you can just remove that element completely from the page okay so let's go and publish and the rest of the steps are fairly quick penny when we search through this what would you like to search for would you like to search for categories and butler products i'm thinking more i'm thinking the name of the the uh project actually sure just the name oh can we search for more than one thing of course you can search for whatever you want we can do name and category we could do name and butler products all three it's like burger king you could have it your way you know yeah really well you know technically all three would be probably the most useful to the cust to my client cool oh come on i don't think you got the new the new upgrade the new webflow cms upgrade they're rolling it out may not have yeah okay let's give a reload here i do want to finish this because this is a really common use case and people are confused how do i make nest and filter work and we're going to see how simple it is we just added these two additional attributes to our nest setup and it will work let's see if the publish went through we don't know if the publish went through so we'll check and i just want to say who what other agency what other group what are there anybody's out there literally saying hey other people who are building webflow sites come on over we're going to build your filter systems for you and also it's for free and we'll update it as we go kind of thing you know as you'll get more features as the product evolves so you know just smash that like button out there if you're watching and you're getting any value out of this for sure yeah this is wonderful this would have taken me an awful lot longer to figure out the first time this is working exactly as intended mr24 roof system [Music] let's switch to this we have the low price low profile re-roof system this is working all three columns are returning exactly as we want them to so perfect we're in and shout out to alex iglesias for putting all this together shout out to the whole fin suite technical team and everybody for this because it's fun to just watch it happen so quickly you know it's a yeah it's it's very cool yeah joe's helping me in this flag with this exact same solution so very relevant there we go yeah matisse i i am thinking of you i just responded that where i i sent him here to watch this because he has the same use case come now we're talking about it right now so let's uh let's look at this in the docs more attributes to use we have a search field one it gets the same exact attribute that we've been applying everywhere but we have a little bit of a superpower with this search field where we can comma separate what we wanted to search for and we can comma separate it with our identifiers so i can say i want this to be the uh the butler products identifier i want this to be the category identifier and our new to be named name category so let's go and do that i'm going to go and say is this a search is this a search bar or is this just it may not be i don't yeah i think i didn't do that part right no problem at all so we're going to add a form input here there we go and this form input i'm going to add this attribute that we've been adding everywhere cms filter field and this field is now going to search for our categories i think it is but we'll check that our butler products and we'll go create a name one here and this is services not even close yeah yeah okay services services there we go spelling mistake i'm telling you you have to be this looks like butler products but it's bullper products butler products that would have not worked okay good and now we have to add our name right we have this new name filter field and that's just okay it's all about that's a good troubleshooting mechanism if you're having trouble with your attributes if there's something that doesn't work first step should be go check your spelling go check the spelling go check your dashes go check the this is and this is what the technicalities of coding is right it's like uh this is one of the hard parts is the semantic structure it has to be perfect so um yeah first step first if you're troubleshooting any of this is go through and check all the spelling in the naming okay so we are going to search and clear i'm just going to add this right now because i know it fs cms filter element reset easy great so this is going to reset everything it's a master reset we can also set up resets by each filter group here we can also look at that but first let's test okay great let's test our search and our search on a reload let's do adl nice adl influx let's do re roofing re-roofing re-roofing great so this search is in fact working and try just mr dash tried mr-24 so not the whole thing just mr24 or mr yep nice beautiful hey joe melissa was asking no spacing between the commas there right when you were doing the comma values as a space matter and the attributes when you're doing multiple uh selectors there we have made this to just account for any any of these types of of yeah of of inputs alex answers there can be spaces so we try not to be really specific about exactly how it has to happen uh there's flexibility in it just like the identifier you can be flexible with what it is as long as it's the same exact thing so that's going to work we'll see that on the next publish we have our clear button in with our reset uh and let's go in and let's let's go create these active tags let's see this working filter the attributes aren't case sensitive right are the attributes case sensitive or no joe uh well it i believe it depends for identifiers alex is the best one to answer that maybe alex can answer that in the comments here so uh we'll leave that open for alex um on the case sensitivity and then um again let's go set our just a timer a time reminder on the features here okay uh but still regardless of the time i think i want to just set up every single thing because this is a really good it this is what people need the full full setup sure sure so i'm going to finish this every single feature and we can either stop and do this tomorrow or next week the other two or we can just i don't think we have a set time i mean i think we can keep going we don't have to be under it i'm fine yeah oh yeah i'm fine okay uh alex iglesias saying identifiers are case insensitive so color and color are the same okay yeah seems like their agnostic color and color are the same samer but don't do that the same might be a different spelling matters case doesn't but don't spell it with a u he's saying regular attributes like fs dash cms filter are case sensitive so the value on your end is not necessarily but the actual attribute name is yeah exactly great okay we have a and maria saying keep going okay listen i'm just trying to be i'm just you know i'm just out here trying to be moderator okay you know we're all friends like i don't care we could stream for another three hours like i don't care you're right as long as the computer holds up i'm good melissa's saying it's 2 a.m here but i'm staying for this sure let's do it okay oh yeah yeah let's keep going i'm enjoying this super useful all right let's go you know nice great yeah yes sir let's keep it up all right let's go let's do it okay let's go to the technology grab a drink grab a snack we're going for a marathon we should have a commercial break that's right all right we're going to set up these tag templates they're super simple they're going to add a such a custom feel to your filter system it's amazing what you can do in a very short period of time here so this is going to be our active tag i forgot to look what this value is tag template tag template even close mustafa's over here saying he's ordering pizza that's too funny because he's up next he's on one of the next ones so if you see him come up and it's his turn he's eating pizza you know he's he's on it 8 p.m in south africa i can go all night all right let's go uh ukulele har is saying let's add the search highlighting as well please sure on this one it would be good because some of those searches like you were i saw earlier you were like looking to see like oh did it actually pull for this one so that search highlight might uh might be good for that we are gonna lose alex uh teaching class i'm assuming that's a dance class alex if y'all don't know go check out alex instagram um let's see edgar's saying finn sweet tv finally hey listen we're working on these things you know and the tsp breaks for everyone wkd do i hear 24 hour marathon listen i don't know we y'all have to keep showing up we're gonna keep trying to do these longer form streams and longer form content but yeah yeah yeah we'll we're experimenting with all that so in that time that we were talking about that the active tag system is set up that's how quick it is that was under a minute and what we've done here is we've applied the attribute fscms element to all three elements here and the value here is tag template the text inside is tag text come on webflow okay it's not opening but it's tagged text and this close button is tag remove so all i've done is file this structure tag template nested inside a tag text tag remove apply the attribute to each one of them and now it's going to turn on our active tag system so let's see i want to think that this did publish okay you can see we're starting with nothing now this is a good sign that means it's recognizing something and when i go and click these you'll see the active tags can join the party there we go look at it it's so amazing and we can style these we have some you know these are not wrapping but we can wrap it absolutely uh they there are no style requirements these can be anywhere these can be like floating on the page you can put some javascript on the page and it's floating in in midair and you can tap the active closes there are no limitations here we can close them and there we go the key is this is your template so this whole thing that we apply tag template is literally your template for this so just like cms you can style that however you want you can bring that functionality into that style so great we're awesome if you see some some flickering you're able to hide this so you can set this initially to an opacity of zero if this is at the top of your page and you have this and it flashes quickly opacity is zero we already have it set up to identify opacity zero and put it to opacity one okay great so we are looking pretty good we have a request for text highlight we have we're definitely going to cover active class let's do active class here we have active class and we're going to apply fs cms filter active class name now this is going to put a class on the element when that element is filtering the list we're going to put it on the same element that has fscms filter field identifier so let's go do that exactly we're going to go to settings here and we're going to apply this and the active class is going to be is active do you think you have a class in your build called is active uh no i'm okay fairly certain i wouldn't okay we have is active coming as our active class so i will go in here and we'll have is active and i'm going to add it to each one of these because we have the three different lists here is active and let's go is active nice now we actually need to create some style for is active this is just how css works there needs to be something on this class style wise to make any type of visual change so i'm going to give this is active i'm going to style it from a global level first and then i'm going to show you how this can also be used as a combo class so let's go and make this black with let's say white color cool so now this is what it's going to look like i've applied it to the label for check boxes and radios this class is applied to the check box field we've made a special rule for check boxes and radios to make sure that this is really where you want this active class to be so i'll preview how this is going to look for me there we go so when we go and filter this grid it will look like this okay question penny okay there is one from nicholas here does the nested collection content need to be shown inside the main list in order for the filter to pull it uh if you rewind the video here you'll see how we did that nested stuff uh you load a list at the bottom of the page there you you assign a div and that's where that content comes in to so um yeah you can if you if you want nicholas there rewind back i don't know maybe 20 minutes 15 20 minutes and we were going through that set up in real time there uh well i think nicholas is specifically asking about does this have to be visible in the final list and actually in penny's case penny does not want to show this content come on so we're going to hide this content we're going to continue working and watch how this this works let me reload webflow here this is a question that a lot of people ask the content just needs to live inside of the list it doesn't matter if it's display block display flex display none just needs to be in the item so let's reload webflow here let's get these items inside hidden and continue working to confirm this okay this is hidden let's go and drag our empty div block which will receive the nested items the nested list and then this collection list we just don't want these here done still going to work okay i want to think that we did not get a publish through maybe we did let's see and i forgot what what were we testing yeah oh yeah of course there we go there we go nice so we still see the check box here you can hide this check box uh you can opacity zero the check box you can display none the check box we're going to be releasing some additional content to talk about your options for this in the lens of accessibility there are some ways to manage your checkbox instance that is not acceptable not accessible and we're going to tell you exactly if you do it like this it will be accessible if you do it like this it will not be accessible this will be brand new content we may have a video dedicated to this but this is working we have our active class it's working everywhere now notice how this let's clear this and also test that nice let's type this and let's see that this search does not have an active class right this is just not there's nothing active about this i can apply an active class also to my search so let's go and do that i'm going to create another one of these i can also use is active if i wanted to but i'm going to create something else here and i'm going to say is active search and this is going to have order of blue and now we go add this active class here and we'll see how quick and easy it is to go do that is active search so now when we go and use our search input we're actually going to see when that search input is actively being searched through great and while we're on the search input while we're playing with this let's go over the active tags that harshit asked about or the the search highlight that he asked about okay no dates no range we have our reset in there we can set reset by by um identifier if anybody wants to see a reset by identifier let me know that very easy uh what do we have highlight there we go so we have our cms filter highlight true where do we add this we add it on the field identifier we can actually add this to any field identifier even something like a radio or a checkbox and if you click that checkbox it's going to highlight whatever that checkbox is returning but we're going to do it specifically for this search input so i'll go and add a new attribute come on page unresponsive hold on and i'll just continue talking through this so we can move through it so this will go on the search input and then we're going to define the class we can also use the default class fs cms filter highlight but we'll create a custom one yeah while you're doing that here ivan is asking why only use a single dash when assigning bem method i've noticed it on your cfds which i assume is client-first documentation uh it's because this is not bem this is not the bem method this is the client first method and maria comes with the answer right behind it because most people understand bem so defeat the purpose of client first uh so yeah it's uh it's just because it's simpler and nobody like most people are not going to know the ben method unless they're like trained in css okay so i've added two attributes here to this search input we have our highlight true turning that feature on and then optionally defining the class which is now is active text so what we're going to do is again define this class i'm adding these classes like this there's a few ways to manage your classes this is how i prefer to do it and what i would do is i would put all three of these active classes in a hidden div on this page so that they can be saved in the event that the classes are removed so let's go is active text and what kind of text highlight are we going to do here let's do something a bit dramatic so we do see it working and we're only going to see this action on the name right because the other ones are hidden that's okay that will work all right so let's publish that we'll see that working is active text good just so we have this i can go and put this in hidden great uh whoa where did i go here great so we can put these in here great and i want to think that this is published yes it is all right we have a lot to check here best this blue line should stay there we go so i we didn't have it very thick here but you can see there is a blue line that was our is active text search class and you can see that if we remove this this blue line will go away so this active class is actually working and we have two different active classes managing different elements in our project great okay now the text highlight so now we're going to search by name and we want to see this name highlighting on the the returned keyword so let's do custom here and this is oh maybe this didn't go through yeah maybe this one's not live yet no okay quick check here did not catch on to my custom class here so it is defaulting to the the default client the default attributes class i don't know why i am not sure but for now is active text for now we're just going to change it to this if this is a bug we will fix it very fast so we're going to change our is active text i'm going to put my default class that we're given in client in attributes and this is now going to work and each one of these has an active cl has a default class we set is active we set is active search but we have a default that you can use if you do not want to set these we're having a few folks in the comments commiserate with your webflow glitches here uh can't click anything have to reload the page even on small cms sites so yeah it's i think it's because we're gonna get some major feature updates here soon you know i got to imagine this is that memberships beta this is them testing logic this is them doing all those things in the back end so hopefully uh that's how i keep a positive mindset on all those glitches when they when you get them okay so let's search this again let's do the custom there we go so now we have our active class so our custom active class was not working we'll look into that maybe that's a bug maybe i missed a step or did something wrong but there we go great and we'll see that as we search for things and don't search for things it can get really specific as to what is being returned as i'm removing things it's saying exactly what's being returned here yeah this huge i mean this is this big stuff this is stuff people pay lots of money for filter systems like this um yep and i'm going to show one more thing as you can see when i'm typing i'll go down here as i'm typing we have a flash on every single every single keystroke and the reason is attributes is so fast that it is actively filtering the entire thing immediately after every keystroke that's what that is so what we're going to do is apply something called the bounce and the bounce is going to set a little bit of a delay on certain fields to make sure that we're giving a good experience to the end user so let's go and look at how to do that in the docs we'll go to cms filter and we are going to go to debounce i want to wait a certain amount of time until the filter results update so we're going to take debounce we're going to do 200 milliseconds and we're going to set it in this case on the field identifier so i will go and do it to this this will not affect the other filters if i were to apply this to the list it would be a global setting and even clicking on this would have a 200 millisecond delay but we don't want that and actually we're going to change this to 2000 just so we can really see it working so this is going to wait two seconds until it actually runs the search to make sure that the user has stopped typing so a good number for this 200 300 400 maybe 500 and i think that's a natural way to to let the person finish typing until the the results filter 2000 is a bit too long though i do not recommend that okay nice and i want to think that i don't know what else to implement here i think we'll we're done after this yeah i think we should move on to the next one here yeah and i think we cut up each one of these i think these these are great learning opportunities for everybody sure uh this this is great great content for everybody cool let's load this up and let's now do this new test so i'm going to focus on this and let's type custom now it updates so two seconds right i can type i can type i just removed everything i'm going to press c nothing now it goes u nothing now it goes and then if i type the rest of custom filters so set that appropriately and that's going to improve the experience for your site big time and that's it for the bellcon site penny thank you for giving us this perfect example it was really really nice to implement this one thank you great well thank you very much i really appreciate it yeah that's awesome i mean i know it took uh you know it took some time there but look at the functionality you added that filter in you know what probably would have been 20 minutes of actual work time you know if it wouldn't have been for the explanation and the talking and the answering questions everything you know you got probably 15-20 minutes of firmwork time in there to get some filters like that set up so uh thanks again penny for you know letting us dive into the back end of your site there and get that that squared away for you no problem my pleasure all right uh so the next one we're gonna move on to is peter peter are you still with us here back there all right let's jump over to peter here what's up peter hello all right peter you transferred your site right yes i have yes i just sent you a more recent one because i think actually the news page might be better example than the team page okay if you've got the team page ready then we could use that um okay we'll see tom's asking if the pizza's arrived mustafa demetrius what's up demetrius uh let's see yeah demetrius is saying love the debounce feature my personal favorite yeah that is a good feature to be able to kind of like focus that in a little bit um at this huge value there for sure okay does the let's answer this question real quick from nicholas does the field identifier have to be a form item checks box radio select etc i'd like to set up custom button styles yeah and we addressed this on this on the on the i think attributes deep dive but joe what's the what's the consensus there yeah that is not possible nicholas and it's not going to be possible we are 100 in on form elements and there's a lot of reasons for that the prime one being accessibility we're actually planning a video specifically around this topic a lot of people are asking about it we have made the the firm decision to not allow for any kind of buttons text links divs anything like that yeah yeah and there's a good explanation on this i think we should publish that um notion doc joe honestly that explanation for why um yeah showing explanations of why other you know large filtering setups are set up inside of systems are set up inside of form elements like that so okay let's uh jump in uh demetrius saying joe and reimar thanks for the special shout out in previous live streams means a lot yeah for sure we chatted about you on tuesday i think we gave you a shout out um for sending in that feedback on uh on some of this stuff so we appreciate you going through thoroughly and um you know giving us that feedback so and then you're saying you can style those check boxes radios like custom buttons though so you can style those elements however you want um yeah they just have to be those form elements to start with yeah okay great we're on the news page uh let's go and do this so peter when i was going through your site before i i saw that there was a limit item show one can you tell me the reason for that uh no okay do you want to show all the tags oh i see no hold on sorry that is right i just want to show the first one yeah okay yeah okay cool yeah that's um so the reason the reason being is because um they kind of think of it as like the first one that they apply uh the first tag that they apply is the kind of uh practice area this law firm that kind of owns that article but they want it to show up as um it's a bit of a kind of a hack so that it shows up uh as related on other practice areas i see okay that makes sense yeah it does absolutely okay um but and also i guess also yeah in yeah if you do filter by then it would still show up even though it wouldn't be tagged as such okay great so i'm going to first set up the search filter here let's start with that so i'm going to go to the list i'm going to add fscms filter element list watch out for my spelling i'm going to go through this one quick without the docs let's see if i can do it so if i spell something wrong call it out right away okay we have our list we have our form that's going to be the fs cms filter element we'll probably need that filters peter tom's giving you some love on the design here i did yeah yeah same beautiful sight by the way and then maria saying it's also interesting because we get to see different builds yeah i think that's the fun of this is we're kind of dropping uh dropping in on different people's projects as we go peter what would you like this search to search by everything in the card by the title by um for the so i think probably just the title title that maybe that makes sense based on yeah i think so because we also have the drop downs here for this this type of content yeah okay yeah i mean maybe maybe also the author if it's there i don't know if i'm exposing the author i can't remember okay we can we can have that if if we see that as we're adding it's not a big deal i mean yeah i think just the title will be fine okay cool we have our title and i'm going to copy this and make that same relationship here with the title so joe the reason i actually um resent you uh at this page rather than the team page was at the beginning of the stream when you mentioned about the speed increase this page has actually got 55 paginated pages wow or something like that it's 551 blog articles says and and it was kind of slow on the old filtering system okay that's perfect this doesn't look like the webflow interface this is called fin suite extension so if this works correctly [Music] [Laughter] there we go it's added here so we have our i really want to try to do this one without the docs and see if i can do it so i literally do not want to open them and because of that i can go grab this script right here inside uh inside the extension and actually let's just walk through this quickly and i'll add everything else that i need here so i know that we're going to need nest and i know that we're going to need load more so i'll go and add nest here the drop down add script to page or add script to site we're going to add it to the page yeah and we did breeze over that real quick but for those who don't know i just pasted the extension into the chat if you're building in webflow this is like a must use kind of thing especially if you're going to start using any of these other fin sweet products as we go but as you can see joe right here is just going through and adding the various scripts he's going to be needing directly to the page from inside the webflow designer you can see it's reloading that page every time he does that walks them through the entire process and it makes it super easy without having to go back and forth uh on on those elements so it's just a great shortcut if you're looking to increase productivity here nice we're in okay so with this we should have a simple filter here we're going to be able to search for news by the title okay and let's also let's just move forward here let's filter by the let's also load all the items so we're going to do fs cms load element and that's going to be our list we're going to make sure we have the pagination excellent we're going to click on this right here and show the page count this is hidden right and we're also going to apply a load mode on this so this is fscms load mode pagination great so now let's view this we'll watch the search working in the first 100 items the next publish is going to be all of the items which is or the first 12 items then it's going to be all the items so let's go and see this so i want to be able to search let's do want to market there we go uh protection there we go you see all that flashing we don't want that before we move forward let's apply that d bounce feature that we were looking at before come on the big cms sites come on yeah people are let's go people are asking that uh right here anybody got any demetrius asking why publishing takes so long in the last months it seems like it's slowing down yeah i think they're they are onboarding these new features in stages so some sites have the new functionality some sites don't have the new functionality uh i this is definitely feeling a bit slow that's right i forgot that they just announced the cms performance updates and if you have uh been in one of those betas you do understand how much more performant it can be so it's uh it's hard when you're working in one of those sites to then go back to one of them that doesn't have that feature update from the from the course side okay so i put the d bounce in i don't know if that last publish went through but let's see if we can search past the first page here i'll search for a fairly general term data so data should probably only return one from this and we have quite a lot here data don't know why these images are not loading uh they didn't exist that's why because we didn't think that anyone was going to look past like the first kind of few pages um well now they have very quick access to all the pages so look at this we we enabled the load list and look at this pagination working so we are now able to access these very very fast there is no load time we have already kept these items in memory so we can serve them immediately for you we can also implement a really nice feature when changing this pagination to anchor scroll up to the top this is a rather small list but imagine if this list was 20 items you would want to go to the next page and then go to the top so let's quickly make sure that we have this implemented uh so it's gonna do a page at a time it can't append to the bottom of the list it can sure yep let's change the load mode so we did load mode pagination let's do load mode load under and with that when i click that next button it's going to show underneath great glad you said that because now we don't need the anchor scroll and um so is it still going to have next and previous buttons or can we just have one button yeah just one button uh but it has to be this button so okay can i style this can i add that can i add that class to it that one yeah mad button nice mustafa's saying here um i was advised by whether to go to settings and publish from there to solve the slow list slowness issue not ideal but it works so just a little trick if you want to try that at some level um there's a lot of work to go through the settings and hit that button there though every time um wkd was asking if we can have pagination at the top and bottom of the list at the same time that possible do we know joe two paginations no i don't think so although no i don't think so yeah i i don't i put it in maybe if you put some javascript in there and likes to duplicate it duplicated it and did like a mirror click type thing but no not natively okay we have our mad button we published before i don't know exactly what's published here but the debounce should be published so if i search data here it's going to wait a second until it goes and searches i did 400 milliseconds this time which i think is more appropriate so you're not going to get that that flashing and you see that we've loaded this list and we're going to be able to load more from the filtered settings here from what is being currently filtered so if i click load more i'm going to be loading more from ruling you can see ruling ruling ruling and i load more yes so maybe try um uh property or film in the search because there's loads of articles with those in the title huh sorry so he suggests uh in in the in the search field if you put like uh property in now uh yeah so there's loads of property briefings so now when you go to load more it will only load from the property uh with the property filter on it should but it's saying that there's only this many items with the word property in it okay try film maybe then yeah and i think it did load more on that last one this button should be going away i i don't know why it's not going away oh okay all right yeah i don't know why this isn't going away but we are searching through the entire list here the moment you start feverishly hitting command z just going back all right let's set up a quick nest here we're going to do the same thing that we did in the last walkthrough i'm going to do an fs cms nest element list copy this little prefix cms nest element list great now i'm going to [Music] go and start to create my references so i'll go in this div block here i'm going to go nest collection this is now going to be placed three different times and the identifier here is i'm just going to call it category great now let's go and put this collection list here on the page i'm putting it on the bottom right now it doesn't matter where it lives on the page i'm just doing it for organization for this walk through areas of expertise i believe is what we're going for i'm going to add a text link in here and make sure that goes to the current page then we will go and add that same collection with the same identifier and that is category or categories there's a category or categories i don't know are you asking me i'm asking myself uh category great okay so we have this in here we're going to now go to our template page of our news and we're going to do that same thing add this in here this is going to reference the category and the category again we're going to put that text link in here let's link the text let's go to the current page and let's go add that same attribute we're going to make this relationship with the category great back on the news and insights this should work we should see this nested list go inside this list and then once that's in there we're going to apply our filter attributes so look at this we have this as not conditions fs cms filter this is going to be the field and the identifier for this is going to be let's do category again i like to keep it the same as the nest okay this is for category and this is like we saw in pennies a different list but the same collection and we'll do the same thing here category and we have to make that relationship with the nested collection that we have put in here so i'm going to oh this is wrong caught myself this is not correct did not put this on the right element look at this cms nets collection category this should not be here this needs to be on the list look at this it needs to go on the list and i'm just going to check and make sure i didn't make that same mistake on the template page here real quick i don't want to where am i news the list always needs to go on the list where are we wow not correct on the list nice catch though okay yeah nice catch and now if everything was set up correctly we should have a nested list inside our collection right here we should be able to filter with these dropdowns okay we have the nested and look how this is in is this breaking five uh i want a breaking five example so badly but it's okay it will break five it's working so if i choose corporate here we'll see that we are filtering by corporate we are working awesome and this is happening instantly look at this so this is a fairly large list i mean peter this is actually a huge list and i'm glad you brought this one to us because this is filtering near instant here yeah because it's really impressive yes we are using the browser's memory to make sure that this information is always available to the user great okay so i think that's it here you're all set up you're ready to do your styling you can set any of these active classes and uh yeah enjoy the new system incredible thanks jay thanks peter yeah that's um again just another 20 30 minutes bang you got a whole new little filter system in there you know i don't even think man what did it took us yeah maybe 20 minutes 25 minutes there you go you're welcome peter we'll send you an invoice later yeah all right thanks guys take care all right so next we've got rock and roll ceo we're going to drop in on him and see if he's got some pizza for us thanks for having me on and i just want to say well thanks everybody for watching and i'm blown away by the feature set on this i was not expecting this much um i mean the previous cms filter that most of us used with uh let's go for the fillers i'd watch laura's video tutorial and just basically implemented it like right now within 20 minutes half an hour and now watching this it's just incredible um thanks again thank you mustafa i really appreciate that um i'm trying to get into the build and it is not working for me i'm not able to [Music] [Laughter] well timed i like it do you want to you want to just follow follow up with me an email uh just confirm that what you sent me is correct and you know if there's a change to that let me know so i can get in there is it nice do we have any questions from the crowd please ask your questions now if you have anything that you are curious about or you want to learn let us know maybe we cover it in this final walkthrough maybe we do a dedicated video for it or we cover it next week we're going to be doing the same thing next week yeah with more advanced examples and i think we should keep going on this i like the building you know learning in real time there's lots of other attributes uh you know to pull into here i did yeah gotta get going was wonderful watch it again good to have you with us let's run through these questions and see uh jay poucher saying we need a fence feed extension uh ad for publish from settings buttons build our own publish button that triggers the button on the back end huh uh ivan is saying the ability to organize colors from tint shade is a lifesaver using extension for sure um yeah that extension is powerful for that let's see here's a good question would load more work on a cms template page since you can't click the pagination check box on those cms lists um you can always click that check box on a cms list on a template page a list is something on a template page these are two different things i don't i don't understand the question yeah okay caleb if maybe you could reword that or reframe that um we'll take i'll take another swing at that let's see oh somebody was asking is there a way to style the drop down since we have to use the form in the drop down um are there some tricks to styling those or getting any um you know getting any extra the select the drop down uh the drop down yes you have pretty flexible styling capabilities with a drop down yeah there are not many limitations there the select is very difficult to work with that's where you really do not have a lot of styling capability got it okay and mustafa do we have uh an update on that that access sorry john we was the were you unable to access the account or the dashboard or what was the situation it it just says incorrect uh login yeah he was asking me to resend the details just to confirm should we play the the attributes promo video here uh this is a good time if you're hanging with us to you know go go subscribe to the youtube channel if you're not like the video if you're if you haven't so far um what else joe what do we got coming up here that we can give people a sneak peek for those have been hanging out with us for you know a little bit of time here what's a goodie we can drop i don't know i dropped all my my goodies in the beginning i'm out yeah if you if you missed the beginning definitely at the end of this stream go check it out there's some really nice updates to attributes as a platform inspect the class of a drop down and then use custom css to style it so pablo saying there if there is anything out of reach that's a good way to look at that penny pete smiles the epitome of happiness the finn's sweet effing sweet smile there you go bathroom break turn off your mic though that's right uh demetrius saying if we have load under will the total item count display also the number of items that aren't shown i'm sorry if can you read that again we have load under will the total item count display also the number of items that aren't shown um well yeah that's a good question since we just had the new update to load under i am thinking that it will have the ability to show both the ones that are visible and the one the total amount that it will actually have both options just like right now with pagination you can show the the current filtered items and the not on all of the items i think you're going to be able to do the same thing with load under so just wait on that demetrius we're going to update the docs to make sure that this is really clear exactly what's being shown nice and eve is saying here hey you can use webflow's drop down or use custom and style it the way you want um so there's always the option to create your own drop down there if that's not working for you all right so mustafa this is not working for me i i got your new email it's not logging in so i think this is actually a good break where we can cut this show answer the final questions and mustafa we'll have you on next week or we can see yep i can you know film and walk you through yeah yeah exactly okay i'm sorry about that i don't know why that's happened um yeah no it's okay it happens yeah i'll see what's happening with it and we'll just wait for next week and sorry to review all right well no problem sorry we're not going to get to enjoy this virtual pizza with you i'll have you next week as well yeah all right well uh thanks for hanging with us apologize for the technical issues there um yeah i think that's uh that's about that right do we have anything else joe that i want to bring up or chat or talk about here i think that's it uh stay stay updated stay active with attributes as we said in the beginning we have released an updates page so you can really see what we are updating and how quickly we are making changes to this we are changing the documentation daily so if we say oh we're working on it or oh that's a cool feature check back next week check back check back the week after we're always making these updates yeah and i think we mentioned it before but let's drop that finnsuite.com forward slash attributes and i think it's forward slash updates right after that let's see yep that's what it is yeah let's drop this in the chat for everyone because in real time like we're re we're literally iterating this thing fast on the fly like bang bang bang things are coming in somebody notices something here something there whatever it is uh and we're on it right so check out this uh update law we've got a change log of kind of everything that's happening with attributes in real time that you can look at there you can also go to finsuite.com forward slash vote if you'd like to share thoughts on what you'd like to see us do next if there's something that these filters do not do if there's something that the attributes do not do and you have an idea for what it could do go over to fensweet.com forward slash votes you can leave that there you can vote for other ideas that people have submitted things that we're looking at considering this is how we're going to prioritize our roadmap moving forward so if you're interested in kind of giving us some input on that direction you can do that there once again that's finnsuite.com forward slash vote nice okay that was that was really good if you missed the first one or the second one or the third one these will be cut up and they will be released as individual videos we're going to get this on our videos page of the attributes docs maybe this week probably next week these will be live so you will be able to rewatch them follow these steps and really you saw on that last implementation i did not open the documentation not once and i've just been implementing this for two weeks now so you will become a pro nice okay um thanks for everyone for hanging with us this has been a long stream but you know we've retained a good amount of the audience i think we delivered a ton of value along the way uh again if there's anything you'd like to see us do we're live every tuesday for sure thursdays usually i think we'll start trying to be as consistent as we can about the thursday stuff especially with this new attribute stuff and as we launch more products and doing different things i think we're going to try to get back to doing a weekly thursday stream um so yeah anyway check us out at finsuite.com for any other questions concerns thoughts and we'll leave it at that great okay all right be on tuesday see ya bye everyone

Channel: Finsweet

Views: 8,406

Keywords: webflow

Id: bGEJJAkc5AA

Length: 112min 45sec (6765 seconds)

Published: Thu Dec 02 2021