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 footer toolbar as the main interaction for an inventory app

Scan button in the footer 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 footer toolbar as a secondary interaction

Scan button in the footer 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 footer toolbar for app-specific 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.

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

Mobile Integration (guidelines)

Implementation

No links.

Visual Design

No links