Adding Barcode Support to a Salesforce Mobile Application | by John Vester | Mar, 2022

After his spouse challenged his degree of snack consumption, John determined to create a Salesforce Cellular app to scan the snack’s barcode

Making a Lightning Internet Element (LWC)

<?xml model="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">
import  getBarcodeScanner  from 'lightning/mobileCapabilities';
   connectedCallback()  !this.myScanner.isAvailable()) 
this.scanButtonDisabled = true;

// Reset scannedBarcode to empty string earlier than beginning new scan
this.scannedBarcode = '';
this.resultsFound = false;
this.snackFound = false;
// Make sure that BarcodeScanner is accessible earlier than making an attempt to make use of it
// Be aware: We _also_ disable the Scan button if there isn't any BarcodeScanner
if (this.myScanner?.isAvailable())
const scanningOptions =
barcodeTypes: [
.then((consequence) =>
this.resultsFound = true;
this.scannedBarcode = consequence.worth;
this.scannedBarcodeType = consequence.sort;
findSnackByUpcEquals( upcId: this.scannedBarcode )
.then((snack) =>
this.snackFound = true;
this.snackName = snack.Title;
this.snackCalories = snack.Calories__c;
this.snackUPC = snack.UPC__c;
this.error = undefined;
this.buttonLabel = 'Scan One other Snack Barcode';
.catch((error) =>
throw error;
.catch((error) =>
// Deal with cancellation and sudden errors right here
this.snackFound = false;
this.buttonLabel = 'Scan Barcode';
// Inform the person we bumped into one thing sudden
new ShowToastEvent(
title: 'Barcode Scanner Error',
'There was an issue scanning the barcode: ' +
JSON.stringify(error) +
' Please strive once more.',
variant: 'error',
mode: 'sticky'
.lastly(() =>
// Clear up by ending seize,
// whether or not we accomplished efficiently or had an error
// BarcodeScanner is just not accessible
// Not operating on {hardware} with a digicam, or another context difficulty
// Let person know they should use a cell phone with a digicam
new ShowToastEvent(
title: 'Barcode Scanner Is Not Out there',
'Strive once more from the Salesforce app on a cellular machine.',
variant: 'error'

<div if:false=resultsFound class="slds-align_absolute-center slds-text-align_center
Click on the Scan Barcode button to open a barcode scanner digicam view. Place a barcode within the scanner view to scan it.
<div if:true=resultsFound class="slds-var-m-vertical_large slds-var-p-vertical_medium
slds-text-align_center slds-border_top slds-border_bottom">
<p>Discovered Barcode = scannedBarcode (sort = scannedBarcodeType)</p>
<div if:true=snackFound class="slds-var-m-vertical_large slds-var-p-vertical_medium
slds-text-align_center slds-border_top slds-border_bottom">
<div class="slds-m-around_medium">
<p><span class="slds-text-title_bold">Title</span>: snackName</p>
<p><span class="slds-text-title_bold">Energy</span>: snackCalories</p>
<p><span class="slds-text-title_bold">UPC Worth</span>: snackUPC</p>
<div class="slds-text-align_center slds-p-top_xx-small">
<lightning-button variant="model" class="slds-var-m-left_x-small" disabled=scanButtonDisabled
icon-name="utility:instances" label=buttonLabel title="Scan a Snack"

Accessing Calorie Information Utilizing an Apex Controller

public with sharing class SnackController 
public static Snack__c findSnackByUpcEquals(String upcId)
return [
SELECT Name, Calories__c, UPC__c
FROM Snack__c
WHERE UPC__c = :upcId

More Posts