How to Store Global Variable into Wappler Variable

[Kodiak]

This might be a super easy question but I am not sure as I am just not familiar with it.

I had a developer write some code I have running and on a button click, it runs the code and creates a “Global Variable” that I can access if I simply type in the variable in Google Console “design_data”

design_data is an object.

I am trying to figure out how to pass this into a wappler variable or bind the value to a wappler variable but cannot figure out how.

I am able to also view the variable through…

window.design_data

globalThis.design_data

Any ideas on this?

[s.alpaslan]

Hi @Kodiak ,
Can you add the code they wrote for you here? I think the answer to that question is there.

[Apple]

Check this:

How to modify page variable through Javascript?

Hi, I have the following variable: <dmx-value id="pageLoaded" dmx-bind:value="0"></dmx-value> I need to set that to 1 from Javascript code, such as: <script> // Do something here pageLoaded = 1; </script> I’ve tried doing stuff like: dmx.parse('pageLoaded') dmx.parse('pageLoaded.value') But it doesn’t give me the contents of the variable, it returns undefined What am I missing?

[Kodiak]

Ok so I have the variable storing like shown, and can call it / view in in the console…

dmx.global.data.designDataVar3

I just don’t know the path to “access” this variable in a server actions.

NOTE - I am just trying to set the value in a server action for now to ensure its working properly with no success.

[Apple]

@Kodiak

Ok so I have the variable storing like shown, and can call it / view in in the console…

dmx.global.data.designDataVar3

Who created this variable? Your custom Javascript code?

@Kodiak

I just don’t know the path to “access” this variable in a server actions.

Perhaps it’s better if you work backwards, you create the variable in Wappler and then try to access it using the browser’s console

[mebeingken]

@Kodiak

I just don’t know the path to “access” this variable in a server actions

There is a button available to initialize global variables so they will be available in the picker. Select the top level component (App) and you’ll see the button for Global variables. Then you just select it like other dynamic bindings.

[Kodiak]

@Apple

You’ll see in the code here where I am setting the variable in an external JS function.

 downloadImage(callback) {
    window.design_data = {}
    this.productView.getDesignData(function (designData) {
        window.design_data = designData
        if (callback)
            callback(designData)
        console.log('Image Data: ', window.design_data);
        dmx.global.set('designDataVar3', window.design_data);
        // dmx.app.data.set('designDataVarFront', window.design_data[0]);
        // dmx.global.set('designDataVarBack', window.design_data[1]);
    });

Im really just at a loss of how to access this…

[Apple]

In the Set Values you can’t type “dmx.global(…)” nor “window.(…)”, just “designDataVar4”

Edit: Hold on, you can’t do stuff like that in a Server Action. A Server Action is a back-end thing, it doesn’t have access to variables you expose on the front-end.

The Set Values you do there are exposed on the JSON response of the Server Action calls

You would need to set those variables in the front-end, on Server Action success

[Kodiak]

So if you look at the JS code being ran downloadImage(callback)…

That is setting the variable designDataVar3

I am then able to see that in my browser console

The problem is I am unable to grab that value in a “server action”

I think I am just reitterating that point, but just wanted to be clear of what is happening

So I have been trying all sorts of ways (why you see a variety of different things) on how to access that. Unless I am simply setting the Global variable incorrectly on my downloadImage(callback) function

[Kodiak]

@Teodor

Any ideas on this Global Variable setting / retrieving Teodor?

[Teodor]

So do you even need to set a global variable? Do you want to use it in the server action only? If yes - why don’t you directly call the server action in your js code and pass the value to it?

[Kodiak]

I believe it should be just needed in the server action.

How would I call this from my External File - JS code & pass the value??

[Teodor]

dmx.parse("serverConnectName.load({any_param:'" + yourvalue + "'})")

[Kodiak]

Now I remember the reason I was going for global…

I am passing an object with two base64 dataURLs for images (along with other json data) which is very big. When stringifying this it faults out with a CORS issue and gets super laggy.

My thoughts were if I could just grab the global variable then I could avoid this & the errors.

See Below…

[Apple]

Try using the POST method in your Server Connect Form instead of GET, should solve the “CORS” issue. Give feedback if it gets super laggy

[Kodiak]

Still no success here. Need to figure this out as it’s holding up the project majorly.

How do I pass a variable (object “designDataVar3”) from browser side to server side to use in Server Actions?

On google chrome console I can see the object here…

dmx.global.data.designDataVar3

Willing to pay someone to solve this at this point.

@patrick @Teodor @George

[Apple]

Are you sure you can’t pass it in a Server Connect Form, as an input field? The last screenshot you posted is passing the data as a query string, different from passing as a form field

(post the HTML code so I can see)

And if that doesn’t work, have you checked in the browser console if the string gets cut or if it’s another server error that happens?

@Kodiak

Willing to pay someone to solve this at this point.

I’m not really in the best days to do consultation work (broken sleep schedule and stuff like that), otherwise I’d really love to help you

[Kodiak]

I was able to solve it yesterday actually!

Sever Connect Form - Post

For anyone cuurious this might help

<form is="dmx-serverconnect-form" id="sc_form5" method="post" action="api/shopify/save_design_2" dmx-generator="bootstrap5" dmx-form-type="horizontal">
        <input id="frontImg" name="frontImg" type="file" class="form-control visually-hidden" dmx-bind:dataUrl="dmx.global.data.frontDesign">
        <input id="backImg" name="backImg" type="file" class="form-control visually-hidden">
        <div class="form-group mb-3 visually-hidden" dmx-bind:value="dmx.global.data.backDesign">
            <input id="design_name" name="design_name" type="text" class="form-control"><input id="email" name="email" type="email" class="form-control">
            <input type="text" class="form-control" id="input5" name="input5" aria-describedby="input4_help" placeholder="Enter some text" dmx-bind:value="{{designDataVar5}}">
        </div>
</form>

Then inside my JS Function

    dmx.global.data.designDataVar5 = JSON.stringify(dmx.global.data.designDataArray);
    input5.value = dmx.global.data.designDataVar5;

Thanks for your Help Apple!

[Apple]

@Kodiak

I was able to solve it yesterday actually!

I’m so happy you managed to solve it!