Skip to Content
Author's profile photo Ferry Gunawan

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 =, '', '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) {
  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

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.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Ferry,

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

      Author's profile photo Ferry Gunawan
      Ferry Gunawan
      Blog Post Author

      Thanks Vandana

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


      Author's profile photo Steven Russell
      Steven Russell

      Could this solution work using the camera on a mobile phone as the code reader?

      Author's profile photo Former Member
      Former Member

      We have a similar request from one of our clients with Screen 3.0. But in this case you should scan the Data Matrix barcode.

      Is there any solution for this requirement?
      Also how can we create the service of the example? There is any SAP note to create it?