How to run javascript in a flow?

Wappler General Need Help
1

Hi,

A question that might have a rather simple answer, but I’m using a theme that has Toast built-in, and rather than using Wapplers integration, I want to use the themes since it’s slightly customized and already themed.

Running the following in a browser console works:

Command: toastr["error"]("Your username or password was incorrect.", "Invalid Login!")

toastr.options = {
  "closeButton": false,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-top-full-width",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": 300,
  "hideDuration": 1500,
  "timeOut": 5000,
  "extendedTimeOut": 1000,
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

I essentially want to perform this when someone enters the incorrect username/password on the login screen. The easiest way to do this seems to be to run a dynamic event on unauthorized, which then runs a flow. However, how would I send the above command via the flow? “Run JavaScript” exists, but I’m not exactly sure how I would format the above to go into this.

2

The Run Javascript is used to call a javascript function.

Try adding something like this to the bottom of your page:

<script>
    function displayToast() {
		

		toastr.options = {
		  "closeButton": false,
		  "debug": false,
		  "newestOnTop": false,
		  "progressBar": false,
		  "positionClass": "toast-top-full-width",
		  "preventDuplicates": false,
		  "onclick": null,
		  "showDuration": 300,
		  "hideDuration": 1500,
		  "timeOut": 5000,
		  "extendedTimeOut": 1000,
		  "showEasing": "swing",
		  "hideEasing": "linear",
		  "showMethod": "fadeIn",
		  "hideMethod": "fadeOut"
		}

          toastr["error"]("Your username or password was incorrect.", "Invalid Login!")
    }

</script>

Then in your flow on unauthorized, add a Run javascript action and just provide the function name displayToast

Screen Shot 2021-06-11 at 4.31.12 PM
Screen Shot 2021-06-11 at 4.31.12 PM812×838 34.5 KB

Now if this is the only thing you are doing, you could skip the Flow and use a Static event on unauthorized (instead of dynamic) and just call the function displayToast()

2 Likes
3

Awesome, thanks, should have given that a try before.

I wonder if there’s a better way of handling this for multiple messages though, instead of needing to have several of the above for each message?

4

You can add arguments to your function and pass those along in the run JavaScript action. Pass the message you want to display for example.

5

It might sound dumb, but how can I add the arguments so they work in the run JavaScript action?

6 
<script>
    function displayToast(title, message) {
		

		toastr.options = {
		  "closeButton": false,
		  "debug": false,
		  "newestOnTop": false,
		  "progressBar": false,
		  "positionClass": "toast-top-full-width",
		  "preventDuplicates": false,
		  "onclick": null,
		  "showDuration": 300,
		  "hideDuration": 1500,
		  "timeOut": 5000,
		  "extendedTimeOut": 1000,
		  "showEasing": "swing",
		  "hideEasing": "linear",
		  "showMethod": "fadeIn",
		  "hideMethod": "fadeOut"
		}

          toastr["error"](message, title)
    }

</script>

Then in your run JavaScript action, you add two arguments and set values.

7

Awesome, thank you!

1 Like