Add Multiple Nested Lists to Webflow Collections

in this video we're going to show you how to add multiple nested lists in your webflow collections let's dive in hi i'm kyle the creator of no code collab a site with tips tricks and tutorials for your next no code project if you haven't already please like this video subscribe to our channel and head over to our website where we have code snippets and other resources to help you with your no code builds okay so this tutorial is based on the finn suite cms library they have a tool in there called nest and it allows you to add multiple nested lists to a cms collection i will add all of the links to fin suite and to their script builder and all the stuff they have great tutorials so if you haven't watched those check those out the one thing they stopped short of though and that we're going to do here is actually show you how to add multiple lists because there's a couple things that you might need to do in order to make that happen and so i just want to walk you through that so that you can see exactly what you'll need to do if you want to add multiple lists okay so i first want to start conceptually as to what we're trying to achieve and how we're going to achieve it and then we'll dig into the actual code and dig into webflow so on our screen here we've got a collection list and we have some collection items so if you think of this like courses and we've got a list of courses and then each of these collection items is a course and maybe the green tags or the green multi-reference field is the subjects or the topics that are going to be covered in a course and then the red are the professors or the lecturers in the course and the blue are the buildings where that course is going to be taught so we've got several multi-reference fields inside of this collection item that we want to display this is what we are going to achieve the problem is and the reason that you're watching this video is because webflow only allows us right now to have one nested list you can't add more than one so there's a limit that you can only have one and actually you can only have five items showing from a list so this is the end state and webflow only allows us to have one now the way that we're gonna do it and i'm gonna show you the next kind of the next page here is we're gonna add a couple extra bits to our page and then we're going to add the finsuite cms library and we're going to kind of mock this up and we're actually not going to have any nested lists at all when it comes to the actual like proper nested list we're not going to have any of those so here's how it's going to work your new page your new collection is going to have inside a collection item you're going to have like a little what we would call a target or you're going to add a div to your collection item that is going to be the place where we're going to put all of these tags so we're going to have a green target a red target area and a blue target area the other thing you're going to add to this collection inside of it is you're going to add a text field so we actually have to update our our cms collection we have to add new text fields and we're going to write out we're going to list out exactly what the tags are that we want to go into these targets so if you notice i've got green one green two green three down here i only have green one if we look over here i'm trying to get green one green two green three green one green one green two so what i'm doing is i'm actually listing out in text in a comma separated list i'm listing out the tags and then what happens is below our collections we're going to add other collections that is listing out all of the greens and it's listing out all of the reds and it's listing out all of the blues and what's going to happen is fin suite their little cms library is going to come in and they're going to go oh i need green one green two green three they're gonna come down here they're gonna find does green one exist oh yeah here's green one and they're gonna take this and they're gonna copy it and they're gonna put it right in this green target zone and then they're gonna screen two and they're gonna find oh here's the green item two i'm gonna put that in the green the green target zone and green three and i'm gonna put that in the green target zone and it just goes through all of these it says oh red now i'm gonna look red one yep that exists i'm to put that in the red target zone so it just it's reading your text and what you've listed out and then it's going down below finding that item to see if it exists and then it is putting that if it does exist it is putting that into that target zone now through css what ends up happening is you're gonna end up hiding a bunch of stuff as well so you're not gonna you'll see the you'll see the resulting tags but you're not going to see any styling around that target you're not going to see the text because you're going to hide it and then all of these lists down here will be hidden as well so you can see i've kind of grayed these out to indicate that we're going to hide them later and the result is if you can get past the gray the grayed out stuff that's that's hidden or will be hidden you end up with exactly what you wanted you ended up with this nested collection list the multiple nested lists inside of your your collection item so that's how we're going to do it we've got to add a couple target containers we've got to add some text and then we've got to add all of our lists below so that is conceptually how we're going to do it and let's dive into webflow and the javascript code that you'll need to do that all right so i've logged into webflow i'm gonna head over to my collection because that's the first thing we need to update i'm gonna go to my courses collection click on settings and now what i need to do is i need to add text fields that are going to correspond to my multi-reference fields that i want to show as nested lists so i've already added them but you can see here i've got continuing education categories and then i've added added a continuing education list as a text field majors category multi-reference field majors text field generals multi-reference field generals text field so i've added these text fields to be associated with my multi-reference fields so that's the first thing you need to do so i'm going to save that now if we head into a a course you'll see that we have a i've added two categories here to my multi-reference field and then i've just listed out those categories by text in a comma separated list exactly as they're shown so right now if i wanted to add say a generals i could pick negotiation and i'm going to type out negotiation if i wanted to add multiple then i would add a comma and then the next one is communication i could add communication and then i could say communication so that's all you need to do that is the one extra step you need to do in your collections is you need to add this text list so we've got our our cms collection now updated we've got the text we are adding the comma separated list so we're good to go there okay so the next thing we need to do is head over to our page where we can start adding some elements to the actual collection items so if i jump over to my course card as i'm calling it where i've got all of my information you can see here what i've done is inside of my collection item which i'm calling card here i've got four empty divs and these are the targets those were those colored blocks where i'm saying this is where we're going to put stuff and so i've got four empty divs one is called continuing ed target the other is the major target general target designation target so those are the four targets then i also have listed out my text fields that are associated with those multi-reference fields so continuing edge major general designation and you can see them here continuing add text list major general this card didn't have any designations so it's not being shown but so those are the two things that i've added to the actual card or to the actual collection item is these empty div block targets and then the text fields that is pulling in if you see i'm actually pulling in the the text from those text fields in the collections the other thing that i've got that i'm not showing because they're hidden right now but i've got my continuing ed multi-reference collection and actually let me show that so you can see what's going on here at the bottom you can see here all my continuing ad items here are my my majors here are my generals and here are my my designations so these are all being listed out at the bottom the key here is however you style these in the bottom those are going to get copied and pasted up in your target so if you want them to have this pill like shape if you wanted your your pills to actually have more of a rounded shape you could come and you know add more more border radius whatever you want to do however you style it whatever you style down here that's what's going to get copied up above so just know that so i'm going to now hide those lists again you'll one thing to notice though before i do that is my list actually has a a custom name that you'll need to remember so what i've done since i have four things and i just want to keep everything straight every time i'm talking about continuing education i say continuing ed dash target contin continuing ed dash text list continuing ad dash multi-ref major dash target major dash text list major dash multi ref so i have this like this pattern which will make your life a lot easier if you just continue on with that pattern so i will know that everywhere i'm talking about continuing ad it's going to be cont add contad content and major major major designation designation designation so keep that pattern it'll make your life a lot easier so you're going to not you're going to need to change the the class on these hidden lists as well to make sure that we know where to look when we're pulling things in so now i've added my lists i've added text to my collection items on those hidden lists i've styled them up to be just how i want them to be and now what i'm going to do i've given all of these a class of hidden lists because i don't want to show any of them and so now i come and i'm just going to hide this this these collections so this is where we're at and actually what i'm going to do as well is i'm going to just hide all of these text fields as well because i don't need any of these showing up in the final either okay so now as you can see because we haven't started pulling those pills up it'll only happen on the rendered site this has like an empty space so this isn't how it's going to look in the end but it when you're developing it and you're in the in the designer it's not going to show so now we need to get some javascript we need to get the fin suites cms library we need to get that added to our site so if we head over to our our fin suite cms library script writer the t the link is in the uh is in the description what we're going to do is we're at this page i'm going to select the nest product so i tick that on and now you can see they started to give me some of these things that i need the first thing to not make sure you don't miss is we need the the class of this dynamic list so what is this big list here we are or put another way we need the class of this collection right this this whole collection list this is the class we need to add and in our case that is called continuing ed collection list or this could actually be called courses collection list um i wasn't too consistent there actually so but i'm going to copy that make sure this is copied verbatim and i'm going to paste that right there so now i've got now we know where our targets and where we're looking for this text and where we're going to be placing so that's the first thing i did then i need a text list so i'm going to come in here and i want to start out with my continuing edge so i'm going to grab this and there is my text list then i need my nest source so what is the source for the things that are going to go into the target so that is actually down here if you remember that is the continuing ed multi ref copy that paste that in and now you can see this script is updating on the right and now i need the target what is that block so if i come in here and i get my continuing add target and i paste that into so now i've got if i were to copy this code and paste that into my site i would have one nested list inside of my webflow collection so now i'm in webflow i go to the page that i want to add these nested lists to i go to the page settings i scroll down to the before body tag you can do it beforehand it just will block possibly block some other things from rendering on your page so it's maybe a little better to put it in the before body tag and what i'm going to do is i'm going to paste in that code this is exactly what i just copied from the visual scriptwriter from fin suite now the thing is i've only got one one nested list so what we need to do is add more and all you have to do is this little component here that says fs component dot nest what we're going to do is we're going to copy that copy that and actually before you copy it add a semicolon at the end right right before the after that last parentheses not at the final one but this little thing here is the is the little function that is being called and in order to have multiple functions we need to tell javascript to stop to end the function before so add a and the way you do that is through a semicolon so add a semicolon then copy the code and now comment and here's our first let's make our our second list so if you remember i had majors i can't was it majors or major let's just make sure that we're doing it right so i've got major general and designation remember i got major general and designation those are my additional ones so i'm going to go to my my page open this up and so all i'm going to do now is take out cont ed and i'm going to do major and now what's going to end up happening is i've effectively added another nested list for majors and if i do this again and i can now do it for designation and then i'll do another one for general so what i'm doing is jen roll now what i've done is i've added this nest component this nested list for all four of those multi-reference fields so if i shrink that back down and save it i'm going to zoom out a little bit so i've got my i've got my javascript added i have all of those components my target zones my target my lists my comma separated lists i've got my hidden lists the other thing you need to do is you need to make sure that you've updated the the class names on all these as well to match so we've got major multi-ref i've also got general multi-ref and designations multi-rev so make sure that you've got all of the classes added to everything you need check on that check on the javascript if we publish if we publish we should see these pills get rendered or these multi-reference fields get rendered in real time there we go so i've got my all of these pills that i added what was happening remember now if we come back here what's happening is those pills were listed out in text the cms library grabbed the items and put them up into our into our target areas the key there the big key is making sure that in your javascript you're adding you're just duplicating that nest function and then adding a semicolon to kind of finish things off and make sure that it that the javascript knows to start a new function so that is how you add multiple nested lists using the fin suite nest product in their cms library okay so there is one troubleshooting tip to make sure that you're doing this right in your collection item in the actual in the webflow back end if you have a trailing comma it's going to throw things off so on your very last item on your text list make sure you don't have a trailing comma if you end up with that what's going to end what's going to happen is for example if we if we if we add them to all of these what's going to happen is it's going to actually display all of the items that are available it's going to show everything in that in that reference in that multi-reference field so if we publish that and then head over and refresh you'll see that now i'm showing everything that is an option but if i just take off that trailing comma you know let's say i just want it to be p and c take off that trailing comma that trailing comma and there publish it it'll come back to normal but if i don't then i'm gonna have then i'm gonna have problems and you and you're gonna see that everything gets gets listed and it just kind of creates some headaches so if you're having if you're having troubles things aren't showing be sure to check for the trailing commas make sure all of your classes are uh are typed out properly they're all in the right places you've got all of your uh your targets and your texts and then hide everything and you should be good to go hopefully that tutorial was helpful big shout out to the fin suite team for creating an awesome tool for the community to use i know that i've run into the nested list limitation a few times and so having the ability to kind of have a workaround and actually create that dynamic functionality is super helpful so hopefully this was helpful please again like this video subscribe to our channel and we will see you at the next tutorial [Music] you

Channel: No Code Collab

Views: 131

Keywords: Finsweet, Finsweet cms, Finsweet nest, Nested cms lists, No Code, Webflow, Webflow cms, cms, content management system, web development, webflow tutorial

Id: NgogjCFG_iI

Length: 22min 1sec (1321 seconds)

Published: Sun Nov 07 2021