Create QR Barcode Scanner Function in SAP Screen Personas

I would like to share how to add the QR barcode (or any barcode) scanner functionality in SAP Screen Personas. In this example, I am using the transaction code MM03 – Display material and add the “Scan QR code” button to scan the QR code from the label and put the result in the material number textfield. For this case, 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 Scanner

1. Create two scripts in SAP Screen Personas: Scan QR Code and Get QR Code.
   
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_netweaver>/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 = "<br>";
  if (a.indexOf("http://") === 0 || a.indexOf("https://") === 0)
  html += "<a target='_blank' href='" + a + "'>" + a + "</a><br>";
  html += "<b>" + htmlEntities(a) + "</b><br><br>";
  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 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.