General Concepts Mobile Integration Barcode Scanning

Updated: March 23, 2020
SAPUI5 Version 1.76

Barcode Scanning

Intro

This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app capabilities is to use native user interfaces triggered by an SAPUI5 control whenever possible.

For more information, see mobile integration concept.

Usage

Only use the barcode button to read barcodes. For OCR, RFID, and other scanning methods, use independent controllers.

Behavior and interaction

Main Action

If the main interaction of the app is to scan, highlight the button as the main action.

Scan button in the header toolbar as the main interaction for an inventory app
Scan button in the header toolbar as the main interaction for an inventory app

Secondary Action

If scanning is not the main feature of the app, do not highlight the button.

Scan button in the header toolbar as a secondary interaction
Scan button in the header toolbar as a secondary interaction
Scan button in a custom list item, available as an individual action for each item
Scan button in a custom list item, available as an individual action for each item

Scanner Unavailable

The barcode cannot be read if:

  • The scanner is disabled, not functioning, disconnected, or damaged.
  • The app is running in a “simple” browser (instead of the SAP Fiori client).
  • The SAP Mobile Platform server rendered the scan feature unavailable for the application.

Style

Icon

Font family: SAP icons (icon-bar-code). Unicode ID: e08d.

Barcode icon
Barcode icon

Guidelines

Guidelines for the Scan Button

  • Show the barcode button as a standalone button. Do not bundle it with input fields.
  • On the button, show an icon. Do not show a text.
  • Place the button in the header toolbar, or in the table toolbar for app-specific business actions. Only place the button in the content area if the scan action is available for individual items in the list.

Handling When the Barcode Cannot Be Read

Scanning Is the Main Action

Default to an alternative manual input option:

  • Offer a placeholder (input prompt) in the input field. For example: Enter barcode
  • Below the input field, explain the reason for the manual default: Scanner not available
  • Button for affirmative action: OK.
  • If the default is presented in a dialog box, offer a Cancel button.
Scanner is not available - Users can enter the barcode manually
Scanner is not available - Users can enter the barcode manually

Scanning Is a Secondary Action

If scanning is not a main feature of the app and the barcode cannot be read, do not display the buttons. No warning is required, and a manual default input method is optional. This is also the case if the SAP Mobile Platform server has rendered the scan feature unavailable for the app.

Do
Barcode scanning is not the main interaction - Scan button is hidden when scanning is not available
Barcode scanning is not the main interaction - Scan button is hidden when scanning is not available
Don't
Do not show the scan button if scanning is not the main interaction
Do not show the scan button if scanning is not the main interaction

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation