I just ran into the limitation for nesting dynamic lists inside each other. This is killing me!
My client needs a landing page with a dynamic list of project cards. In each card, I need to show associated tags for the project (which is another collection, connected to projects with a multi-reference field).
Essentially this is what I need to accomplish:
Are there any known workarounds to do this?
Hi @helmsmith,
Yes, this is a pain. According to this page it is not possible at the moment:
At the moment, you can show multi-reference field values only on a Collection page, and not within a Collection list. Support for nested Collection lists is planned. Vote for and subscribe to status updates of this feature request.
Multi-reference field - Webflow University Documentation
Iām wondering if you can solve this by using custom coding (jQuery), adding invisible collection list with the tags and somehow make the relation, but I doubt that this approach will succeed.
You will probably end up adding the tags in a separate text field as well, besides the multi-reference field. Maybe you can automate this process with Zapier, but Iām not sure if you can trigger a Webflow event into another Webflow event (when project item = published, update the extra tag text field with multi-reference tag input)ā¦
Sorry for my thinking out load method as a reply. Iām curious though how this can be solved.
How many tags do you have for each project? If its many My work around this ots not a good solution
each project could have up to 5-7 tags potentially, though iād be glad to limit it to 3 or so on the landing page if that helps with the workaround
The you have to create 3 Fields using referense not multi reference. Then the data can be displayed. Multi reference only works for filtering
The primitive workaround I use is:
There must be some better way, but I am not a programmer and I havenāt found a solution on the forum yet.
Update: another option would be to create a multi-reference field in order to link collection items; but then also create single reference fields (which can be displayed within lists), and duplicate the links. May be quicker, but also you could hit the # of reference field limit.
Hey JT, Iāve been struggling with this exact same problem. So far Iāve found four approaches that work OK with tags. All of the require work and compromise, however I thought Iād summarize them here.
#1 - USE MULTIPLE REFERENCE FIELDS, INSTEAD OF A SINGLE MULTI-REFERENCE
Ditch the multi-ref field, and replace it we 3 reference fields to your Tag table. Tag1, Tag2, and Tag3. In your card, you program, style and color each them separately.
PRO - This sorts out your main view problem smoothly
CON - the CMS hosting plan only allows 5 references per table total. Depending on your table design, you may need to upgrade to Business hosting to get 10 references.
CON - if you need your Tag Collection page to display the associated tagged items, it gets a bit awkward because there is no āorā filtering in a Collection List. Therefore you cannot say "show me all cars where Tag1 = the current tag, OR Tag2 = the current tag, etc. Instead, if you have 3 Tag fields, you need 3 collection lists, each filtered to a different Tag. This munts sorting options, but at least you get the right list of items.
#2 - DITCH REFERENCES, AND USE SWITCHES
If you tag cound is manageable, you can put a series of on/off switches in your CMS table, each representing a Tag. That tag is applied when the switch is on.
PRO - Easy to implement.
PRO - No 5-field or 10-field limit, like References have.
CON - Sort order is fixed.
CON - Any tag-info pages have to be static pages, which you manually link to from that tag
#3 - DITCH REFERENCES, AND SPECIFY YOUR TAGS USING A CSV STRING
Pretty sure this works, but Iāve only done a conceptual design so far, details are here.
#4 - USE MULTIREF, THEN EXTRACT YOUR HIERARCHY THROUGH THE WEBFLOW API
This is the gnarliest approach yet. Here you use the CMS as-designed, with a multiref to your Tags table.
Separately, you build some code that will hit the Webflow API, extract your needed info, and build a hierarchy of Item to Refs as JSON, this is published to some URL.
Then, reference that JSON URL, and inject it into your Webflow page.
Now you have the Item to Tag data you need, and using jQuery you can add the correct Tags to each of your cards, including links, colors, etc.
PRO - The only solution that does 100% of what you want.
CON - Programming to create the JSON via the API
CON - Hosting this somewhere
CON - Programming the jQuery to create your styled Tags
This isnāt exactly what you are asking but this solution might work for some people: How to add dynamic filtering and sorting to your Webflow websites | Webflow Blog
Kind of hacky, but if you just want a list of things, and donāt really need the individual pages, you can create an iframe in the collection list, and make the src the link to the individual page. You can do this by adding dynamic fields in the code editor:
Create your collection list, with the iframe inside. The iframe will appear broken in the editor, but the published version should work just fine.
Design the template page to be completely blank, with just the multi-reference at the top (in my case, theyāre tags)
The result will be multi references in the collection list. Again, this is something you can do if you donāt need the individual page.
Iāll try updating with JS calls to see if I can maybe pull something without having to use an iframe, but thatās what has worked for me for now.
**** Update ****
A better way to do things is to write a javascript snippet that pulls the multi-reference info from the individual page. That way, you can actually style your individual pages and use them normally!
Since itās all on the same domain, there are no CORS issues.
Hereās my code, along with comments:
@ antar
Oh my gosh- this is exactly what I need!
Is the first div class ātag-listā (and the slug ID) supposed to go on the CMS page with the CMS list that pulls in the multi-reference fields? Or is it fine to just give the class on the CMS page ātag-listā?
Edit: Itās just literally as you showed in the screenshot! Got it working, was a bit finnicky in the code editor, but over all success! Thank you so much for sharing that!
@rosealway The first div class ātag-listā can go on both, if you want the style to be similar on both the individual page and the collection list. However, itās not necessary. What is going to let jQuery know where to put the tags is the ID, which, in my case, is the slug.
Great work @antar. This is closest thing Iāve seen to a solution yet. Good job 
As a Javascript noob, I had a questionā¦ Would this work for nesting the tags into another CMS item collection? For example, I have a CMS collection that lists all companies on my website. I want to pull in all of the tags for each company into each CMS item on the page. That way, I can then look to do some advanced filtering.
Thanks again for sharing, the Webflow community is strong!
So what I understand is this: you have Apple, Home Depot and McDonalds, and theyāre tagged with āKid Friendlyā, āGood Customer Serviceā and āFoodā. You want to display your companies like:
| Home Depot | Apple | McDonalds |
|---|---|---|
| Good Customer Service | Good Customer Service | Food |
| Kid Friendly | Kid Friendly |
If thatās the case, then yes, absolutely.
Webflow just put out the ability to nest collections, so for lots of use cases, you can just do that.
What I realized is that if you have multiple collections in one page, you can only nest collections in one of them, so you still might need my method of fetching via Javascript
Yeah thatās exactly it! Iāve tried the new nesting and itās awesome BUT it limits you to 5 items. Each of my companies has on average 8 tags so you can see why Iām looking for a workaround.
Iāve been trying your method, but itās embarrassing to admit, Iām having some trouble getting to work which is totally my own inexperience.
Iāve got the HTML embed in the CMS Items and I have another CMS collection on the paged with tag-list, but I canāt tell if itās working or not. How do I know if itās successfully pulling in?
Hereās my public link & live link . Page Iām referring to is Home Design.
Cheers for you help, youāre awesome!
Got it - If you could, send me a screenshot of your code, since some of the elements pull from the collection, and itās not clear what is what.
I appreciate the help. The collection for companies is āCompaniesā and the tags are in a collection called āCategoriesā.
Got it!
Looking at the company page, I saw that you have several tag lists. So, youāre going to have to load in several of these tags. To keep things simple, create four divs on the top, so instead of ātag listā, have something like
<div class="features-tags" id="{{slug}}-feature"></div>
<div class="activities-tags" id="{{slug}}-activities"></div>
<div class="shoe-styles-tag" id="{{slug}}-shoe-styles"></div>
<div class="sexes-tag" id="{{slug}}-sexes"></div>
Thereās a more elegant way to do this, but weāll keep it simple for now.
Then, in your script, youāre going to pull those divs by class and place them in the above divs:
<script>
window.addEventListener('DOMContentLoaded', function() {
jQuery(function() {
jQuery('#{{slug}}-features').load("/companies/{{slug}} .features-tags");
jQuery('#{{slug}}-activities').load("/companies/{{slug}} .features-tags");
jQuery('#{{slug}}-shoe-styles').load("/companies/{{slug}} .shoe-styles-tags");
jQuery('#{{slug}}-sexes').load("/companies/{{slug}} .sexes-tags");
});
});
</script>
This is what it would look like:
Test it out for me, since live links donāt let me publish, and the code wonāt run until itās published.
Another way to do this is to put all of your tags in a single div and pull that.
Also, you can nest THAT div inside of a hidden div, if you donāt want to show it on the individual company page ā thatās a clever way to have a layout thatās only applicable to the object thatās calling the tags.
Alright, done and published. How do I know if itās working?
You have to put a space before the dot down at the jquery call ā so itās .load('/companies/SLUG[SPACE].sexes-tags"
DUDE IT WORKED!!!
I canāt tell you how many forums and YouTube videos Iāve looked at to get this to work 
Forget hero of the dayā¦ youāre hero of the month. Thanks a lot! Really.
