Scan barcodes from the Salesforce app using Lightning Web Components

This article explores the utilization of Salesforce for barcode scanning through mobile devices. By employing Lightning Web Components and the Salesforce application, individuals can efficiently capture information from barcodes on products or advertisements.

Scan barcodes from the Salesforce app using Lightning Web Components
Table of contents

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.

In sales or order processing, barcode scanning helps streamline order fulfillment. For organizations managing assets – such as equipment or devices – barcode scanning simplifies the tracking process.

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
 }
}

Compatibility and requirements

  • BarcodeScanner is a JavaScript module facilitating access to mobile hardware and platform features via Lightning Web Components.
  • It requires usage within a compatible Salesforce mobile app, such as the Salesforce mobile app or Mobile Publisher for Salesforce.
  • The Field Service mobile app offers an alternative implementation.
  • BarcodeScanner operates effectively in Lightning apps or Lightning sites within the specified Salesforce mobile apps on iOS or Android devices.
  • BarcodeScanner is not fully functional on desktops, web browsers, or mobile devices.
  • BarcodeScanner decodes barcode contents into string values.

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 guides you through creating a Lightning Web Component designed explicitly for barcode capture.

📲
Author's note: It is essential to take note of the compatibility and requirements outlined in the article. BarcodeScanner's functionality is optimized within compatible Salesforce mobile apps, such as the Salesforce mobile app or Mobile Publisher for Salesforce.