Updated: June 16, 2023

Barcode Scanner



The barcode scanner allows users to quickly locate an object by scanning a barcode via the device’s built-in camera. It is also used when users need to efficiently manage business objects in a lengthy list report.

Barcode scanner examples
Barcode scanner examples


The barcode scanner comes in a full-screen modal that includes a navigation bar, scan window, and alignment box.

A. Navigation Bar

The navigation is composed of a “Cancel” button, title, and a flash icon.

B. Scan Window

The scan window occupies the rest of the screen with a gray overlay.

C. Alignment Guide

The alignment guide provides guidance to the user when pointing the camera to a barcode.

Barcode scanner anatomy
Barcode scanner anatomy


Behavior and Interaction

The barcode scanner is considered as part of the search workflow. It can be launched by tapping on the barcode icon in the search bar. In this example, users can quickly locate objects, update quantities, and keep an accurate record of inventory.


The user may choose to type in the search bar or search by scanning a barcode. Tapping on the barcode icon brings up the scanner in a full-screen modal.


The scanner consists of a navigation bar to allow users to exit the scanner or turn on the flash light.

Scan Results

Once a barcode is scanned, the scanner slides down and the previous list has been filtered by the scan result.

Object Details with Actions

Tapping on an object cell navigates to the details of the object. In this example, the user may change the quantity of the part and confirm the change.

Example of barcode scanner flow
Example of barcode scanner flow



Development: FUIBarcodeScanViewController
Related Components/Patterns: Search Bar, SearchList Report