How to make the attribute of a function dynamic?

[Cristiano_Barbieri]

Hey guys,

I have a function and I would like to leave the Data attribute: dynamically using appconect, I tried several ways but without success.

the function would be this:

<script type="text/javascript">
     const qrCode1 = new QRCodeStyling ({
     width: 250,
     height: 250,
     type:'canvas',
     margin: 40,
     data: "{{var1.value}}",
     dotsOptions: {
     color: "#000",
    
     },
     cornersSquareOptions: {
    
     },
     cornersDotOptions: {
    
     },
     backgroundOptions: {
     color: "#fff",
     },
     imageOptions: {
     crossOrigin: "anonymous",
     margin: 5,
     }
     });
    
     qrCode1.append(document.getElementById("qrcode"));
</script>

I tried dmx-bind:data but it didn’t work.

Thank you very much to anyone who can help me

[famousmag]

@Cristiano_Barbieri

data: "{{var1.value}}",

data: dmx.parse("var1.value");

[Cristiano_Barbieri]

Hi Famous Mag, I tried but it didn’t generate the QR Code in the original function to generate the QRcode the information is data: “information” I believe that’s why it didn’t generate now, what would be the syntax? Thank you very much

[famousmag]

Hey @Cristiano_Barbieri,

I just said how you get a wappler variable inside javascript…

Now about not working, I see your script is just running on page load inside a script.

When this script has to be executed in order var1 to has a value?
Maybe you need to run it after the var1 has been evaluated , for example onsuccess of a serverconnect or whatever event gives the var1 a value

[famousmag]

try to call this var1 value with an alert 1st thing inside your script to see if you get a value for var1 (obviously has no value yet at the time that the script is ececuted…)

@Cristiano_Barbieri

<script type="text/javascript">

     alert(dmx.parse("var1.value"));

     const qrCode1 = new QRCodeStyling ({
     width: 250,
     height: 250,
     type:'canvas',
     margin: 40,
     data: "{{var1.value}}",
     dotsOptions: {
     color: "#000",

[Cristiano_Barbieri]

Yes, it really doesn’t have anything undefined, can I expect it to load first after success and then run this script?

[famousmag]

again…

Where/HOW is this var1 get the value?

the timing is:

1. var1 gets value
2. call the script that generates the QRcode

[Cristiano_Barbieri]

I did a test by putting the value of the static variable to test, but even though it is static it does not generate the QR code only when I manually put it inside the quotation marks, maybe it is the library that generates the QR?

[famousmag]

It doesn’t work like that…

The var1 gets its value from the serverconnect sc_pulseira:

You don’t need the var1…

[Cristiano_Barbieri]

famous

I did several tests with an example from Teodor, and even in this simple example it doesn’t show the variable log in the console, it’s very strange, could you test to see if this is my case?

I did this test:

<dmx-value id="var1" dmx-bind:value="'123'"></dmx-value>
<script>
        function myFunction() {
        var myVar = dmx.parse('var1.value');
        console.log(myVar);
}
</script>

On mine it doesn’t appear in any log.

[famousmag]

include the code for your QRcode in a function and call that function with an argument on serverconnect success

On you serverconnect success event add a flow:

Add a Run Javascript step:

Give a name to your function (the same that you will call it in javascript script)

And give the argument this value:

<script type="text/javascript">
function getQRcode(my_arg) {
     const qrCode1 = new QRCodeStyling ({
     width: 250,
     height: 250,
     type:'canvas',
     margin: 40,
     data: my_arg,
     dotsOptions: {
     color: "#000",
    
     },
     cornersSquareOptions: {
    
     },
     cornersDotOptions: {
    
     },
     backgroundOptions: {
     color: "#fff",
     },
     imageOptions: {
     crossOrigin: "anonymous",
     margin: 5,
     }
     });
    
     qrCode1.append(document.getElementById("qrcode"));
}
</script>

[famousmag]

Did you make it work?
You were trying to assign a value to var1 that was coming from a serverconnect that hasn’t been successfull yet (means no value there).
Beside that I don’t see a reason for this to use a variable once you just need the value that comes from your serverconnect sc_pulseira.
All we did is take out the variable and run a javascript function ONCE the serverconnect is successfull and of course pass that value to the javascript fuction in ordre to be straight accessed inside your jacascript function without dmx.parse.

Need any other explanation?

[Cristiano_Barbieri]

For some reason dmx-parse isn’t working =( I’m trying everything I can here, it doesn’t even work in this simple example that Teodor gave:

<dmx-value id="var1" dmx-bind:value="123"></dmx-value>

<script>
       function myFunction() {
       var myVar = dmx.parse('var1.value');
       console.log(myVar);
}
</script>

Could it be a bug? Well, it was supposed to work, right?

Nothing appears in the console log

[Teodor]

Well this function myFunction() in your example will never output anything, as you are not calling it. so it does not run.

[Cristiano_Barbieri]

Hello Teodor Thanks,

it really wasn’t calling the function… Sorry

However, now it is being called normally but it says undefined

<dmx-value id="var1" dmx-bind:value="123"></dmx-value>

<script>
    function myFunction() {
    var myVar = dmx.parse('var1.value');
    console.log(myVar);
}

myFunction()
</script>

I think this is correct now?

[Teodor]

Now the function runs before the app connect components and their data are ready/available. You can run the function on ready event on the body tag onready="myFunction()" or run it on some button click etc.

[famousmag]

I’ve explained in my previous post…

Please check @Cristiano_Barbieri

[Cristiano_Barbieri]

Yes, I saw it here, thank you very much

It works now, you guys are amazing, I owe each of you a beer.

[famousmag]

My beer goes to @Teodor!!
Cheers brother
Glad it works Cristiano