Scan QR Code Integration in SAP UI5

by | Mar 14, 2023 | UI5, UI5 Integrations

Home » SAP » UI5 » UI5 Integrations » Scan QR Code Integration in SAP UI5

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

Steps to Integrate QR Code Scan

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:

Hybrid App Toolkit

Output

Before Scanning

Scan QR Code Integration in SAP UI5 before scan

During Scanning

Scan QR Code Integration in SAP UI5 during scan

After Scanning

Scan QR Code Integration in SAP UI5 after scan

Author

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Author