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.

  • Published 24 Jan 2024
  • 7 mins read
Scan barcodes from the Salesforce app using Lightning Web Components
Table of contents
Article Summary Box

Article Highlights

  • Integration of Lightning Web Components with Salesforce enhances data accuracy by eliminating manual data entry and reducing errors associated with it.
  • The BarcodeScanner component optimizes order fulfillment and asset management through efficient tracking of inventory movements and equipment.
  • Advanced functionality is available through the capability to call Apex methods, allowing for updates and data management directly within the Salesforce environment.

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

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

📲
Author's note: The compatibility and requirements outlined in the article must be considered. BarcodeScanner's functionality is optimized within compatible Salesforce mobile apps, such as the Salesforce mobile app or Mobile Publisher for Salesforce.

Document
Contact us
to make your transition

Spring Release Notes Box
Spring Release Updates
Enhanced API capabilities
The release expands on API functionalities, which could potentially integrate more deeply with barcode scanning and processing within Salesforce apps.
Improved Lightning Web Components
The updates offer enhanced features for Lightning Web Components, which could make it easier to implement custom barcode scanning solutions directly within the Salesforce UI.
Integration with mobile services
The release mentions improved integration capabilities with mobile services, which could facilitate the use of mobile-specific features like camera access for barcode scanning.
Streamlined workflow automation
With new AI and automation features, workflows that include barcode scanning can be streamlined to improve efficiency and accuracy in data handling within Salesforce apps.

Last updated: 12 Jun 2024