Mobile and Offline Developer Guide

Mobile App Development with Lightning Web Components and LWC Offline
Create Mobile-Ready Components
Use Mobile Device Features in Mobile Apps
Request App Review
Scan Barcodes
Barcode Scanning User Experience
Use the BarcodeScanner API
BarcodeScanner Example–Modern Scanning API
BarcodeScanner Example—Single Scan (Legacy)
Scan Multiple Barcodes (Legacy)
BarcodeScanner Example—Continuous Scanning (Legacy)
Create a Self-Service Kiosk Application
BarcodeScanner Example—Self-Service Kiosk (Legacy)
Customize the BarcodeScanner User Interface
Compatibility and Requirements
Considerations and Limitations
Access Device Biometrics
Manage Calendar Events
Access Contacts
Scan Documents
Use Location
Interact With NFC Tags
Offline Considerations and Limitations
Offline Environment Details
Use Salesforce Features While Offline
Development Tools and Processes
Quick Start Tutorials
PDF

Newer Version Available

This content describes an older version of this product. View Latest

BarcodeScanner Example—Single Scan (Legacy)

Here’s a minimal but complete example of a Lightning web component that uses BarcodeScanner to recognize a barcode.

We recommend using the modern scan() and dismiss() API functions in your LWC scanning code to streamline your development experience. The legacy API functions beginCapture(), resumeCapture(), and endCapture() are still available, but will be retired in a future release. See Understand BarcodeScanner Modern and Legacy APIs for additional details.

Important

The HTML template provides the bare minimum for a scanning user interface. There’s an element to display the results of a scan, a bit of static help text, and a button to start a scan. The only thing mildly interesting is the use of the disabled attribute to disable the scan button when not on a mobile device. This attribute is set based on the results of isAvailable() when the component is initialized.

This simple example displays the decoded value of a successful scan. It also displays a toast-style message based on the results of the scan. Each phase of the scanning lifecycle writes a console message.