Introduction

In SAP’s world, the UI5 and Fiori Apps are used extensively to perform a large number of operations. Among these operations, there is a common requirement of a warehouse to scan a QR Code pasted over a material and get the material number from it. It is similar to the QR Code scanning you might have seen at a shopping mall outlet. In this article, we will learn simple steps for Scan QR Code Integration in SAP UI5

Pre requisite of QR Code Scanning in SAP UI5 via Mobile

The QR Code scanning works fine on a laptop, but to make it work on a mobile phone or a tablet, you need to deploy your UI5 application as a Fiori Application. The fiori application should be used via the Fiori Launchpad mobile application. You can download the same from here:

SAP Mobile Start: Fiori Launchpad for Android

SAP Mobile Start: Fiori Launchpad for iOS

Steps to create an SAP UI5 to scan a QR Code

To create a scanning app, follow the steps below:

1. Create a UI5 project in any IDE

2. Create a view and add a button to start scanning, and an input box to get the scanned data. The code would be like mentioned below:

<mvc:View controllerName="Test.Test.controller.Main" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core"
    xmlns:html="http://www.w3.org/1999/xhtml">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="Scan QR Code Integration in SAP UI5">
                    <content>
                        <VBox>
                            <Button icon="sap-icon://qr-code" text="Scan" press="onScan"/>
                            <Label text="Material"/>
                            <Input id="materialNumber" value=""/>
                        </VBox>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

Step 03: Add BarcodeScanner namespace and use it to scan the bar code, as shown below:

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageBox",
    "sap/m/MessageToast",
    "sap/ui/model/json/JSONModel",
    "sap/ndc/BarcodeScanner",
], function (Controller, MessageBox, MessageToast, JSONModel, BarcodeScanner) {
    "use strict";
    return Controller.extend("Test.Test.controller.Main", {
        onScan: function (oEvent) {
            var that = this;
            BarcodeScanner.scan(
                function (mResult) {
                    if (!mResult.cancelled) {
                        that.getView().byId("materialNumber").setValue(mResult.text);
                        MessageBox.show("We got a QR code\n" +
                            "Result: " + mResult.text + "\n" +
                            "Format: " + mResult.format + "\n");
                    }
                },
                function (Error) {
                    alert("Scanning failed: " + Error);
                }
            );
        },
    });
});

Note: If your scanning is not getting started, turn on the given extension in WebIDE:

Output

Before Scanning

During Scanning

After Scanning