Is there a way to access CMS fields from within an important Code Component?
I know this feature is still very new and I’m very excited for the possibilities but I think being able to access CMS data from within the useWebflowContext or some other API given to us directly in code would be great. Currently the only way I’ve been able to access the CMS was through the plain CMS data api which required me to create a cors proxy hosted on the site with Webflow cloud. This approach is not very clean and I feel it could be better and really expand upon code components!
Hey there @Charley-NOMOS - Welcome to the forums!
This is a great question, and we’ve got some upcoming documentation on this, so please stay tuned.
The examples we used for CMS use the DataAPI. However, some other community members - @Julian_Galluzzo and @viratpatel - have been using custom attributes to access item data.
See:
I’d love to see what you’re currently looking to do here with the CMS Items. Also, if you can, please join our upcoming developer office hours on October 28th at 10AM EST for some demo’s on this exact topic. Don’t worry if you can’t make it - we’ll post the recording, as well as docs right after.
All the best,
Vic
So the code components have SSR without access to CMS data?
I just looked at the CMS Slider and Filter examples you shared. The concept I’m working on is similar to the filters, but I believe that both approaches feel a bit hacky. I think there’s an opportunity here to make CMS access within Code Components a first-class feature.
Right now, the useWebflowContext hook is fairly limited, it gives us access to interactions and a few runtime utilities. What I’m proposing is expanding this API to include direct CMS access, something like:
const { cms } = useWebflowContext();
const blogs = cms.collection(‘blog’).select({ fields: [‘title’, ‘slug’], filter: { category: ‘news’ } });
This could mirror the flexibility of Webflow’s Collection Lists while keeping everything inside the Code Component environment.
For example:
Say I have two collections blog and categories, with a multi-reference field linking them. Right now, if we want to filter blogs by category using tabs or buttons, our options are limited:
- Use Finsweet’s filters (which is equally hacky), or
- Duplicate Collection Lists (which quickly runs into Webflow’s nested collection limits of 2 per page).
However in code this is trivial. With CMS access via useWebflowContext, we could fetch all categories and blogs and filter client side for smaller datasets or by filtering directly within the initial API call.
This would make Code Components a lot more powerful and viable. Webflow is absolutely amazing but for more advanced functionality we have to rely on external workarounds like Finsweet which don’t work all that well, or simply work within Webflow’s limitations. I think we can really improve in this regard.
Hey Charles, I use two approaches currently-
- Single record - property binding a code component in a collection list / collection page, and then using the list / page to isolate the record for the component input.
- Multi-record - collection list slotted into the code component, which absorbs and uses the data.
It sounds like you’re talking about something more free-form, with larger data requirements and possibly dynamic filtering at runtime.
For that, I’d personally build a special “datasource” component and middle tier that your components can talk to ( nanostores, or a controller pattern ).
Your idea is interesting, but I don’t think I’d want data sources hardcoded in my code component typically - it makes them much less portable to other projects, and less resilient to schema changes. Plus, a datasource component could support multiple different datasources - RSS feeds and such.
Would you happen to have an example of putting a collection list into the code component? Would this be done through props or through children? I don’t want to have to query hidden elements somewhere else in the site if possible to get the data, that make it feels like a workaround that will break at any moment.
I see what you mean with data sources being hardcoded into the component being less portable but at the same time I see code components being used for more advanced tasks. If it can be handled in webflow great, but for things that call for a more custom approach I’m fine making a semi-dedicated component.
Currently I slot them. How much data are you talking about? < 100 items? I’d build it in different ways depending on the specific goals.
I don’t have a code sample for you and I’m investigating some alternative approaches but here’s my masonry code component, which slots a collection list of images-