Webflow API, how to query a simple collection list?

Hello,

It seems I can’t find the proper documentation to start querying my collection list using pure javascript and the webflow API.

There are paid third party tools that allow to use the webflow API but I’m trying to use it via simple javascript - have someone ever done it before ?

Any help highly appreciated… trying to overcome the 1 nested collection list limitation of webflow… :slight_smile: (yes, I did try the Finsweet combersome solution)

Anthony


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Anthony, collection lists are a client-side UI element, and the API cannot be accessed client-side due to CORS restrictions.

If you’re writing server-side JS, the API docs will have everything need regarding how to query the CMS, however be prepared for a lot of complexity if you’re trying to build a “query” feature.

If you’re writing client-side JS, you can use the collection lists to retrieve your data, and then use client-side JS to extract and manipulate that data. This is the most common approach.

1 Like

Hi Michael,

thank you for the insights ! Indeed at the moment I’m simply doing client side manipulation, not server side. Would you have a small snipet exemple of how to retrieve data from a collection list id using client side JS ?

The collection list just renders as HTML in your page, so whatever you build will be custom script to parse that and extract your custom data.

When I build these for clients each is different because the data is always different.

ho yes right, my bad I know how to parse html element with javascript - my issue is that I can’t parse what webflow can’t display in the DOM because it is limited to 1 nested collection list per page.

I need to find a way to use the Webflow API via a third party like Postman so that I can retrieve the data that I need to then inject it into the DOM so that my new Finsweet CMS filtering can work… such a pain to filter complex project with Webflow since it can’t handle many items it seems

Or you do like Finsweet does, but simpler and more performant to your use case. You emit all of the content of your CL and reorg/clone it how you like.

In some cases, it makes sense to store your nested list on the parent’s colleciton page as hidden element, then just fetch and extract that one chunk of HTML. No more 5 nested items limit.

In some cases, it makes sense to store your nested list on the parent’s colleciton page as hidden element, then just fetch and extract that one chunk of HTML. No more 5 nested items limit.

I think the issue is, not more than 1 nested collection list is allowed, even on template page.
Or maybe I haven’t understood the process you are suggesting ? The problem I have with Finsweet, is that their fetching method is extremely slow with a lot of items, especially if it has to fetch template page that has a lot of content.

here is my read-only link: https://preview.webflow.com/preview/nested-collection-list-ffs?utm_medium=preview_link&utm_source=designer&utm_content=nested-collection-list-ffs&preview=667f234b706d659fd9254e7d69683e1c&workflow=preview

At the moment, I’m looking at the developer API documentation.
I could successfully query my collection… my only question is, how do I implement this code on my website, server side ? The only information I could find on the webflow API documentation is for building an APP that will interract with a certain webflow site, which is not what I’d like to do.

I typically build these without using any nested collection lists at all. Just design your CMS so that you can generate the items you need in regular non-nested collection lists and then collate them using your custom code.

In the AJAX approach I mentioned you wouldn’t use nested CLs on the collection page either. It already acts as the parent item context so you just list its children.

I can’t give much more suggestion without actually designing and building it for you- the main thing is to realize that there are other ways to retrieve and assemble the data you want, and your scripts can reorganize the elements on your page however you like.

That leads to a lot of possibilities.

FS CMS Nest is probably their one lib I’ve never used, simply because I prefer more direct and efficient control. FS is trying to solve “all” the problems, which often comes at a performance cost. However most of the time if it’s running too slowly you need to reconsider your configuration and what you’re trying to do.

The CMS API really won’t help you here. Even if you build a server side piece to get that data and expose it to you through your own custom API, you’re going to run into caching requirements, rate limit issues, sync issues, etc. You’ll be building a partial clone of your CMS. Feeding your live site is not what the API is designed for.

Get creative with your schema design, your use of collection lists and scripts instead, and you can solve most UX design issues more easily.

1 Like

Okay, appreciate your help.

I am following your suggesion and might have found my “creative” way to get around the multi nest categories by simply introducing an “option” field for each CMS item so that I can specify groups directly within the CMS.

I’ll keep you posted once I have a successfull Javascript snipet that will allow me to extract the data and manipulate it in the DOM :slight_smile: