Function Call With A Parameter - What Am I Doing Wrong?

Wappler General How To
#1

I’m trying to create a javascript function call from a flow to do a “Copy to Clipboard” function.

When call the flow, the javascript isn’t called. There is no console error message. It also seems to abort the running of the flow, and statements placed afterwards in the runJS part of the flow don’t execute.

Can anyone help me see where I am going wrong?

I have a flow like this:

<script is="dmx-flow" id="flow_c2c" type="text/dmx-flow">{
  meta: {
    $param: [
      {type: "text", name: "phrase"}
    ]
  },
  exec: {
    steps: [
      {
        run: {action: "{{notification.success($param.phrase)}}"} // this works, but only if before the runJS
      },
      {
        runJS: {
          function: "js_copy_to_clipboard",
          args: ["{{$param.phrase}}"],
          name: "js_copy_to_clipboard",
          output: true
        }
      }
    ]
  }
}</script>

Which I call like this:

dmx-on:click="flow_c2c.run({phrase: 'banana'})"

And the JS is like this:

<script>
	function js_copy_to_clipboard(copyText) {
      /* Select the text field */
      copyText.select();
      copyText.setSelectionRange(0, 99999); /*For mobile devices*/

      /* Copy the text inside the text field */
      document.execCommand("copy");

      /* Alert the copied text */
      alert("Copied the text: " + copyText.value);
      console.log("Copied the text: " + copyText.value);
    }
</script>
#2

Just guessing, but you might try renaming the runJS so that it isn’t the same as the function name.

#3

Nice idea Ken :slight_smile:

Didn’t work though, and nor did taking off the [Output] option of the runJS.

Other ideas welcome! :slight_smile:

#4

I just setup a sample with only a console.log in the script and it works as expected. You might try trimming that script back to see if the error is in there.

<script is="dmx-flow" id="flow1" type="text/dmx-flow">{
  meta: {
    $param: [
      {type: "text", name: "phrase"}
    ]
  },
  exec: {
    steps: [
      {
        run: {action: "{{serverconnect1.load({})}}"}
      },
      {
        runJS: {
          function: "tester",
          args: ["{{$param.phrase}}"],
          name: "runthescript",
          output: true
        }
      }
    ]
  }
}</script>

    <script>
        function tester(phrase) {
        console.log(phrase);
    }
#5

Yes I was going to suggest trying to run the JS perhaps without the argument (or just putting a ’ var copyText = random text ’ in the start of the function) just to test if it works.

Sounds like ken has tested passing that similar argument anyway so perhaps it’s something with the function itself?

When my JS isn’t working I like to just go back to basics, test with an alert or console log and then build back up on top of that till I find the issue.

#6

In case it’s useful, there’s another solution to this here. It definitely works (but doubtless could be improved).

I put the notification in the js function, using:
dmx.parse("notifies1.success('successfully copied')");

#7

Thanks folks! I got it working in the end… I’m still not sure what was wrong but enough fiddling around fixed it! :slight_smile: