Mobile devices have become a core aspect of our lives. Of course, this can be a good and bad thing. However, for the purposes of this article, I’ll focus on the positive ways mobile devices enrich our lives.
In fact, when my college-senior son, Eric visits, our conversations often provoke Eric to use his phone to locate and validate information related to our discussions. The crazy thing is: No matter what we talk about, his favorite search engine and voice-to-text skills provide an almost-immediate answer.
My use of technology even extends to thrifty shopping approaches where I can scan the barcode for a product of interest to see if the same product is available for a better price. This made me wonder how easily I could implement barcode technology into a custom application or component.
Barcode Support in Salesforce Mobile Applications
The engineering team at Salesforce knows that barcodes are a quick and easy way for mobile device users to pinpoint information. Both UPC barcodes and QR codes have been in place for decades now, and their usage isn’t fading.
Using the Salesforce mobile client and the camera on the mobile device, barcodes can be easily integrated into an application via the BarcodeScanner API. Here are a few common use cases for creating a Lightning Web Component (LWC) which includes the BarcodeScanner API:
- Perform a lookup in Salesforce, using the barcode as a primary key.
- Auto-populate form data by reading contact data inside a QR code.
- Make an external system call with barcode data, such as tracking a shipment via a third-party API.
In this article, I’ll explore the first option, where the scanned barcode performs a lookup for data stored inside of Salesforce.
Salesforce DX and VS Code
Salesforce DX makes development on the Salesforce Platform easy, open, integrated, and collaborative. With Salesforce DX, developers can build together and deliver continuously. When coupled with Visual Studio (VS) Code and the Salesforce Extension Pack, working with Salesforce becomes a seamless operation.
As an example, the Command-Shift-P or Windows-Shift-P shortcut provides a quick access to SFDX commands like those shown below:
Seeing these enhancements first-hand excited me for an opportunity to use VS Code and the Salesforce Extension Pack to build something for the Salesforce platform.
The Calorie Counter Use Case
My avid readers may recall that I have the opportunity to work in a 100% remote role. For the majority of the week, I share our home with my wife, Nicole, and our toddler son, Finny. Nicole is very conscientious about maintaining a good diet, and my love of snacks is a sensitive topic between us. This is basically a nice way of saying that Nicole thinks I snack too much.
What I noticed is that each of these snacks …
… has its own unique barcode.
Given my current scenario, I decided to create a Lightning Web Component (LWC) for a Salesforce mobile application called Calorie Counter. This application would use the BarcodeScanner API to read the UPC and provide the number of calories for the snack of my choosing.
Long term, I could use this logic to track my snack consumption, helping me to stay within an acceptable range. However, for now, we’ll walk before we run.
Creating a Snack Object
To keep things simple, I created a Snack__c object in Salesforce DX, which contained the following properties:
- Name (already exists in Salesforce) to describe the snack
- Calories (as Calories__c) to note the calories per serving
- Barcode Value (as UPC__c) to serve as a unique key for each snack
Using my snacks (pictured above) I could quickly enter the expected data for this use case:



Top comments (0)