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.
Secondary Action
If scanning is not the main feature of the app, do not highlight the button.
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
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
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
Don't
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
- Barcode Scanner (SAPUI5 API reference)
- Order Products (App in demo cloud)
Visual Design
- No links