Using a Flow to prevent double clicking?

Wappler General
1

I have an issue with a very small form that processes so fast that staff often double click and I get double entries in the database.

Can a flow be used to:

  • Hide the button on click
  • Run the Server Connect Action
  • Wait 3-5 seconds
  • Show button again

I have it set up now that when button is clicked it hides the button while processing. But ot processes so fast that it is faster than a double click and the button displays again almost instantly. I’d like to delay the button being displayed or clicked on for a few seconds after it has been clicked.

Of course I am open to other suggestions as well.

1 Like
2

Hhaha, you are clearly not on a slow pleb server like me, wish i had that issue.

I would have the button hide on click, run the server action, on server action success, show the button, this will then wait for the server to complete before it shows again.

OR

button hide on click, run server action, on server action success, notify, on notify show the button.

OR

Use an action scheduler to count 5 seconds and then show the button.

3

Perhaps
1.disable/ hide the button on click
2. run scheduler to active/ show button after 3-5 seconds

You could also do a spinner “on executing” to show it is happening when disabling

4

I wouldn't hide the button but only disable it, like:

<button dmx-on:click="flow1.run()" dmx-bind:disabled="flow1.executing">
  Run
</button>

If the flow is to fast, you could just add a wait step at the end and let it wait for 3-5 seconds, this way the flow can not be run again in that time period and the button stays disabled.

4 Likes
5

I am having troubles creating my first flow. It should insert a record then refresh the data and then wait 5 seconds. When I click on the button, nothing happens.

Flow:

<script is="dmx-flow" id="flowCheckIn" type="text/dmx-flow">[
  {
    serverConnect: {
      url: "dmxConnect/api/clients/forms/addclientvisit.php",
      name: "scAddCheckIn"
    }
  },
  {
    serverConnect: {
      url: "dmxConnect/api/clients/lists/clientvisits.php",
      name: "scRefreshCheckIns"
    }
  },
  {
    wait: {delay: 5000}
  }
]</script>

Button:

<button class="btn btn-success btn-sm btn-block" dmx-bind:disabled="flowCheckIn.executing" dmx-on:click="flowCheckIn.run()"><i class="fa fa-road"></i>&nbsp; Check-In Client</button>

I’m sure it’s something I am doing wrong.

6

Are there errors in the dev tools console?

7

No, no errors.

Screen Shot 2020-06-03 at 10.02.46 AM
Screen Shot 2020-06-03 at 10.02.46 AM1946×386 45.8 KB

8

So both server actions run properly? I see they are called.

9

Yes, seems it is inserting but inserting null values, not picking up the form data to insert.

10

You seem to be calling the server action directly rather than calling a form.submit()

1 Like
11

Hmmm, how do I call. the form submit?

You are probably right.

12

You were correct! It now works to submit the form and refresh the data correctly.

Next issue .... I need to set a 'wait' at the end. I have one set up but it doesn't seem to be delaying. What value do I put in the delay for say 5 seconds?

13

never used that but i am guessing in milliseconds

1 Like
14

Yes, it is milliseconds and seems to be working now. Button doesn't show the disabled state while flow is executing but it at least works now.

Thanks @Teodor, @Hyperbytes and @patrick

15

I think Patrick just provided a wrong code. It is flowName.running - just make sure to select it using the UI, it will create the right code for you Brad :slight_smile:

1 Like
16

Unfortunately it is not selectable in the UI.

17

I made my first successful flow! :beers:

That fixed it, it is working perfectly now. But the code does have to be added manually. Should I open a bug report?

18

What do you mean? The running option is available in the UI under the Flow. Just tested this once again.

19

There is nothing to select there?

Screen Shot 2020-06-03 at 10.35.08 AM
Screen Shot 2020-06-03 at 10.35.08 AM942×1382 110 KB

20

Strange, where is the flow located on the page? Is it nested in some container ornis it directly in the body tag?