Skip to Content
Technical Articles
Author's profile photo Ferry Djaja

SAPUI5 Multi-Barcode Scanner App

Multi barcode scanner app is a productivity tool that is easy to integrate with SAPUI5 to capture one or more barcodes with a single press of a scan button. The app will be able to  capture all barcodes simultaneously on a single label. No need repetitive scanning to capture all required barcodes and increase productivity!

The barcode result will be auto populated in SAPUI5 field for further validations before sending to SAP backend.

We will build an SAPUI5 Multi-Barcode scanner Android app to scan the item with multiple barcode labels.


I wrote a detailed steps in this blog on how to setup all the required components. Please ensure you have setup the required components before continue with the rest.

Instead of using cordova plugin camera from SAP Web IDE, we will use cordova-plugin-camera-preview. 

We will modify cordova-plugin-ml to add the multi barcode scan features as well.

Modify cordova-plugin-ml

Open and replace the code with this.

Simple UI

We will create a simple UI to start and stop the camera preview. Also to take picture and feed to the recognizer.

Update View and Controller


<mvc:View controllerName="GPS.GPS.controller.GPS" xmlns:html="" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
	<App id="idAppControl">
		<Page title="Camera test">
				<HBox width="100%" id="__hbox0" justifyContent="SpaceBetween">
						<Button icon="sap-icon://begin"  width="30%" id="__button0" press="startCamera">
								<FlexItemData alignSelf="Stretch" id="__data0"/>
						<Button icon="sap-icon://stop" width="30%" id="__button1" press="stopCamera">
								<FlexItemData alignSelf="Stretch" id="__data1"/>
						<Button icon="sap-icon://video" width="40%" id="__button2" press="takePicture">
								<FlexItemData alignSelf="Stretch" id="__data2"/>
				<HBox width="100%" id="__hbox1" justifyContent="Center">
						<SearchField id="Barcode1">
				<HBox width="100%" id="__hbox2" justifyContent="Center">
						<SearchField id="Barcode2">
				<HBox width="100%" id="__hbox3" justifyContent="Center">
						<SearchField id="Barcode3">
				<HBox width="100%" id="__hbox4" justifyContent="Center">
						<SearchField id="Barcode4">


  • startCamera and stopCamera is to start and stop the camera preview.
  • takePicture is to get the picture and feed the picture to barcode recognition  mltext.getBarcode.
  • For this demo app, the maximum barcode that can be recognized is fixed to four labels. We can adjust it to maximum number as per requirements.
  • Once the barcode(s) is recognized, onSuccessBarcode function will be called and the result is in JSON format recognizeText.blocktext.
  • and finally fill in the myBarcodefield with the result.
], function(Controller) {
    "use strict";
    var oView;
    var stop = false;

    return Controller.extend("Scanner.Scanner.controller.Scanner", {
        oView: null,

        onInit: function() {
            oView = this.getView();

        startCamera: function() {
            var width = 300;
            var height = 300;
            var x = (this.getView().$().width() - width)/2;
            var y = (this.getView().$().height() - height)/2 + 13,0;

            CameraPreview.startCamera({x: x, y: y, width: width, height: height, toBack: false, previewDrag: false, tapPhoto: true, tapFocus: true, camera: CameraPreview.CAMERA_DIRECTION.BACK});

        stopCamera: function() {
             stop = true;

        takePicture: function(){
            CameraPreview.takePicture({quality: 100}, function(imgData){

                mltext.getBarcode(onSuccessBarcode, onFailBarcode, {
                    imgType: 4,
                    imgSrc: imgData

                function onSuccessBarcode(recognizedText) {

                    var myBarcode1 = oView.byId("Barcode1");
                    var myBarcode2 = oView.byId("Barcode2");
                    var myBarcode3 = oView.byId("Barcode3");
                    var myBarcode4 = oView.byId("Barcode4");


                function onFailBarcode(message) {
                    console.log('Failed because: ' + message);
                    alert('Failed because: ' + message);

Full source code on my repo.

Here is the demo video – the response time is pretty fast. In the video it looks slow is because of my stylus is not quite responsive 🙂

Assigned Tags

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

      Is there a reason you don't use sap.ndc library ? you could do same things with 2 lines of code including QR code.


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

      Thanks. I didn't know there is this lib. I will play around with that too.

      Author's profile photo Sap Enthusiast
      Sap Enthusiast

      Do you have any code using sap.ndc library?


      Author's profile photo Vinay Godugu
      Vinay Godugu

      Ferry Djaja – Do we need any licencing for Cordova Plugin and SMP server. I am trying to work with this example using SAP WEBIDE full stack. Can you give some information about it. In the I would like to deploy this as a Fiori app (should be accessible via FLP). 

      Thank you very much!