Use Java Script to delay onChange Action

Tobias Latta

Question

Hi guys,

I am running a mobile app used to scan barcodes. To capture the barcodes I use a simple input field with an onChange action to allow multiple scans. (I scan in a input field with a bluetooth scanner)

So everytime I scan a new barcode the app clears the input field and I can scan the next barcode. Unfortunately the action is to fast for "longer" barcodes and the onChange is triggered befor the whole barcode is captured.

I wrote a java which might help here:

this should help out but as I am a freshman I have no Idea where to place the delay in my code to run the function.

I tried it with several options. For exaple this way:

But there is no effect at all...

Maybe someone knows an option...

Thanks!

Tobias

10 Apr 2019

Fábio Fantato

MVP

Hi Tobias,

Take a look into this thread. The Ricardo´s answers should working to you: "You can change the trigger delay of an "On Change", by setting the osOnChangeTimerDelay javascript variable."

https://www.outsystems.com/forums/discussion/9324/input-on-change-is-too-fast/

Best Regards

Fabio

10 Apr 2019

Tobias Latta

Hi Fábio,

many thanks. Actually I just don´t know where to use the Script.

If I use it in the action flow (like in the example above) nothing happens... (By the way: If I put in a "Hello World" allert it is shown).

If I try to put the action in the Input fields attributes or events nothing happens neither...

Best regs

Tobias

10 Apr 2019

Daniël Kuhlmann

MVP

Hi Fábio and Tobias,

I am not 100% sure but I recall when working on a mobile project, with simular issues as described by Tobias in this thread, we also looked at osOnChangeTimerDelay but this didn't seem to be usable for mobile applications only web applications.

Regards,

Daniel

10 Apr 2019

Hazel Jayne Lascota

Hi Tobias - were you able to figure out how to set the delay for mobile? Thanks!

15 Apr 2020

1 reply

24 Apr 2020

Show thread

Hide thread

BigSlikTobi

Hazel Jayne Lascota wrote:

Hi Tobias - were you able to figure out how to set the delay for mobile? Thanks!

Hi,

sorry for missing your post!

I put the function I wanted to delay into the JavaScript code and created a new action for the delay.

Before I start the code I use a local variable "BarcodeComplete" to put all BC fragments together.

So I am waiting 700ms to put all barcode fragments together and then start the logic.

Hope this helps!

Best regs!

Tobias

24 Apr 2020

Theo Marcellus

I do not think this is an issue with speed.

You should not use the onChange event for this.

Each barCode Scanner has settings to dictate a few things as far as which "mode" you want to operate the barCode scanner in.

For example, you have settings for:

- when reading is complete do "Enter" which is equivalent to "\r\n" (in other words, "Carriage Return(\r)", and Line Feed(\n)"

What advantage that gives you?

Well, instead of onChange, you should monitor "onEnterKeyPressed", so that no matter how long the code is, until the scanner does "Enter" nothing will change.

Here is how to capture when the scanner does "Enter"

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};

Usually the scanner comes with a book that has bar-codes in it. One of these code need to be scanned with the scanner to tell the scanner to add "Enter" after a full read.
Voila!

Additional resources:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

https://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript

15 Apr 2020

2 replies

Last reply 24 Apr 2020

Show thread

Hide thread

Theo Marcellus

Theo Marcellus wrote:

I do not think this is an issue with speed.

You should not use the onChange event for this.

Each barCode Scanner has settings to dictate a few things as far as which "mode" you want to operate the barCode scanner in.

For example, you have settings for:

- when reading is complete do "Enter" which is equivalent to "\r\n" (in other words, "Carriage Return(\r)", and Line Feed(\n)"

What advantage that gives you?

Well, instead of onChange, you should monitor "onEnterKeyPressed", so that no matter how long the code is, until the scanner does "Enter" nothing will change.

Here is how to capture when the scanner does "Enter"

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};

Usually the scanner comes with a book that has bar-codes in it. One of these code need to be scanned with the scanner to tell the scanner to add "Enter" after a full read.
Voila!

Additional resources about the "Enter" event here: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

15 Apr 2020

BigSlikTobi

Theo Marcellus wrote:

I do not think this is an issue with speed.

You should not use the onChange event for this.

Each barCode Scanner has settings to dictate a few things as far as which "mode" you want to operate the barCode scanner in.

For example, you have settings for:

- when reading is complete do "Enter" which is equivalent to "\r\n" (in other words, "Carriage Return(\r)", and Line Feed(\n)"

What advantage that gives you?

Well, instead of onChange, you should monitor "onEnterKeyPressed", so that no matter how long the code is, until the scanner does "Enter" nothing will change.

Here is how to capture when the scanner does "Enter"

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};

Usually the scanner comes with a book that has bar-codes in it. One of these code need to be scanned with the scanner to tell the scanner to add "Enter" after a full read.
Voila!

Additional resources:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

https://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript

Hi Theo,

I just want to add, that basically you are totally right. But in this particular use case we do not use the BC - scanner software. Every barcode scanner can be used like a keyboard. You can scan a barcode and (as long as the scanner knows BCs language) the scanner translates it into a sting. As we just wanted to read the BCs without any further action, this process is on the one hand much faster (even with the delay script) and on the other hand reuseble for every scanner model.

Best regs

Tobias

24 Apr 2020

Vincent Koning

There is also a Forge component (I'm the author) that you can use called Debounce. Debouncing is a method to wait for a certain period of time before triggering an action. You can bind this to an input field and set the delay value manually. Currently it's only available for Mobile but I'll try to create Reactive application for it today and publish it in the Forge.

Link: https://www.outsystems.com/forge/component-overview/6241/debounce-mobile

24 Apr 2020

Salman Ansari

Tobias Latta wrote:

Hi guys,

I am running a mobile app used to scan barcodes. To capture the barcodes I use a simple input field with an onChange action to allow multiple scans. (I scan in a input field with a bluetooth scanner)

I wrote a java which might help here:

this should help out but as I am a freshman I have no Idea where to place the delay in my code to run the function.

I tried it with several options. For exaple this way:

But there is no effect at all...

Maybe someone knows an option...

Thanks!

Tobias

Hi Tobias,

You can try below component.

https://www.outsystems.com/forge/component-overview/1244/sleep

24 Apr 2020

Vincent Koning

Hi Tobias,

I just release a new component in the Forge call "Debounce" (https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=8272&ProjectName=Debounce). This component enables you to please a "soft" sleep to the OnChange event of an input box. For you this means that as long as the Barcode scanner is inputting it's data (one character at a time) the OnChange doesn't kick off. Only after a set amount of inactivity (default is 350ms) an Action is triggered that can take followup actions. This action in a replacement of the OnChange event.

I think this will help you solve your issue. Please check it out and let me know the outcome.

Greetings,

Vincent

24 Apr 2020

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines