#43 - Attributes deep dive

okay i'm exciting okay all right so let's do it let's hit the live button what's up everybody welcome to another episode of effing growth today we've got a special episode we're diving deep into attributes so we announced this last week at the no code conf but uh you know released some documentation but we're going to get hands-on with it today so we're going to jump through a couple examples we're going to uh ask answer any questions coming in from the crowd um joe what are we what are we thinking real quick before we get started here well this is about attributes this is uh it's going to be a full walkthrough we're going to be reviewing some complex examples we're going to be building a slider building a tabs component there's going to be a lot of education packed into this so if you're looking to go more into attributes get some live action in that that's exactly what we're doing in this episode yes yes yes yes for sure uh let's do this well you know what before we get too far into this thing let's have him grow [Music] all right and as we usually do let's say what's up real quick to everybody who's watching we got dale and house armando babises with us caleb dale jensen david what's up dennis craig gabe in the house what's up gabe and jay pouchers here we love you jay what's up man john paul jeremy uh geronimo joel whitaker what's up maggie penny peter stephen illario biani man we got a squad today okay let's go we've got the comments back we didn't have the comments uh back the last couple episodes so we've got the comments today good morning from vancouver hey joe excited to see attributes and actions for sure what's up everyone excited for this yes fs master not sure what that is gabe what's up okay yeah we're in the house today joe talk to me man what's happening here what's been the buzz since uh since the attributes launch the buzz has been a lot of positive comments around the speed of implementation we're seeing youtube comments we're seeing personal messages we're seeing social posts of people saying they enjoy implementing attributes that's what we've been hearing over the weekend hearing yesterday and it's exciting to hear that that that people are really enjoying the system you know that's what we built it for we built it to make it easier and we built it to make it faster and hearing that as an outcome is just exciting yeah yeah i um i think aditya said here where was it never thought i could set up an entire complex filter in under five minutes uh attributes is crazy for sure it's simplifying the process as you'll see today attributes kind of steps in place of the cms library so we're gonna dive into how that all comes together over the course of the next hour so feel free to leave your comments uh live in the youtube chat if you're watching this live we will get to those uh throughout the show we always do a good job of wrapping back and forth in real time on those um as best we can we do have a q a section also at the end but uh today we're going to walk through you know from top to bottom um really everything you need to know we're even going to talk about what our attributes right so like we're gonna from an html standpoint you know like webflow applies attributes already you know to certain things in the system but it also allows you to apply a custom attribute and through that custom attribute we can get into doing a lot of functionality which is what we're going to go over today so joe anything in the disclaimer do we need to bring anything up as a announcement today well one announcement is at some time during this stream we're going to release an airtable link for you to fill out for the finn suite team to make a free attributes implementation on your project we're looking for filter examples we're looking for filters that were built in cms library built in other solutions and that want to migrate over to attributes we're going to select a few sites and we're going to implement those for free we're going to have some education around it we'll probably feature them on one of these live shows and yeah this is a chance for you to get a a full attributes refresh by the vinsweet team nice yeah that's big news so and we're not going to give the link now so we're going to force you to stay here for a little bit gotta stay and yeah sometime in this stream you'll get that link perfect uh okay um upcoming events floxies 11 24. so uh later this week i believe discuss fruits as mascots uh and you habitate ui choices i'm not sure what that is foxy's always do a good job with their events so if you are into that check them out at foxyscommunity.webflow.io we've also got this ugly website party coming up if you were in the atlanta area um we did this last year we're going to do it virtually as well so we're going to be it's going to be like a hybrid virtual and in-person event uh it's going to be kind of cool we're going to release the requirements about a week before the event date so you'll have a full week including a weekend to kind of build the idea is to build a um little one page like top of the fold 100 vw vh kind of thing um ugly website style the ugly like i think ugly christmas sweater uh but in a website version of that we did this event last year got a lot of fun submissions it was a total blast um actually uh i should bring that up because we can do that kind of thing right ugly website party let me do this no what okay we should have had this propped up huh yeah yeah yeah i'm gonna show some of these images because we created some crazy stuff last year uh oh you know what it's not gonna show up but you can see on the site here just a bunch of submissions people submitted all these different websites um and it was a lot of fun uh we went through we had interactivity so this year what we're going to do is we're going to again release some of the requirements ahead of the event uh you'll have about a week ish maybe a little bit longer to build 10 days to build that and submit them before the event at the event we'll then review those live we'll have some kind of prizes that we're going to give away for those top websites but again if you're in atlanta we're going to be doing the reveal party in person so we'll have a little meet up in person we're going to be live streaming on location in atlanta uh it's going to be a lot of fun that's coming up in a couple weeks so stay tuned for more details about that um and i think that's it so we can go into any disclaimer or anything else that we have going on joe any thoughts any disclaimers we need to tell people before we get into this here i don't think so that's uh pretty rare to not have any disclaimers that's right attributes is so to the point it's so it's just so correct that we don't need any disclaimers there's no opinion here we're just going to objectively show you how this works yeah so no disclaimers for me so let's get into it and it is uh it is a new system it's slowly replacing all our cms libraries so it doesn't maybe have a hundred percent feature parity across every one of the things you can do in cms library now but that's what we're working towards like a full replacement i think most you'll find that most everything is there especially the stuff you need with the complex filters like the stuff the most popular stuff is there um and we're gonna keep adding on this i think you'll see that this allows us to kind of go and grow and do more and we'd like you to tell us what you might want to see us build in this attribute system so if you're like hey there's some kind of functionality that i'd love to see and you think we could build it with attributes like let us know about that uh go over to finnsuite.com forward slash vote and share what you think you'd like to see us do next with this because we can build out uh alexi glaciers is super excited and the rest of the technical team about what we can do with attributes moving forward so um joe you want to get into why we built this what uh let's start with you know why we built this thing why we built a new system why readdress the cms library absolutely we have rebuilt cms library because there were a lot of issues with cms library we built it to do one thing really well and then we started adding to it and adding to it and adding to it and adding to it making changes making adjustments based on web flow changes and it got to a point where it didn't really feel scalable it didn't have that strong base it didn't have the planning that we have now we we built it three years ago so there's a lot that has changed in this industry since then requirements are bigger so we needed a new system we we considered making a v2 releasing an update to the existing system but we felt we just needed a fresh start we needed something that we can really build on top on top of and just continue to release tools for you and release tools under one family of product and that's attributes so as we continue doing more things in the community more solutions instead of releasing these individualized products everything lives under one house and the house is attributes so that's why we did it that's a it's a big short term and long term decision for us at finn suite nice yeah and i'm um it's just gonna be one of those things that i think the more we do with it the more it evolves the more exciting it's gonna become for the community so i know it's like uh you know this is the first time we're gonna dive deep into this thing and we made the announcement last week but i think as we go this is gonna be one of those things we keep coming back to that really kind of exponentially adds value as we go so let's jump into it joe let's uh the next step we already talked about that yeah um talk about the new innovations okay so what is an attribute you know like from an html standpoint we wanted to talk a little bit about that uh because you know like you've probably seen other implementations and things like this right like maybe you've built a members deck member stack site and you've used an attribute on something else so joe talk to us about like what specifically is an attribute uh what value does it bring to the site here working with these attributes let's talk a little bit about it at a high level of what an attribute is and what it does to the on the website sure i like to think of attributes as a way for html to communicate with other things maybe communicating with your style sheet maybe communicating with a javascript file maybe communicating with some other integration on your site and that's all it is it's a way to communicate and we're all a lot more familiar with the concept of attributes than we think classes are attributes when you go and open up inspector of your webflow site you'll see div class equals something the class is an attribute and the value is the class name so we have a very similar concept with our version of attributes we have a whole family of different attributes like class that you can apply to an element to help it communicate with a javascript file so if you want to load you want cms load you can apply our cms load attributes to the element and that will help that element communicate with the javascript file that's a really beautiful way to look at attributes it's just a way to communicate and we're giving you all of these tools for communicating with this functionality yeah yeah i think that's a good way to look at it right you're creating an anchor on the element that tells the javascript look here to do this thing right so the javascript's trying to do something on the page it needs to know what objects and elements to kind of interact with so the attribute adds onto it just like the css references the class right so the css style sheet is looking at the class attribute for each html element and saying okay apply these styles make it look this certain way so css is telling this html do these things look this way arrange yourself in these positions the javascript is now talking to those elements in the same way and this just allows them to communicate back and forth so that's a really easy high level way to just look at what these attributes are doing um and and that's again what will lead to the potential and you know what we'll be able to build with it so uh let's see anything else on the definition that we needed to chat about i'll give another example of how we use attributes natively in designer we have the class example we also apply custom attributes inside the designer interface when we put let's say a slider component on the page we have a settings panel for that slider component when you check those boxes in the settings panel of the slider you are actually adding custom attributes to that slider dots inverted uh what else do they have dot squared the all the different settings that are possible when you go and apply those and then look at inspector you'll see they're adding attributes so this is something that's inside webflow that we use every day it's a it's a part of the basic building blocks of the web yeah yeah and i think again that goes back to the more you understand about no code the more you get involved with learning how these things work the better you're going to get at building with it understanding all software kind of uh especially as webflow jumps more into the back end it's going to become more important for you to understand these things if you want to build out more functionality on your website well maybe you have to understand how to do that or maybe you can use attributes to do that and so again the more technically knowledgeable you get in this game the better it's going to you know make all of your webflow stuff so um let's go okay so how to add attributes joe do you want to walk through real quick some of these examples and let's show like how attributes are added uh i know most people are familiar with this but we want anybody watching to kind of get a full rundown so um in the future you'll be able to kind of fast forward to thumbs through some of this but right now you got to stick with us um joe do you want to show do you have something else that you want to bring up i would love to answer some great questions in the comments sure yeah we've seen some great ones we can get to these sunday which one all right we have from ivan hey joe in the intro videos for attributes you only pasted the line of a script to the page and not to the custom code tab in the project settings asking why we use it at page or global i want to answer this you can put an attribute script in the page settings or the global settings if it's only for that page put it in the page let's say it's a filter system you don't have a filter system on every page so you put that on the page settings if you have something that is everywhere in your site maybe you have a slider in the footer or there's a slider that just shows up on so many different pages of your site that is a good use case for site settings and that's not just specific to attributes this is for any script so ivan if it if it is global put it in your site settings if it's just for that page or just for two pages or three pages maybe it makes more sense to go in page settings yeah yeah and um yeah i agree uh let's move on to the next question i saw this one uh that i wanted a gennaro saying i've invested two weeks learning and implementing cms library for a website then you read these attributes and in two days i've redone everything um yeah 100 this just goes to show it's like super versatile and it's easy to adopt easy to use and it plays nice together you know like the cms library uh some of the components you know would not play super nice together attributes things play a lot nicer together it's a lot uh works more smoothly together and you can add again multiple functionalities without having to worry about running into conflicts attributes are a bit like metadatas for photo video files small collection of information attached with a specific element that is hidden but easily accessible there you go pierre always coming through with a little clarity on some of those technical things um let's see uh babis is asking something i notice that the next previous link from the fen suite extension goes to the 404 page will the next previous be available in a feature base on attributes as well yeah babis that one's done and we just didn't get it into the docs before the release last week so we're actually going to do that today after this show we're going to go add it to the docs buy by tomorrow i would expect that to be live on the site okay so yes previous nexus there thanks and kane is asking cms library was awesome but you had to be careful with class names et cetera attributes takes all that stress away this was another thing you know if you copy and paste some javascript somewhere and you're just changing the class names and maybe you used a hyphen and it should have been an underscore or maybe you left it out and you know so like yeah this takes all of that hassle away from any of that stuff so let's see [Music] uh okay we have not addressed that yet so there's no question there so we obviously haven't addressed it let's jump into the next of this joe do you want to dive into your screen here and maybe let's show um how to apply an attribute let's jump into some of the cloneable resources let's take a look at some of this stuff how it works huh sure okay so here i am looking at our green car example this is from one of our clients green cars we have this as a clonable you can go ahead and clone this project i'm going to be going over some of the quick points of this just some of the ways that we've implemented this project if you want the full walkthrough there is a video of me walking through this in a lot more detail this is a filter system and what we have surrounding this filter system is a form our form is going to hold all of the ui elements that we're filtering by so here we have this left sidebar we have all of our filter options and these must live in a form the form can be just the sidebar it could be the entire project like we see here the entire page just needs to be in a form this right here this form gets an attribute and this is right from the docs cms filter element filters and that is right here in the settings panel of any element in webflow i can add a brand new attribute we have the documentation so that you know where to apply these so you can see that this was the form element and we have this element here same with the list whatever list that we are filtering by we go and filter by applying the element fs cms filter element list you can see that it has a lot more elements applied to it we have the sort element we have the load so we know this this list is filtering sorting loading it's using pagination we have the show query option we have a tag format and we have a zero duration on the the change of filter those are the two core attributes we apply to our filters on that form element and to the list element now the big thing you have to understand once you understand this you can do anything with this system and the understanding is you have to link the information from the filter ui to the list so in cms library we did this with a filter by attribute if you're a cms library user you applied filter by the keyword and that is how it filtered if you wrote the keyword as kia it would filter by kia the problem is what happens when that keyword changes what happens when there's an update in cms just like classes these attributes can go stale they may not work anymore because they are too specific so instead we use a identifier system and what this is going to do is tie this kia the hyundai the honda to the appropriate field inside the list so look at this we have our cms filter field make and make is our identifier so we're going to put this same exact attribute on the matching field of our list so if i go to the list we'll see the same exact attribute cms filter field make and this is how we make the connection this when i click this it's going to look in this field for the word kia but we don't have to specify kia in the attributes so if the word kia changes if kia changes their brand name everything's still going to work because it's the make identifier same thing happens for something like this gasoline we have cms filter field fuel and now we have to go and tie that to a field in the list so if i go here we'll see the same exact one cms filter field fuel hey hey joe and just to clarify can we look at the cms because you're just talking about like a reference field or something like that right sure you're talking about sure in the cms structure if we go to those brands or if we go to the cars we'll then see some kind of indicator for a make and or the fuel type right yeah absolutely so the ones that we just covered are reference fields reference and multi-reference we have our brands and then we have our fuel types and here in the cars collection we have this reference and multi-reference we don't only have to use these so i we just went over this linking of content from a cms field right this is from a cms collection list it's linked to cms it's in our fuel types we can do this we just went over these two examples we don't need to do this we can also search by static information we can also use the select we can use these range sliders so we can look at the same exact example here but outside of cms same treatment fs cms field location and that has to be applied to each one of these and it's going to look in location uh and actually this one has a hidden so it doesn't even have to be the visible text in the card it can go and be hidden text right here the location field we can also use elements like select so look at this we have in here the value is what it filters by so this will filter by 2007 2011 2015. and that's part of the year filter so we're going to tie that to the same field of year any questions should i stop and do some questions let's go a couple of these questions there's some questions in here for sure um let's see i said this last time i consider attributes an official web for release it's that good uh careful with that it's useful in webflow but uh we do not make those claims the these these are the opinions of the youtubers who make them uh let's see jeremy is asking why is the script added to the head tag and not the body in this implementation joe so that sure well first this is built with asynchronous in mind these scripts are loaded asynchronously which means that they're not going to stop the loading of anything else it's not something like cms library that you had to wait for cms library to be done for other things to happen we don't want that that was very difficult it led to a lot of problems so this is a much more performant system and we want that information right in the head available to us while still not messing with the load time we can run our processes in the background while other things are happening yeah um pierre asks a really good question here does it have to be a native webflow form or will it also work inside a form tag inside of an embed block or custom code you know what pierre that's a great question um if you implement that and it doesn't work reach out to it and we will make sure that that is supported we specifically built it with webflow form in mind but yeah i don't see a problem with using that in bed yeah and maybe if uh alex is in the audience if alex is listening uh he can answer in the chat and we'll highlight that yeah david is asking is it possible to filter with ui filters other than those of the form block check boxes radio buttons uh but ui filters like text block and buttons yeah that's a good question so i was i was a big fan of of making sure that you can filter with buttons and filter with link blocks and i was passionately shut down by our technical team and anytime that happens i step away i say i don't have i don't have the right knowledge to overturn this decision let me explain why this decision is in place forms exist on a website for the user to communicate with the website that is the basis of them whether that's a form submission that goes out to an email whether that's a filter system that's their core functionality to communicate user directions user input that's why they're called inputs so forms by default are accessible this is one reason that creating these these buttons and these link blocks these are not accessible by default forms are you can actually use the filter with a screen reader you can use it with any of these any other devices that would need accessibility second reason is it limits a lot of extra attributes that would be needed if you come from cms library you'll know that we had to apply multi or exclusive to say hey this only filters by one thing or this filters by multiple things by default using checkboxes and radios it's a firm declaration of i'm filtering by many things you can check box things here or you can only select one you can radio here and if you this was the one that you know there's just you can't you can't turn away from if you look at enterprise level filters online if you go and open up amazon or you open any serious filter system it's going to be a form there's a reason for this that they're not using buttons and link blocks they're using form elements because these are performant they're accessible and it's the way for users to properly communicate what they want so that's the explanation our technical team gave there was a probably a lot more great information than what i just said he's asking that that's up here the whole page is a form in the green car example is that for accessibility uh so that the filter and the screen together or another reason uh and joe maybe that kind of carries and builds off what you're asking there sure so the reason it's all inside of the form here is for full flexibility of any of our elements for example the active tag here we have this active tag it's another element we have the sort by it's another element we can move these elements around if the form is com is outlining the entire page we really can put our form filters anywhere we want is it needed on the whole page no there's you can just do it on the sidebar that's just how this developer decided to do it so there's no there's no specific use case for covering the whole thing but if it has covered the whole thing you don't have to worry about keeping everything in the form yeah nice uh peter blatchford attributes based behavior is so much more unobtrusive than class based no more removing classes just to change the look of the components love it one hundred percent um andras schaefer is asking uh can the new filtering have options for the one filter exclusive only one filter button can be selected similar to radio button but use a regular button or link block i think that's what we just talked about um so and i will firmly say that that will not be a thing we're not going to introduce buttons or link blocks or any type of element like that it's going to be exclusively form we want this system to be enterprise ready i don't care if you're building a single form with a single filter you're building a massive complex filter for an enterprise client this system is going to work for everything so we are holding ourselves at the highest standard and that means no link blocks or buttons yeah um here's another follow-up from andros the asking can the initial state of where did it go i just lost it can the initial state of a cms library start with no display and only show filter results once the filter is applied to filters without anything kind of selected or filtered or i don't know if you're asking andras there are you asking that then the page would be empty or would there not be elements on the page or i don't know maybe maybe that's unclear did you understand that a little bit uh differently that's how that's how i understood it that when you when you first load there's nothing there and once you interact it starts to show things uh yeah you know i i don't actually know the specific solution to go and do that but that i believe has been asked before and we've helped somebody do that so uh yeah if if you actually go to our official announcement video and you leave a comment on there the release team is going to help you so i'm going to be there all week answering any support questions answering questions like this so if you leave a comment there we want to get the comments popping on that channel and that's a great way to to show people that we're really supported too we're really we're really interested in supporting you so yeah please ask it there i'll help you out with that great uh real quick 86 of y'all on the stream 45 likes let's get some likes on that video this will help youtube uh put this video in front of more folks who need help with attributes or want to know more about this so let's see does the load under form does the load under form from cms load work with the cms filter because there's one or two things breaking my filter system when i enable to load under pagination joe yep okay right now we have four options for load more functionality load under pagination infinite scroll and render all at this time of this video only two of those work seamlessly with filter the pagination and the render all however we are going to release an update within the next week or two that will allow all of them to work for filter we have found that a lot of people want this visual effect of being able to filter filter a certain amount of items and then load more under even though those items are loaded really show more so we are working on this we've already gotten several requests for this functionality and it's in action so figure in two weeks from now all four of our options infinite uh pagination load under and render all will all work seamlessly with cms filter yeah and this is the perfect example of the kind of thing that if you have a request or if you want something like that head over to fenway.com forward slash vote um you you have an opportunity to kind of shape this thing there's not a ton of suggestions yet i'm sure six months from now three months from now whatever you know a year from now it's going to be like this crazy overwhelming list of things that people want but right now you've got an opportunity to be right at the top of that list so if there's something you're looking for if there's something you're you know you're interested in seeing a functionality inside of webflow uh go send it even if you're not 100 sure we can build it at least submit it you know it may not meet like the requirements of what we're trying to build some of the stuff may be too complex may require too much time but you know so we'll we'll have a system for sorting that stuff but at least submit it uh you never know what you know within a couple months might be available to you so let's see penny is asking for a year filter does the year need to be in a separate cms field or can it be extracted from a date picker field it can be a date picker field yeah yeah absolutely we we integrate completely with date so that is an option inside the cms filter docs i don't know if you're still sharing my screen i can uh yeah but i will go inside the cms filter docs and option i want this element to be filtered by date you're going to add that to the same element with the fs cms filter field identifier and this is now going to transform that field into the webflow date format so absolutely we work with dates if you have a problem with that we are happy to take a look awesome okay a question from christian schmidt i had the problem in webflow designer that chrome browser crashed after using attributes or is it webflow in general i doubt the attributes would cause chrome to crash um i don't know what's happening in the browser there um i have had webflow crack it doesn't happen a lot but i have experienced that before um but i doubt attributes would would add any additional load there i can't imagine that that's not the case j poucher smash the like there you go um okay david's uh thanking you joe for the question um the answer to the question dennis carg hey joe just like with cooking consent i have so many ideas and extensions that i would love to share with you where's the place to write you ideas that's that um finnsuite.com forward slash vote so if you go to [Music] slash finnsuite.com and we come to this shot here we can go to community voting and you can see that right under the attribute sign if you come in here you'll see a list of the different items that people are suggesting or that we're reviewing and so you can uh submit a request right here so you submit a request you pick what you'd like to share and this can be for content again as you look here we go to the directory you can go attributes noble air table fan suite extensions you can also suggest on uh content so if you want to see us cover a specific topic if you'd like us to see us build something this is where we're going to be handling all of that moving forward so uh let's see you seen anything in the comments i yeah somebody asked to check out the range slider and the range slider was one of the topics that i didn't get to in that part one filter system we needed to get that video out by no code conf didn't get to film this so i can quickly review how the range slider is set up in this filter example sure let's do it cool so we have these two range sliders here and the entire range slider has attributes on each piece of it so look at this we have range slider element wrapper we have a setting of minimum we have a setting of maximum we have our track element this track element is going to be the background this is all built in web flow so look at this we can assign the width we can assign the height we can assign the background color so if i wanted to do something totally custom i can go and do that visually inside designer we can also change the fill color so let me go back to this view here a chi uh child element the fill color can also customize that color so look how custom we can really make this range slider it is all integrated into designer and we know which part is which through the attributes this is how it's communicating with that javascript so we have our fill we have our handles these are the circles on the outside here and we can actually have two handles look at this there are two handles they're just both called handle we'll take the first one as the first one and the second one as the second one and then we have an optional input this is if you want it to work with let's say a form submission or if you want it to work with the filter we can actually put a webflow form input inside this range slider wrapper and that's going to have our information about filtering so you can see we have our fs cms filter field price we have our range this is the from input and we have a tag category called price range same thing with this but it's the two so it's a series of divs here it's that's all it is we are building this visually we have our hidden inputs we have our optionable our optional range values in here you can see it applied to a span and all of this goes and creates this element here and all of this is in the docs every piece of this you can see we we built the structure here for you we have this wrapper right containing everything in here we have the track that's that background we have the fill which goes on the track which is this color piece we have the handle you can apply two handles we have an explanation about this in here so if you want a single handle range slider you just add one handle you want a double handle range slider two handles we can apply the current values this is a really nice feature here so as i am dragging this you can see that the values here this one isn't formatted for money but we do have an option to format for money and there you go you can apply those values here on the spot uh that is an element and then we have all of these options minimum value the maximum value the steps of the range slider the starting value how you want it to format it's all here so instead of a traditional method where you would go out and find a range slider in a javascript library go and try to put some custom code to make that work in your form or your any ui that you're building you can build your entire range slider element right in webflow and you just have to follow this really simple structure yeah i need to dive into this myself because i was thinking it would be a cool um i think i was talking about this the other day like instead of like a range it would be cool as a timeline trigger you know scrubbing through a timeline like i imagine nice you could sort elements on a page by date uh or year or something like that and then scrub through those on a time that would be that would be super cool you know what i i have a feeling that that's possible who's going to build that who's going to come back next week with the timeline feature of the range slider do it do it you'll be featured that's right uh let's see joaomi is asking is there by any chance a way to sort by number of clicks for instance if you wanted a blog post to be sorted by the number of times they were viewed or is that beyond the scope we we are we're going to release one more attribute before taking a small break from attributes before taking a few week break for feedback and that one feature is a favorite or like solution so what you're able to do is go to an item save it or like it and that will be saved and you're saved or liked and the same kind of feel that we have here you'll be able to define all of the elements you'll define where the element comes from where it gets added to and you can create a whole favorite and like system the key to this is that this favorite and like system is only for that user's local browser it's not for everybody's liked items so the official answer to your question is no you can't count the likes and then display the top ones that were liked by all users out there attributes will not have that right now what we're about to release in a week is the ability for me as a user to favorite my own items and to like my own items so that next time i come back to the site i can see what i liked and favored it got it so yeah some more for creating like private watch lists or my saved items and things like that not necessarily for sending data back to some reference field that you can then filter or sort by although if that's something somebody suggests that we get a ton of votes you know we might consider looking at that it's not something that's immediately on our radar but that's what that voting site is for so if it's something you feel strongly about or would like to see us focus on that's the way to do it and then based on kind of complexity and reaction from the audience will prioritize those updates so let's see a quick follow-up same topic from pierre would that save as a cookie or in the cms system it's not in the cms system so we're not using api key for our attributes implementations we want everything to be super lightweight so since no api key no saving in the cms it will be more of a cookie system but we're not going to use cookies we're going to use local storage similar concept but not a cookie yeah allen connor brings up a good point to jeremy's question there saying it's possible using airtable and google analytics uh if you wanted to bring in like an integromat or if you wanted to bring in something else like that you could pull that data send it back into your cms and then use that field to filter by um it would be a little more complex it wouldn't just be attributes based but it is probably a problem you could you could solve um and pierre's saying the same thing if you do enough vote system that feeds into cms then you could totally sort by up votes with integromat or parabola that's that's exactly the point we're just trying to say is that you need something else in between you can't just do this with attributes you would need something else in addition to that a parabola integromat even zapier you could probably do it or something else like that um and alan connor saying uh connor finlayson did a video on it yeah there are some videos out there where you can do some of this stuff um i would check aaron kornblitt and connor finlayson they both do a lot of those kind of automation things so let's see anything else coming in on a question wise uh we have some good ones alan would the range slider work against a date field where you only wanted a filter based on year ignore date month uh uh alan i believe yes uh that the system is absolutely set up for that just because it's in a range slider doesn't mean that it it reacts differently to the form input so my answer to that is yes however i don't remember specifically testing that so one of the things that we're going to do is watch everybody implement people will come and say hey this one i want to do with month or this i want to do with this and we'll say oh yeah we forgot that use case we can implement that use case and we're just going to continue building the features that people are actually looking for it's impossible for us to come up with all the use cases so alan with things like that do it tell us if it doesn't work and we're going to put a fix in right away question joe this isn't from the crowd this is just from me when someone clones a project and they drop the system in the attributes are there right so somebody cloned a filter system and it was all set up and the attribute script was on the page like it would work right yeah absolutely absolutely it can work and we also have in our extension copy paste examples you can go in the fin suite extension which i do not have installed because i have a dev version but infant suite extension we can actually open up the list of attributes copy the examples that we have in the docs to our live site and then we can just press publish add the script add the example and just watch it work then customize so we have a lot of ways to implement this we want to make it so that anybody regardless of how they want to implement can go and implement it you can build it add the attributes on top you can copy our examples from inside the extension we're working on making these copyable right from the page here uh and yeah there's there's just a lot of ways to see working examples of attributes yeah um let's see peter dimitrov saying having a conversation with a big museum for a project that will need heavy filtering and i'm ex really excited to use attributes for that yeah go ahead let us know share that with us you know we'd love to see the work you'll build with that alan was asking for a little clarity joe is this the video announcement we should add a comment on the big announcement attributes right this is the the yeah that's the one the big announcement attributes replace the cms library if you leave a like and a comment on that one uh magical finn sweet fairy will come out and give you a high five that's exactly what happens uh lord bunny is saying would be cool to be able to make a conditional multi-step submission form uh do you mean with attributes that seems like it might be a lot to do with just attributes you might need something else with there um joe any thoughts on that i know we at one point were talking about you know refining the conditional stuff i think the extension and attributes kind of came it took priority over that but what would you say to lord there uh well we have an internal tool that we've built it's called the form logic api and this is something that we're using on client websites and it what it does is allows you to use a webflow slider or webflow tabs component and the tabs component will be every step of your form and you can route people to whatever tab that you want so we are working with this we have really big enterprise level client sites that are using this api we are now starting to think about how to put this into a ui for you we've had a little bit of trouble it's a pretty difficult thing to try to route properly and not make it look like a big mess of of ways to implement this multi-step but we're working on it i don't i don't have a solution for you right now it's a very complex thing and that's why we're trying to turn our api version of it into a no code tool for you yeah so and one of the things too that we talked about i think i remember talking about this when we were discussing this at some of this attribute stuff was let's make sure we're not interrupting the ui of webflow so you know making sure that those components when they come into you know that whatever that form element is that you don't just dump something in there and then all of a sudden it takes over more screen real estate or you know does something unnatural hides layers it makes you scroll in ways that you shouldn't have to or something inside of the designer and so coming up with a good way to let people set those conditions and structure those forms and stuff like that it's just it's not always the easiest let's see uh now with the filters we have some questions around the search i saw somebody ask do we have cms search our search is integrated with filter we're not separating search and filter uh we are seeing as when you're searching for something you're actually filtering in and out items from that list so yes we have search and then i see a follow-up question or some follow-up conversation asking is it possible when typing in the search field the search will wait to finish typing because the result flashes the number of letters uh that are in the word like jet boost's search input demetrius i'm i'm confused by the second half of the question here we can build in something that will wait for the search to stop typing i don't believe that's in there right now i believe it it's searching in real time as you're typing every letter uh but please clarify that question that second part because the the result flashes the number of letters that are in the word i'm guessing as you type each letter it changes the view um dennis do you see the comment i'm talking about yeah uh we were just looking at that right um because the result flashes the number of letters that are in the word yes yeah i don't i don't know if that's um yeah i don't i don't know okay got a better answer i think yeah uh let's see there was some stuff i was going to in the back that i wanted to get to before we moved on let's see will the filters at some point become hierarchical so we never have a no results outcome when filtering we are planning this out yes we have plans to to make a in search right now it's not in there we haven't started development but we are in the planning of that pierre coming in hot and heavy in the end the only real read production ready announcement made at no co com2021 was finn sweets attributes no comment um let's see create a blank test page and troubleshoot okay we can build a quick slider yeah can we do how about we build the glitches into an actual form submission interesting that would be cool that's a lot of form submissions i know right every time that form changed maybe yeah it would be interesting if like if if somebody saved this filter and it stored whatever settings were set i could see that maybe happening as a form submission but otherwise they would have to trigger something that read the inputs and stored them in that in that moment otherwise they're always dynamically changing when would the form submit trigger happen so like for that to happen you would need some level of trigger on the page to like capture that those that those filter parameters and we can do that the the submit button of your form if the submit button exists on the page if it is visible on the page it will be uses the trigger if it is not visible on the page it will not be used as the trigger so let me explain this i have a form and i do not want it to have a search button right this i want to click hyundai and it filters immediately what i would do is hide my form submit button display none it if it has display none the filtering happens instantly if the submit button is found if it's display block or inline or flex or anything we are going to use that as the trigger to update and the reason we did it on display is so that you can have different experiences for desktop and mobile so on desktop i think it would make more sense to happen instantly we see a lot of the content we can see the updating of the grid where on mobile maybe this entire sidebar turns into a pop-up modal and when we have the modal up we want someone to actually click filter results to run that filter yeah so that's a a really nice user experience no attributes needed just show or hide that submit button yeah nice uh nick is saying no joke is the greatest thing that's ever come to webflow i just made one of these for a home service company and they haven't love it um yeah it's always great to be able to build a little up boost in the functionality that helps uh help so many folks out let's see [Music] kane garland can you use mirror event with the filter search yes you can okay yeah can you use mirror event with the filter search not attributes is finn sweet going to develop something to add comments in a blog for example i doubt no okay that's not on our radar we don't get that request a little bit because with the little collector you might be able to leave a comment okay that's a future conversation that's uh that's not uh yeah um so no nothing native that you would be able to like inject to a blog article and allow comments uh you could use disqus or what is it um what are the other like discourse or i don't i don't remember which one the little comments there's a bunch of little comment and chat applets that you can add to your site that do this and they reference the unique url and so the cms each blog article has its own comment thread but it requires an external login so i i don't know i don't know if i see webflow ever building a comments plugin i could see if they opened the dev back end you know that somebody there might be like a plug-in in a plug-in marketplace or in like a an app you know store some external provider might build a plug-in that ties into webflow and that's how you could get comments but i don't i wouldn't see anything else happening uh before that i am going to share the airtable link so if you're still with us in the beginning of the episode we said that we were going to do a few free builds of an attributes filter system in somebody's project we just shared the form here go fill it out if you are selected we're going to take any existing filter system whether that's in cms library or any other system and rebuild it in attributes for you completely free by the fin suite team and we will tie some education around it for everybody else nice so go ahead fill out that form uh let's see can we let's i'll go ahead i was gonna say this comment exactly let's build this slider sure we have a few minutes left and it really doesn't take more time than that yeah let's send it um cool just gonna see if there's anything else coming in on the comments here while you start working on that joe [Music] um [Music] can i talk over this yeah sure go ahead okay all right so we are inside this cms filter example this is available for you to clone i'm going to duplicate this page just so that we're not in the way and i'm going to call it the slider example we're going to use the same exact list that we have here i'm going to start by just removing all of this filter stuff i don't need the filter column i don't need the content here i can go drag that out we don't have a filter grid i don't need my form i'm going to drag this vertical up here all right so we just cleaned this page up completely there we go i'm going to remove pagination and i will make sure that i remove all of the attributes on here so we have a fresh start okay cool so we just have a collection here i'm going to push a publish through as we continue and i will go and push this and we will navigate to our cms slider cms slider is going to require two attributes here first we're going to apply one to the list that's the fscms slider element list that's going to go right on that collection list that we have in there so i'm going to go back into designer i'm going to select the list we recommend putting it on the collection list but it can also go on the collection list wrapper either one works but by default we're going to put it on the list and i'll call it the list excellent now i'm going to go and put a slider here on the page i'll copy my margin bottom i'm going to remove this nav header and i'll go add a slider to the page awesome so we have our slider i'm not going to add any styling to this just yet the first thing i'm going to do is watch it working i want this webflow slider component to display the dynamic content that's exactly what we want this to do so i'll go and copy this attribute it's actually the same one that we just copied and i will go and add the slider value to it so now when i go publish it's not going to work yet because i forgot to copy this script step one copy the script put it on the page and then when i publish it's going to work i'll go and remove all of these and just have the slider here for us now there may have to be some edits that we do to the slider maybe we want to remove this background maybe we want to style maybe we have to apply auto to the slider itself that's uh sometimes needed so we'll see but either way we're going to have a working slider when we go and reload this page there we go definitely need some styling but we have all of our cars here in a slider and you can see that we actually have a lot of slider dots here what did that take like oh [Laughter] yeah i think it took more time to just clean up the page right and now look at this so this is a a bit too many slider dots here this works so well with webflow as a platform so what i'm going to do is limit my items and we only want to show 10 this is an appropriate slider amount i'm going to go to the native webflow slider and i have to do this give it an auto here it's going to help with some sizing issues and let's go and undo this and you know what let's just add some color here so we can see what's going on i believe i can style these yeah cool there we go now we'll push this publish through and we're going to see it look a little bit better uh definitely you'd want to go and style this for real but you can see how quickly it is how quickly you can turn this list into a slider as we wait for this publish i'll show you the difference between hiding your content and showing the content so here it's going to work with shown content but when we actually go to production we're probably going to display none this collection list it's going to prevent any potential flashing so we have this working example i'll start with the next publish and when i come on reload there we go so this is starting to look nice we still don't have any colored dots but you can see we have this beautiful slider totally cms driven and it happens pretty fast look at this and yep now that this is through it just loads it's as fast as the actual page load there's no flash of the content going from one place to another so that's the power of attributes that was pretty darn quick we didn't touch any code and really i think we spent more time just cleaning up the build yeah awesome yeah and um i mean armando's saying it here is that it that was so fast exactly yeah um i mean that's that's the game that's that's what this is all about uh and for sure you could spend a bunch of time you know adjusting that styling whatever you want uh to make it perfect um let's see is there a way to have the name of each car in a select field instead of using dots uh so using a can you pull a cms field into as a custom dot i think somebody was asking about this in our internal help kai was asking about this just yesterday or two days ago we built we built cms slider we built the custom slider dots we did not think of combining these two together we made sure all of our cms solutions worked together we tested every cms solution but we did forget to go back into those original static solutions and make that connection so right now at the time of this video no but this will work with cms driven slider dots nice peter's asking can we add more than one cms item per slide peter right now no but add that to the vote that should be there you know i i want to see that feature so add that to the vote get that up to the top and that could be implemented in weeks yeah elkin is asking do you think webflow will ever build a native filter function and why do you think they haven't yet this joe loves to speculate so much so let's put him on the spot here yeah so i don't think they're going to build a native filter i don't know why i don't have any facts behind this this is just my raw guess i think that they're seeing that there are solutions available and people are liking the solutions i mean there there are pretty good solutions to now work with in in all of webflow so yeah i don't think they're going to and even if they did we would still keep our attribute solution uh we we're just we're really dedicated to building out the solution whether or not it's native in the platform yeah yeah i think they're they're so focused on like high-level stuff i think they take a lot of these things and just assume people will build it when they open up the marketplace or the app store or the whatever that stuff comes and i think they're you know trying to get and race that point so i think it's all hands on deck on some of those bigger high-level issues and they assume that the community will kind of come and fill in those gaps which is what has happened so um foxy's saying call it magic this is also beautiful yeah we appreciate the love i'm assuming that's cloudy on the back end of there what's up claudia uh okay so i think that's i mean that's the gist of it right joe yeah what what else this is a pretty good overview yeah try it out that's the best way to to experience it go ahead go into the docs where are we on the docks not this not this go to these docs we have a lot of information here for you in this directory go and figure out a project that you're working on that can use one of these try it out do a real implementation after a few of these you're going to be a pro um i just started implementing this last week when i was doing the tutorial videos and now i can implement an entire cms filter system without looking at the docs which is pretty cool so i know all of you are going to get to this point also where you can just start building these systems without referencing this goes here and this goes here because really after a few it just feels the same yeah um okay going into a couple more questions here real quick peter is asking are all items loaded with everything wondering if we can load items only when we need to i'm assuming he's talking about that slider example there but it's also probably in reference any i think if you limit the cms list you know limited to just the the number that you're pulling there um but that's the way the javascript references those items so i don't know how you would be able to just um this may be a time to chat about the differences between the filtering and how it handles it hiding versus hiding them in the dom so i don't know if exactly that's what peter's asking i don't think you can limit specifically what you're asking here peter but i i don't i don't know exactly for anything that is a web flow setting we always default to webflow so if there is a setting to limit your items or to show pagination or to to do anything in webflow go ahead and apply that setting to webflow we have probably integrated with it so if you want to limit your slider to this many items you can use the limit feature of the list uh if you want to try to think of other ones um the like the the duration of the the slide change and the tabs change that type of stuff it's all integrated so i think that answers the question that's how i saw it too but please reiterate ask it again if that's not it for sure uh jay saying positive this is all f and awesome negative everyone keeps saying that's the best thing new to webflow this is not webflows thin suite they deserve all the props uh for sure uh we appreciate that this is so f and sweet is a follow-up there um yeah for sure armando well done guys i'll definitely try it out yeah check it out if you're looking to add any of the functionality on that site to your website you know i mean what do we have here let's take a look at this if we go into the directory let's just read through some of what you can do here auto video automatically playing pause while video is based on if it's in the viewport cms combine cms filter combine multiple collections list uh two one collection list again so it's the same stuff you could do with the cms library cms filter filter items in a webflow cms dynamically we talked about that during the show powerful load options for webflow cms collection lists so you can alter how things load cms nest nest webflow cms collections list without limitations so webflow limits you to five items i think when you nest so here you can get around those limitations cms select webflow cms dynamic form select slider we just talked about that sorting i think we showed that with the filtering as well cms tabs works very similar to the sliders which we just reviewed copy to clipboard is cool real easy to just add that functionality to your website if you want someone to copy something uh countless items custom favicon by page you know if you're doing some app like experience i don't know from a branding standpoint if that would be the best move but for some reason you might want to do that custom slider dots disable scrolling edit links in blocks and editor fix position untransform mirror click events mirror input values powerful rich text range sliders like it's it's all there so uh finsuite.com forward slash attributes forward slash directory you should go take a look the custom fab by page this one was a fin sweet hack because hello sign asked it asked to have it on their site interesting and the ask was to change the favicon for this microsite they built inside the project so they had their primary site it looked different and there was like a three-page microsite that looked completely different different styling system and they wanted that to have a different favicon so built a webflow hack after they asked for it and then that turned now into an attribute perfect yeah there's always a reason for something a really useful awesome stream today uh joe krug thanks joe and ryan our brain and tan kind of saying uh let's see yeah i think that's it great live today vinay saying what else okay thanks for the deep dive super helpful look forward to seeing what everybody builds now for sure and come share it with us at a show and tell i think we have our next show and tell it's like january 10th uh we'll announce that on the show again we're doing that ugly website party early december yeah lots of stuff going on the events committee is uh moving right along so uh anyway i think we'll leave it at that joe uh let's see what's our time at yeah we're over time here so um good stream thanks everybody for hanging with us uh joe any final thoughts as we jump out of here nope enjoy attributes and stay active communicate with us we're listening yeah cheers uh we'll catch you on the flip side [Music] you

Channel: Finsweet

Views: 3,058

Keywords: webflow, growth, livestream

Id: HdbFtWEfafE

Length: 72min 20sec (4340 seconds)

Published: Tue Nov 23 2021