Reference Webflow CMS in Custom Code

Design help Custom code
1

I’m wondering if there’s a way to reference my CMS data via custom JS code.

I wish to run dynamic queries based on user-generated data.
For example, if I want to populate a dropdown using Webflow CMS, I could use @PixelGeek’s tutorial on how to do this.

However, this necessitates a Collection List component whose value I must select as a single field of the CMS record, and has the following limitations:

  1. If I only wish to populate the dropdown with values from my CMS collection based on a query (e.g.: select * from my_cms_table cms_record where cms_record.field_1 = "some_value_1" and cms_record.field_2 = "some_value_2"), I can’t do that. I’m forced to use all of the items in the collection list. This gets trickier if one of the filters is based on information I only find out during the user interactions (e.g.: if the user entered “A”, then the filter will be foo = "A")

  2. The value of the collection list component is limited to a single field, so I can only choose to populate it with cms_record.my_value_1 and not some combination of cms_record.my_value_1, cms_record.my_value_2, …, cms_record.my_value_n. Therefore, I can’t do things more powerful than something simple like populating a list of plaintext items.

So, is there a way to get around the above limitations?
Or, more generally, is there a way for me to query my Webflow CMS values dynamically and programmatically using filters however I like and get the entire object to manipulate its data flexibly instead of just retrieving a single field?

I know that Webflow’s API for CMS could be used in such a way, though I believe it is not designed to be used from within a Webflow site but on an external server / web app. So it would seem appropriate that if this is possible from an external API call to my CMS, it should also be possible from within my own Webflow app?

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

2

The only way you have is to create a gateway server that gathers the data you need and filter and expose that to your webflow site code.
Or you stay inside webflow collection list limits, or you fetch from outside, you can’t use Webflow APIs from your frontend

1 Like
3

Lots of big limitations here, because Webflow was never built as a developer toolset. It’s heavily designer-focused, which means devs use a lot of string and duct tape, or need to build significant bridges using automation, custom code, and custom-built APIs.

The inability to dynamically query data is one of those big limitations.

You might look at a solution like Wized and Xano which address a lot of these problems for devs.

1 Like
4

Yes.

Webflow doesn’t give you those options directly, but that doesn’t mean you can’t set that up.

The biggest issue is getting the data from the CMS to your frontend. That tutorial you linked was a good example of a work around.

Another (more common) approach is to create your own, or use another API layer in between your front end and the Webflow CMS.

  1. Frontend requests data via Javascript to your API layer.
  2. Your API layer figures out how to get that data.
  3. Data returned to your frontend for display.

For number 2, the common approach is to mirror your CMS into another datastore (like Airtable, etc…) that gives you better searching / querying. You glue this together with Webhooks:

Now you can more easily address the two limitations you mentioned and would like to get past since you can better query your data.

5

I see that the more I know about Webflow, more reasons I have to drop this technology and look for something else. These limitations become really bad in terms of time consuming, which I belive it was the main purpose of Webflow. Fast development or maybe not…