Use Java Script to delay onChange Action

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 


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


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

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

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

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

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


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 

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 


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

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)

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 



Hi Tobias,

You can try below component.

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

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