Barcode Scanning AutoTrigger on LiveChange event - sapui5

Question

I have a barcode scanning functionality for my SAPUI5 application. First the user will see a pop-up where he can do barcode scanning and if the scanned barcode is correct it will trigger the Next button and will in turn display another pop-up for the next barcode scanning. For the first barcode, the user must scan 6-7 digits while on the second barcode, it should be 5. My problem is with the autotrigger for the fist barcode. When user scans for 7 digits, it triggers the Next 2x. Is there a way to know the last length of the scanned barcode text?
Here is my liveChange event for TextInput
liveChange: function(oEvent) {
sText = oEvent.getParameter('value');
parent1 = oEvent.getSource().getParent();
if ((typeof sText != 'undefined') && (sText.length >= 6) )
{
sap.ui.getCore().byId(t.createId("costCenterInput")).setValue(sText);
setTimeout(function() {
console.log(parent1.getBeginButton());
if (parent1.getBeginButton() != null){
parent1.getBeginButton().firePress(oEvent);
}
}, 5000);
}
}
The problem with this code is that an external barcode scanner acts as a Bluetooth keyboard that inputs the data one at a time. So say we scan 1234567, upon entering 6 it will already trigger even with the timeout and will trigger again when entering 7.
new code
onScanAddressMobile: function(){
var t = this;
t.oBundle = this.oApplicationFacade.getResourceBundle();
var dialog = new sap.m.Dialog(t.createId("ccDialog"), {
title: t.oBundle.getText("COST_CENTER"),
type: 'Message',
content: [
new sap.m.Text({ text: t.oBundle.getText("SCAN_COST_CENTER")}),
new sap.m.Input(t.createId("costCenterInput"), {
type: "Number",
liveChange:
function(oEvent){
t.onLiveChange(oEvent);
}
}),
.....some more code here...
},
onLiveChange : function(event) {
//alert("onLiveChange");
var value = event.getParameter("value");
if (value && value.length === 6) {
alert("6 character");
this.timer = setTimeout(this.gotoNextPage(value), 4000);
} else if (value && value.length > 6) {
alert("6 or more");
if (this.timer) {
clearTimeout(this.timer);
}
this.gotoNextPage(value);
}
},

Answer 1

Usually, barcode-scanners can be configured to send a 'return' value at the end of the scanned characters (or any other character, but the Chr(13) is most common as it could instantly submit a form when schanned into an input field
See if you can configure yours, and simply check for the last character (return)

Answer 2

A barcode scanner that works as a bluetooth keyboard will "key" in its data quite rapidly. If you have received 6 digits and then didn't receive anything for perhaps 250ms, you can consider the barcode complete and skip to the next page.
If you have received 7 digits, you don't even need to wait anymore, but can immediately skip to the next page.
So I guess your code would have to look something like this:
onLiveChange : function(event) {
var value = event.getParameter("value");
if (value && value.length === 6) {
this.timer = setTimeout(this.gotoNextPage, 250)
} else if (value && value.length > 6) {
if (this.timer) {
clearTimeout(this.timer);
}
this.gotoNextPage();
}
}
Please find an example with slightly longer time-out in this jsbin: http://jsbin.com/kolacez/1/edit?html,output
This is what will happen:
Char 1: Nothing
Char 2: Nothing
Char 3: Nothing
Char 4: Nothing
Char 5: Nothing
Char 6: A timer is set, if character 7 isn't received within a certain timeframe, the barcode is assumed to be complete and it will launch gotoNextPage.
Char 7: The timer is cancelled and gotoNextPage is started directly.
So in case a 7 chars barcode is received, the logic for both char 6 and char 7 is executed, but because the timer-action of char 6 is cancelled, the gotoNextPage method is launched only once.