Button on mouse click inside of Server Connect Variable

Wappler General How To
#1

Hi,

I am doing a chat where it is possible to upload a file too.

On clicking the “Upload File” button, a modal is opened with S3 Upload component and upload the file.

Once the file is uploaded, there is a step in the server connect to insert a new message in the chat containing a button.

The button is bearing the text of the name of the uploaded files.

Registrazione schermo 2021-03-10 alle 17.43.02

It is supposed that on click the button, a sign download SC starts and you download the file.

I set a variable in the SC containing the HTML code to get the button and all related action.

Schermata 2021-03-10 alle 17.45.13

the code in the btn_download variable is the following.

{{'<button id="btn_download" class="btn btn-outline-primary btn-sm"  dmx-on:click="sign_download.load({keyfile: '+prefix_01+'})"> '+$_GET.name+' </button>'}}

what I get on the Chrome inspector is the following:

<button id="btn_download" class="btn btn-outline-primary btn-sm" dmx-on:click="sign_download.load({keyfile: 'hubchat/11/16/Senza titolo-1.pdf'})"> Senza titolo-1.pdf </button>

how can I modify the text of the variable to make the button action works? I try to compare with similar button created on the page and sintax seems the same, don’t understand where I have to make modification.

thank you

Roberto

Can variables be dynamic?
#2

How do you insert the html in your app, probably the html is not being parsed by app connect.

You can test following code, just place it in a javascript file or include it directly on your page:

dmx.Attribute('html2', 'mounted', function(node, attr) {
    this.$addBinding(attr.value, function(value) {
        this.children.splice(0).forEach(function(child) {
            child.$destroy();
        });
        
        this.bindings = [];
        node.innerHTML = value || '';
        
        this.$parse(node);
    });
});

The in your code inject the html like:

<div dmx-html2="serverconnect1.data.buttonCode"></div>
Can variables be dynamic?
Parse AC expressions stored in backend as strings
Parse AC expressions stored in backend as strings
#3

thank you @patrick

I m shy to ask, but… should I put it in the body of the page inside tag ?

and the

in the variable in SC?
Dynamically select partial
#4

You can put the javascript in a script tag, the place doesn’t really matter. You probably use dmx-html now to insert the button html, replace it with dmx-html2.

#5

I just set a value on Server Connect copying inside <button id=“btn_download” …

#6

TypeError: Cannot read property ‘indexOf’ of undefined is back :frowning:

#7

Did you change something in the server action?

#8

I added

on the set value
#9

OK let me try adding the button directly to the table maybe it is better and easier

#10

Could you send me the corrupted action file? Probably the editing of that action step corrupted something in the generated code.

#11

I deleted the Set Value action and it works well…
sorry too late :wink:

#12

Here the original script @patrickupload_s3file.json.zip (1.4 KB)

#13

at the end was easier than expected. Just added button on another cell showing/hiding if in the message there is a file uploaded…

Sorry to make you wast your time @patrick!