Create Qr Barcode Scanner

Generated by Jive on 2015-03-10+01:001

SAP GUI: Create QR Barcode ScannerFunction in SAP Screen Personas

Posted by Ferry Gunawan 3 Oct, 2014I would like to share how to add the QR barcode (or any barcode) scanner functionality in SAP ScreenPersonas. In this example, I am using the transaction code MM03 - Display material and add the "Scan QRcode" button to scan the QR code from the label and put the result in the material number textfield. For thiscase, instead of using the WebRFC I am using HTML5 with the browser localStorage function.

For this to be working, you need to use the Google Chrome browser and desktop/laptop with webcam.

Step by Step to Create the QR Code Scanner1. Create two scripts in SAP Screen Personas: Scan QR Code and Get QR Code.

SAP GUI: Create QR Barcode Scanner Function in SAP Screen Personas


2. Scan QR Code will call the javascript that will launch the HTML5 QR Barcode Scanner.

The javascript code as follows:



var pageURL = 'http///sap/bc/ui5_ui5/sap/ZBarcode1/index.html'; var w = 400; var h = 400; var left = (screen.width - w) / 2; var top = (screen.height - h) / 4; var targetWin = window.open(pageURL, '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); var timer = setInterval(checkChild, 500); function checkChild(val) { if (targetWin.closed) { clearInterval(timer); } }3. Get QR Code will get the barcode value from the browser local storage qrcode, copy the value to

textfield and clear the local storage.

4. Link the textfield to the Get QR Code button.

5. And finally we need to hide the Get QR Code button.

HTML5 QR Barcode Scanner

For the QR barcode scanner, I have modified a little bit of source-code (index.html & webqr.js) from https://github.com/LazarSoft/jsqrcode.



In the webqr.js, I have modified the code in the read function:

function read(a) { localStorage.setItem('qrcode', a); // variable a is the value of QR code localStream.stop(); //stop the webcam stream var html = ""; if (a.indexOf("http://") === 0 || a.indexOf("https://") === 0) html += "" + a + ""; html += "" + htmlEntities(a) + ""; document.getElementById("result").innerHTML = html; closeWindows(); //close the child window }It's basically to store the QR code result (variable a) in the browser local storage qrcode, stop the webcamstream and close the child window, closeWindows();

The completed source code can be found in the attached file or in my GitHub: ferrygun/PersonasQRBarcode GitHub

Demo Video

In summary we can add the barcode scanner functionality in the SAP Personas with help from HTML5localstorage. Thank you for reading my blog.

(19.3 K)

1452 Views

Ferry Gunawan in response to Vandana Sarda on page 410 Nov, 2014 7:29 AMThanks Vandana

I am also using the Personas 2 with silverlight. It should work there too.

Regards,

Ferry

Vandana Sarda10 Nov, 2014 7:14 AMHi Ferry,

Very useful blog.. I have similar kind of requirement. Here you are using HTML5. But we are using SAP ScreenPersonas Silverlight. Is it possible to bar code scanner function in Personas with silverlight?

Documents

Create Qr Barcode Scanner