Scan barcodes from the Salesforce app using Lightning Web Components

Integrating these technologies facilitates a streamlined process, enhancing the speed and accuracy of data capture through smartphones.

Find out just how!

Real-world applications of barcode scanning

Barcode scanning eliminates manual data entry, reducing the likelihood of errors and improving data accuracy. Users can scan product barcodes to update inventory levels, track stock movements, and manage stockouts or overstocks more effectively.

Barcode scanning helps streamline order fulfillment in sales or order processing. It also simplifies the tracking process for organizations managing assets such as equipment or devices.

Using BarcodeScanner API

Integration of the component into the Salesforce app

Using Lightning Web Components allows seamless integration of the barcode scanning with Salesforce. There are possibilities to make this functionality a little more advanced and call Apex methods to:

• Update records
• Leverage Salesforce data
• Maintain a consistent user experience within the Salesforce environment.

To implement barcode scanning in a Salesforce app using Lightning Web Components (LWC), you must add the newly created Lightning Web Component to the desired Salesforce application.

Sample code

👉"barcodeScanner.html"

<template>
  <div class="slds-align_absolute-center slds-m-vertical_large">
    <lightning-button
      variant="brand"
      class="slds-var-m-left_x-small"
      icon-name="utility:scan"
      label="Start Scanning"
      onclick={startScanning}
    ></lightning-button>
  </div>
</template>

👉"barcodeScanner.js"

import { LightningElement, track } from "lwc";
import { getBarcodeScanner } from "lightning/mobileCapabilities";


export default class BarcodeScanner extends LightningElement {
 barcodeScanner;


 connectedCallback() {
   this.barcodeScanner = getBarcodeScanner();
 }


 startScanning() {
   const scanningOptions = {
     barcodeTypes: [this.barcodeScanner.barcodeTypes.QR],
     scannerSize: "FULLSCREEN",
     cameraFacing: "BACK",
     showSuccessCheckMark: true,
     enableBulkScan: true,
     enableMultiScan: true,
   };


   // Make sure BarcodeScanner is available before trying to use it
   if (this.barcodeScanner != null && this.barcodeScanner.isAvailable()) {
     this.scannedBarcodes = [];
     this.barcodeScanner
       .scan(scanningOptions)
       .then((results) => {
         this.processScannedBarcodes(results);
       })
       .catch((error) => {
         this.processError(error);
       })
       .finally(() => {
         this.barcodeScanner.dismiss();
       });
   } else {
     console.log("BarcodeScanner unavailable. Non-mobile device?");
   }
 }


 processScannedBarcodes(barcodes) {
   // Business logic
 }


 processError(error) {
   // Error handling
 }
}

Make your barcode data mobile

The exploration of Salesforce's barcode scanning capabilities using Lightning Web Components (LWC) offers a powerful solution for efficient data capture on mobile devices. The provided implementation steps guide you through creating a Lightning Web Component designed explicitly for barcode capture.