Javascript + Webstudi Variable

At a glance

The post is about a community member who is trying to access a Webstudio Resource variable from an HTML block that adds JavaScript. The comments suggest that the community members have tried different approaches, such as binding the resource variable to an attribute and accessing it from the HTML embed script, or defining a variable in JavaScript and setting its value to the one from Webstudio using a binding. However, some of the approaches did not work for the original poster. The community members discuss potential improvements to the UI and functionality, such as making the expression editor more readable and providing better support for binding variables. There is no explicitly marked answer in the comments.

oomartineau

Hello,
I have an HTML block that adds Javascript. But in this one, I need to access a Webstudio Resource variable. But I can't figure out how to do this. Who's tried this?

Attachment

17 comments

BBogdan

You can bind resource variable to some attribute and access it from your html embed script

oomartineau

Humm, ok. Not easy, but can work.
But I think it must be a way to acces to varialbe..

BBogdan

We may introduce some API in the futute, though binding attributes is the most stable way.

OOleg Isonen

Wait there actually is, you can define a variable in javascript and set the value to the one from webstudio by using a binding

OOleg Isonen

this way you don't have to query an element to get the value from an attribute

OOleg Isonen

In the expression:

Plain Text

`
<script>
const x = ${myvar.whatever};
</script>
`

oomartineau

Humm... Didn't work for me. Do you have an idea ? 🙏🏻

Attachment

Capture_decran_2024-10-14_a_4.56.01_PM.png

BBogdan

It should be in the binding of code

JJohn Siciliano

I need to add to this docs. Note to self

JJohn Siciliano

ie click this plus button. Can you let me know your use case so I can provide a real example in docs?

Attachment

oomartineau

Great ! Seems to work. I need to go deeper to implement what I need.

MMilan Boisgard | Uncode School

Hi guys! I'm following this discussion and I tried something really easy.

On Body I define a variable = 1 (number)

after on an HTML Embed I tried this code:

But seems it is not working... I think I miss something

Attachment

BBogdan

${}

MMilan Boisgard | Uncode School

Sorry Bogdan it was easy. I'm tired tonight! Thanks a lot 🙂

BBogdan

No worries

MMilan Boisgard | Uncode School

I think the UI or functionnality could be improve:

1/ In the expression editor, it's not easy to read the code with \n.
2/ It's not easy to understand that it's not possible to type in code when we have bound elements
3/ It would be great to have the ability to bind just one element of a code we we type ${ and maybe with autocompletion of all our variables

But I know that is a lot of work to improve that

OOleg Isonen

agree, we need to think of ways to clarify all this

Add a reply

Join the Webstudio community

Javascript + Webstudi Variable