Make Native respond to hardware buttons of a scanner

1
How to make a Native application respond to the buttons the are usually available on a scanner? My scanner has a big button on each side of the scanner and when you press one of those buttons the most intuïtive application’s response is scanning a barcode and doing something with the barcodes it reads. We do have the option to assign a function or a keystroke to each button. Say Enter, ESC, ‘a’ or F5 but how to assign these functions to buttons in our applications. The AppStore app KeystrokeWidget does not work on Native, alas.  Would it be an option to add a class to the button I want to trigger, say ShortCutKeyF9 and add an HTML-snippet? Wwith this javascript: $(".ShortcutKeyF9").keypress(function(event){ var key = (event.keyCode ? event.keyCode : event.which); if(key == '-101'){ //13=Enter mx.data.callNanoflow({ nanoflow: this.Nanoflow, origin: this.mxform, context: this.mxcontext, callback: function(result) { alert("Nanoflow completed with result " + result); }, error: function(error) { alert(error.message); } }); } }); Apparently not. The HTML-widget can not be used in a native page. Using the AppEvents-widget, I have added a Pageload-event to the page should trigger a nanoflow, but it does not. Seems to be a bug. Nevertheless, using the timer-event of the AppEvent-widget, the nanoflow now does get triggered. That calls the javascript-widget (which is exposed as a nanoflow). So far so good, I am into the javascript-code, trying to get the commands right. Some regular javascript do not function, like 'document’ or '$(‘.someclass’)’. Apparently it has to be ES8. How to select a Dom-element by its class name in Mendix Native's ES8 javascript? A simple javascript like this: export async function ShortcutKeys_ListenAndStartANanoflow(myNanoflowName) {     // BEGIN USER CODE for (const i of document.querySelectorAll(".ShortcutKeyF9")){     console.log(i.innerHTML); } export async function ShortcutKeys_ListenAndStartANanoflow(myNanoflowName) { // BEGIN USER CODE for (const i of document.querySelectorAll(".ShortcutKeyF9")){ console.log(i.innerHTML); } fails on the ‘document’ and is giving this error: “An error occurred while executing an action of WMS_ScanModule.Test_AppEventWidget.appEvents1: Can't find variable: document “
asked
2 answers
1

Hi Tim,

Here's my solution for a hybrid app which works on a Zebra handheld scanner. It reads the barcode with the side buttons and sends its value together with the ‘Enter’. Maybe it works out on Native as well.

Just like you said, I sorted this out with the HTML snippet and additional classes on the input field and button:

HTML snippet on the bottom of the page:

(function() {
    document.addEventListener("keydown", function(e) {
        if (e.keyCode !== 13) return; // ignore if the pressed key is not 'Enter' key.
        var inputField = document.querySelector(".barcodeInput input");
        var btn = document.querySelector(".barcodeSubmit");
        if (inputField && btn && document.activeElement === inputField) {
            btn.click();
        }
    });
})();

answered
-1

For situations like this, you very probably need a React NAtive pluggable widget that interacts with the device.

There are already projects that have a native app that run on a Zebra device.

answered