Scan barcodes from Salesforce Mobile App

Hello Trailblazers,

Today I am going discuss a newly added functionality to Salesforce Mobile platform which has given us ability to scan the barcodes from salesforce mobile app using Lightning Web Component implementation. With the help of this Barcode Scanner API we can now read UPC, QR and other type of barcodes from Lightning Web Component. 

This API is made generally available by Salesforce after February 2022. Lightning Web Component uses your mobile camera and mobile OS capabilities to scan the barcode and then sends data back to LWC from where process was invoked. You can use any UI(Button, link etc.) to start barcode scanning. So, the general flow will be initiate barcode scanning from lightning web component then mobile camera will be opened and once valid barcode is scanned you will be returned to your lightning web component which initiated this scan with data which you can process.

BarcodeScanner API

This barcode scanner API has capability to scan single barcode as well as multiple barcodes at a time. You have to import BarcodeScanner into your component definition before using its features in code. Once it is done use various library functions provided to begin scanning and read barcode.

Let’s understand those functions first.

Function Name	Description
getBarcodeScanner	This function returns instance of BarcodeScanner which we use in further operations.
isAvailable	This function returns Boolean value indicating whether Barcode scanning is supported or not on current device. Use barcode instance to call this function before implementing other logic.
beginCapture	This function initiated a new scanning session. We need to pass few parameters as options which we will discuss shortly.
resumeCapture	This function is used in scenarios where we want to scan multiple barcodes at a time. Use this function to begin scan once you read and store data from previous scan.
endCapture	This function is used to end the scanning session and to return back to component.

BarcodeScanner Data Types

Data Type	Properties	Description
Barcode	type	This returns type of barcode that was read in the form of enumeration of type string(BarcodeType). Barcode Types can be found here.
	value	This returns decoded value of barcode in the form of string.
BarcodeScannerOptions		This is the configuration object having details for scanning session which we use as a parameter for beginCapture function.
	barcodeTypes	This is a list parameter in which we define type of barcodes which we will be reading through this session. Barcode Types can be found here.
	instructionText	An optional string parameter which we can use to display some instructions or information on Scanning interface.
	successText	An optional string parameter which we can use to display a message upon successful read of a barcode.
BarcodeScannerFailure		This object holds information about the scanning error.
	code	This returns the reason for scanning failure (BarcodeScannerFailureCode). It could be one of the – userDismissedScanner/ userDeniedPermission/ userDisabledPermissions/ unknownReason
	message	This string explains the reason of scanning failure. We can use this message directly on UI as it is in readable English format.

Now Let’s see the example of single scan.

Go ahead and create new Lightning Web Component. For the example purpose I have kept the UI simple but you can use any structure as per your business.

For multiple scans you will have to use resumeCapture once data is read from previous scan. In multiple scan you will not use endCapture as user will manually close scanning once he is done with all scans. Yes, but if something goes wrong with scanning you will have to end the session. You can see example here.

Thank You !