Barcode Scanning

Barcode scanning is common in enterprise apps. With abap2UI5, you can:

• Scan barcodes
• Handle focus transitions
• Play sounds for user feedback
• Display barcodes

This section walks through what you need to get started.

Scanning

The sap.ndc.BarcodeScannerButton control of the SAPUI5 library sap.ndc makes barcode scanning easy. From UI5 1.92 on it scans with the device camera in a plain browser; on an older release it scans only inside a native container such as the SAP Fiori Client and otherwise opens a dialog for typing the code in. Use it like any other UI5 control with abap2UI5. The example below shows the basic behavior — the view is built once, in the navigated branch, and the scanSuccess event carries the code and its format as event arguments:

  " PUBLIC SECTION:    DATA mv_code TYPE string.
  " PROTECTED SECTION: DATA mv_format TYPE string.
  METHOD z2ui5_if_app~main.

    IF client->check_on_navigated( ).

      DATA(view) = z2ui5_cl_ui5_view_builder=>factory(
          )->ele( n = `View` ns = `mvc`
              )->a( n = `xmlns`     v = `sap.m`
              )->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
              )->a( n = `xmlns:ndc` v = `sap.ndc`

              )->ele( `Page`
                  )->a( n = `title` v = `Barcode Scanning`

                  )->tag( n = `BarcodeScannerButton` ns = `ndc`
                      )->a( n = `dialogTitle` v = `Barcode Scanner`
                      )->a( n = `scanSuccess` v = client->_event(
                                                     val   = `SCAN_SUCCESS`
                                                     t_arg = VALUE #(
                                                         ( `${$parameters>/text}`   )
                                                         ( `${$parameters>/format}` ) ) )
                  )->tag( `Text`
                      )->a( n = `text` v = client->_bind( mv_code ) ).

      client->view_display( view->stringify( ) ).

    ELSEIF client->check_on_event( `SCAN_SUCCESS` ).

      mv_code   = client->get_event_arg( ).
      mv_format = client->get_event_arg( 2 ).
      "custom processing...
      client->message_box_display( |Scan finished: { mv_code } { mv_format }| ).

    ENDIF.

  ENDMETHOD.

UI5 Versions

This feature needs SAPUI5 - OpenUI5 does not ship the barcode scanner.

Native Mobile Shell

Inside the native mobile shell, the framework's own z2ui5:NativeBridgeScan control calls the phone's scanner through the shell's bridge and hands the code back in OnScan; in a plain browser it renders nothing, so the same view runs in both places. The control and the shell are described on that page.

Focus Handling

Most scanner devices emulate a keyboard. In that case, add an input field and move the focus from the backend — the scanned data flows into the input as if typed. After each Enter key press, the handler fires the set_focus frontend event for the next field:

ELSEIF client->check_on_event( `ONE_ENTER` ).
  client->follow_up_action( val   = client->cs_event-set_focus
                            t_arg = VALUE #( ( `id2` ) ) ).

The complete form with two inputs chained this way is on Focus.

Play Sounds

Audio feedback is handy in some scenarios. Fire the play_audio frontend event with the URL of a sound file — for example a .wav from the SAP MIME repository:

client->follow_up_action( val   = client->cs_event-play_audio
                          t_arg = VALUE #( ( `/SAP/PUBLIC/BC/ABAP/mime_demo/bam.wav` ) ) ).

The input-validation beep built around it is on Audio.

Render Barcodes

To render a barcode or a QR code, the Barcode control of the custom-controls add-on wraps bwip-js in a builder class, z2ui5_cl_cci_barcode; the same add-on carries a BarcodeScanner that reads every barcode in the camera picture at once into an ABAP table.

Working Samples

Complete apps from the sample catalog that use what this page describes. Each is a single class in abap2UI5/samples unless its row names another of the three sample repositories — pull that repository with abapGit and start the class with ?app_start=<class>.

Sample	Class
sap.ndc - BarcodeScannerButton — sap.ndc.BarcodeScannerButton expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.	Z2UI5_CL_SMPC_SAPUI5_011 · samples-controls