USB Scanners with Mendix Web App - Values Not Being Passed Through
0
Has anyone had issues using barcode scanners with their mendix web app? Setup Barcode Scanner : Honeywell Hyperion 1300g Scanner is connected to computer register via USB. Browser – Mozilla Firefox Mozilla Extension – Tamper Monkey Process We have a page that takes in input 14-digit SKU into a textbox Upon “key press enter” or the action button, they both trigger a microflow that takes that input SKU & inserts it into a our shipment details entity If we do not want to hand key it, the alternative is to use our scanner. How our scanner works with the mendix app : We’re using our scanner with Mozilla firefox, and a mozilla extension add on called “tamper monkey” that allows us to execute scripts. Our script essentially takes in incoming scan value, and then assigns the form textbox with the new 14-digit value & executes the button click on the page that runs the microflow. Its pretty basic, and I’ve got the attached snippet that I’m using. We currently do this for our other web applications var text_id = document.querySelector('[id*="Shipment_Edit.textBox6"]').id.replace("-label", ""); //set textbox value with incoming scanner message document.getElementById(text_id).setAttribute('value', incomingScannerMessage); //Button Click var button_obj = document.querySelector('[data-button-id*="2.Shipments.Shipment_Edit.actionButton4"]') button_obj.click(); //Refocus on input document.getElementById(text_id).focus(); Problem When using a keyboard, this works perfectly fine!! There are no issues at all, and we figured we could just code our scanners to copy the incoming barcode into the textbox, select the action button and perform a button object click via JavaScript as described above. What we’re seeing is that if you don’t touch the textbox and edit it in anyway, we’re able to successfully paste values into the textbox with our scanner and Mendix seems to in-take the contents of the textbox just fine and the microflow executes like normal, repeatedly. HOWEVER - whenever we decide to go into the textbox and edit manually with the keyboard, its almost as if the state of the textbox changes and it unable to assign new values that are being pasted into the mendix textbox. Mendix appears to be saving the old value and new subsequent scans are unable to pass in, and our error logging within Mendix indicates its still trying to execute on the old SKU value. But if we decide to hand type via keyboard and click on the button, it’ll work. I have to refresh the entire application and start over for the scanner to work again – that is…until we decide to click into the textbox and tamper with it.
asked
Matthew Nguyen
2 answers
1
We use several different barcode scanners on different locations in our applications without problems. We always use an inputbuffer (non persistent entity with text field) A text input field is used on the page and a on change microflow is coupled to this text field. In this microflow the input field is copied to the final persistent entity (shipment details in your example) . Thereafter we make the input buffer text field empty. This allows to scan the next item directly.
The input field can now be used as either a keyboard input field or a USB scanner input field. No extra javascript nor webbrowser extensions are required, just standard on change microflow with input buffer does the job for us.
answered
Robert Jan Gorter
0
It looks like writing the javascript to perform DOM manipulation, its not updating the “shadow DOM” that the react code is grabbing. If there is maybe a way we can tap into the mxlibrary and update that shadow dom value… we should maybe be good?