Webstudio

Log inLog into community

Join the Webstudio community

Updated 5 months ago

CMS values accessible in embedded html component?

CMS values accessible in embedded html component?

At a glance

The community members discuss ways to access data pulled from Supabase within an embedded HTML block. The first option suggested is to bind the data to elements using data attributes and read them from the embed. The second option of putting the data as JSON in a script tag was initially proposed but later found to be unavailable. The community members provide some documentation links and discuss the basic JavaScript/HTML logic to access the bound data using dataset or getAttribute. They also discuss a potential upcoming feature to use JSON data in expressions, and a community member suggests a simple "Hello World" example to demonstrate the use case.

Useful resources

·

If I pull in values, say from Supabase and it's 3 or 4 rows of data, is there a way for a script inside an embedded html box to access those values?

O

H

23 comments

Yes, one way is to bind those values to an element via data attributes and read it from embed.
Another way is to put them as json into a script type text/json and read from it as a json string and use JSON.parse.

Second option is better if it's a large config

Is there any documentation on how to do the 2nd option? I think I could figure it out if I were just creating a straight html/js page, but I still struggle to understand how to make it work with the component structure of WS.

Actually upon further investigation, second option is not there. I thought it worked but it doesn't and it sparked a great internal discussion. Hoping to solve this soon.

First option works though

Subscribe to this issue https://github.com/webstudio-is/webstudio/issues/3872

Where can I find documentation on the first option?

https://docs.webstudio.is/university/foundations/cms
https://docs.webstudio.is/university/foundations/expression-editor

I think I have a handle on pulling in data from a CMS such as Supabase. Great tutorials there.
Where I'm still unsure is how to access those bound values from inside an html embed.

we don't have that particular documentation because after you put data into attributes, accessing it from scripts is basic js/html logic, not specific to webstudio

So, I'd just refer to the element's DOM ID and read attributes that way?

const element = document.querySelector('.your-class')
element.getAttribute('your-atribute') or element.dataset.whatever

yeah

dataset / data attribute is best fit for this

Awesome! I think I was making it more complicated in my head than it actually is -- imagining a completely different structure for components and embedded html. Thanks again!

Hey @Hero we are close to releasing the ability to use JSON data in an expression, can you describe your use case in a greater detail? I am loooking for a best possible scenario for the demo

SO SORRY! I did not see this.
My use case is something like this...

Use slugs to pull in data from cms.
Have an embedded HTML block that needs access to some or all of the resources pulled in from the cms.
Use the resources to set attributes in the embedded html (such as img src) or as a parameter value in a javascript function.

A simplified actual example would be an audio backed slide show.
I have javascript code that can play an audio and at various timestamps, replace the src of an img.
When running that in a standard html pages, I can pass a script the audio file path and an array of image paths and timestamps.
The audio begins playing and as each timestamp from the array hits, the corresponding image is shown.

I see, thanks.

So, that seems doable now with the new update?

yes, I think its already live

we haven't announced it yet, because we are still thinking how to explain the use cases for it

your use case seems a bit too special

we need a more mainstream one

otherwise people might not get it

Totally get that. While not necessarily a real world example, you could explain with a Hello World example.
Pull crm data via slug, save as resource, add a html embed block with javascript that takes a value from the resource and displays it as an Alert.
That would very simply demonstrate how it works which would be easily applicable to any specific scenario. If I had that demo, I could easily apply it to my use case.

Add a reply

Sign up and join the conversation on Discord