Our new BarcodeScanner API enables developers to more quickly build Lightning web components (LWCs) for Salesforce mobile apps that can scan a variety of QR and barcodes. Customers who need to move around while scanning, in order to track inventory or parcels, for example, may find this service extremely practical and helpful. In the Summer ‘22 release cycle, we updated our Dreamhouse sample application to include an example use case of the BarcodeScanner API, which we’ll walk through in more detail below.

Working with the BarcodeScanner API

Dreamhouse is a fictitious real estate sample app built with LWCs that’s been optimized for both desktop and mobile experiences. Our great example use case for the BarcodeScanner API: the Dreamhouse company prints QR codes on each property’s “For Sale” sign. When showing the place to potential buyers, a property’s assigned broker can scan the QR code to load relevant data onto the Salesforce app.

For our example use case, we used the API’s single scan* method. This approach enables users to scan a single QR code and do something with the scanned data. With Dreamhouse, once the QR code has been successfully scanned, we automatically redirect the user to the related property detail page via Salesforce’s Navigation Service.

*Note: The BarcodeScanner API also comes with a continuous capture mode, which may be more suitable for scanning multiple barcodes in a row without having to repeatedly press the scan button, as when, for example, scanning inventory.

The full component code is available on GitHub. You can see how we set up the BarcodeScanner API in our scanner component’s JavaScript below:

Manually testing the BarcodeScanner LWC

The BarcodeScanner API works on LWCs in the Salesforce mobile app, apps published through the Mobile Publisher for Salesforce, and apps published via the Mobile Publisher for Experience Cloud.

We decided to test our new BarcodeScanner feature via the Salesforce mobile app, which can be installed on either a mobile emulator or a physical smartphone

To do so, we set up a scratch org and pushed our changes to it, then logged in with our credentials at test.salesforce.com, where scratch orgs live, by ticking the Use Custom Domain checkbox on the mobile login screen.

We also prepared this QR code to test our app (we used Beaconstac’s free QR code generator, but any QR code generator will work):

This QR code comprises the property’s record ID as a string. The code can be attached to the property’s “For Sale” sign to enable speedy record lookup.
Once we logged in, we pointed our phone cameras at the code, and… voila! We were on the QR code-identified property record page in an instant. ✨

See the magic in action below:

Writing automated tests for mobile features

After developing and manually testing the QR code scanner feature, we made sure to write automated unit tests to enable faster detection of future code changes that could break its functionality.

Because we don’t need to worry about testing the BarcodeScanner API itself, our first step was to mock its functionality.

Once we had a fake “BarcodeScanner API” to work with, we were ready to write some unit tests. Here’s what we tested for our example use case:

• Whether the barcode scanner component was appropriately disabled when viewed on desktop. We could have hidden the component for desktop at the metadata level, but we preferred to show it disabled, so learners could see that the component exists and works for mobile.
• Whether the barcode scanner class could correctly extract data from a scan
• Whether the barcode scanner class correctly navigated to the relevant property record
• Whether the barcode scanner component showed the appropriate error toast when the user canceled their scan
• Whether the barcode scanner component showed the appropriate error toast when there was a non-cancelation error

What’s coming next

We’ve added even more great new features to the BarcodeScanner API to enable developers to further customize its interface. In October, be on the lookout for updated documentation detailing new parameters for BarcodeScannerOptions to customize settings, such as:

• Choosing which camera your device should use with cameraFacing. The back camera is probably more convenient for users who scan with their own handheld devices, whereas the front camera may be preferable for situations where users need to scan codes on stationary event kiosks.
• Dictating the size of the scan area frame within the camera view with scannerSize. The size can range from small to x-large to meet all device size needs.
• Visually indicate completed scan confirmation successText messages with a checkmark icon using showSuccessCheckMark.

Finally, for cases where extensive customization of the interface is needed, the coming release will empower developers to wholly replace the standard UI with a custom one using backgroundViewHTML, down to the interface for canceling/dismissing scans.

We hope you’re as excited as we are about how much faster developing barcode scanner components will be with these upcoming additions!

Learn more

Today, we covered the basics of what the BarcodeScanner API is, when you might want to use it, and how to connect to it from within an LWC. To continue this learning journey, please feel free to peruse the below resources for more information on working with Salesforce DX and the BarcodeScanner API.

• Quick Start: Salesforce DX (Trailhead)
• Barcode Scanner API for LWC | Developer Quick Takes (Fiona Tang, Salesforce)
• BarcodeScanner Developer Guide (Salesforce Developers)
• BarcodeScanner Data Types (Salesforce Developers)

About the authors

Alba Rivas works as a Principal Developer Advocate at Salesforce. She currently focuses on Lightning Web Components and Slack development. You can follow her on Twitter @AlbaSFDC.

tessa is a Lead Developer Advocate at Salesforce.

Fiona Tang is an Associate Product Manager at Salesforce. She currently works on the Mobile Platform team and is a part of the Salesforce APM program.