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).
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.
Create a rich text field in the collection item editing panel.
Hand type the same items that are in the multi-reference field, and then link each of them to the same collection items in the multi-reference field.
In the page displaying the list of collection items, insert a rich text field which pulls the text from #2 above.
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
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:
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 ****
Since it’s all on the same domain, there are no CORS issues.
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
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:
Good Customer Service
Good Customer Service
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.
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
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.