Accessing variables

Hi Team,

Is there a specific way to access variables via JS? I would need to use some custom code and was wondering if there is a specific way that I need to do in order to access variables? For example, I would like to create a variable that later I would need to overwrite / read with JS. Thank you!

Just to give you a background I will use < input > type colour and need to save the selected colour inside a variable

1 Like

Hi Edward!

You could take the variable’s id, which you can find here:

And manipulate it with JS:

Or you could use the “Change variable” action in no-code workflows and manipulate it with no-code functions or custom JS:

Does that help?

1 Like

Hello!

Thank you for your help.

What I was trying to do is the following:

Add a custom colour picker to the page (feature request submitted for element :slight_smile: )

<input
    type="color"
    value="#ff0000"
    oninput="updateColorText(this.value)"
/>

<script>
function updateColorText(colorText) {
  var test = colorText;
}
</script>

what I need to know if what variable name to use instead of text. Shall I just use id?

The above code updates variable “test” to the HEX value of the color picker. I wanted to understand if I have access to weweb variables like that

Hi Edward,
the best way to do what you want is to develop a custom Weweb component (its a simple Vue component).
We have information for dev documentation here

Our own input component is open source, you can find it here

If you are not confortable with developement, you can still access the variable information, but that will probably don’t go well as you will be completly out of the system, and this will be a hacky non stable way to do it

2 Likes

Thank you. Ill take a look!

@aurelie Is this component: https://github.com/weweb-assets/ww-input-basic published in the editor?

Because all I had to do is to add: type { value: ‘color’, label: { en: ‘Color’, fr: ‘Couleur’ } }, to config.js and for that small change I would not publish if the component is already published ti avoid duplication, I would just request that small update from your team. Otherwise to save time, all I would do is to add that change and publish to prod as everything is built including updating a variable with input value in the plugin you mentioned

Update: I see the component is published but with preselected type and as separate components. Let me know if I should publish my version as preselected color type.

Thank you for your help. All done, component published (note the native color picker does not show up on the video but its there :smiley: )

screencast-editor.weweb.io-2022.02.09-12_55_15

1 Like

That’s so cool! Nicely done Edward!! :raised_hands:

1 Like

Hi Edward, I am happy this worked.

Indeed this is our internal input component, and I opened a ticket for the product team.

Feel free to use this fork, all our components are opensource :).
So you are not blocked if we have not yet the time to implement the change (even if this is a small change, we also have to handle some checks and test on our side).

I am wondering if maybe we can also accept pull requests in the futur :slight_smile:

I will let you know if this is pushed in production on our side.

2 Likes