Create QR Barcode Scanner Function in SAP Screen Personas

Standard

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

b1.jpg

Step by Step to Create the QR Code Scanner

  1. Create two scripts in SAP Screen Personas: Scan QR Code and Get QR Code.
    b3.jpg
  2. Scan QR Code will call the javascript that will launch the HTML5 QR Barcode Scanner.
    b2.jpg
    The javascript code as follows:

    1. var pageURL = ‘http//<sap_netweaver>/sap/bc/ui5_ui5/sap/ZBarcode1/index.html’;
    2. var w = 400;
    3. var h = 400;
    4. var left = (screen.width – w) / 2;
    5. var top = (screen.height – h) / 4;
    6. 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);
    7. var timer = setInterval(checkChild, 500);
    8. function checkChild(val) {
    9. if (targetWin.closed) {
    10. clearInterval(timer);
    11. }
    12. }
  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.
    b4.jpg
  4. Link the textfield to the Get QR Code button.
    b5.jpg
  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:

  1. function read(a) {
  2.   localStorage.setItem(‘qrcode’, a); // variable a is the value of QR code
  3.   localStream.stop(); //stop the webcam stream
  4.   var html = “<br>”;
  5.   if (a.indexOf(http://&#8221;) === 0 || a.indexOf(https://&#8221;) === 0)
  6.   html += “<a target=’_blank’ href='” + a + “‘>” + a + “</a><br>”;
  7.   html += “<b>” + htmlEntities(a) + “</b><br><br>”;
  8.   document.getElementById(“result”).innerHTML = html;
  9.   closeWindows(); //close the child window
  10. }

It’s basically to store the QR code result (variable a) in the browser local storage qrcode, stop the webcam stream 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 HTML5 localstorage. Thank you for reading my blog.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s