Salesforce Blog by Kapil Baliyan

Scan, Simplify, Empower: Your Guide to the Lightning Web Component Barcode Scanner API

Transform data capture with Lightning Web Component Barcode Scanner API. Simplify workflows, enhance accuracy, and empower users seamlessly

Lightning Web Component Mobile Capabilities - Barcode Scanner

Introduction :

In the ever-evolving landscape of web development, efficiency is key. Whether you’re streamlining workflows or enhancing user experiences, finding tools that simplify processes is invaluable. One area where efficiency gains can be made is in data entry, particularly when dealing with inventory management, order processing, or any task involving scanning barcodes. One such tool that’s been gaining traction is the Scan Barcode API within Lightning Web Components (LWC) – a powerful feature that allows developers to integrate barcode scanning capabilities directly into their Salesforce applications. In this blog post, we’ll delve into the capabilities of the Lightning Web Component Scan Barcode API and explore how it can be leveraged to revolutionize data capture within Salesforce environments.

What is the Scan Barcode API ?

The Scan Barcode API is a feature introduced within the Lightning Web Components framework that allows developers to integrate barcode scanning functionality directly into their Salesforce mobile applications. With just a few lines of code, developers can enable users to use their device’s camera to scan barcodes, capturing data quickly and accurately without the need for manual entry.

Why is Barcode Scanning Important ?

The possibilities for leveraging the Scan Barcode API are endless! Here are few examples of how Barcode Scanning can be used to enhance business process.

  • Inventory Management
  • Order Processing
  • Live Asset Tracking
  • Ticket Validation for access control
  • Lead capture during events via QR Code

Barcode scanning offers several advantages over manual data entry.

  • Speed : Scanning Barcode takes only a fraction of the time it would take to manually enter the same information. This can dramatically increase the speed of processes such as inventory management, order fulfillment, lead capture and data entry.
  • Enhanced Data Accuracy : Manual data entry is prone to errors, such as typos or transposed digits. Barcode scanning virtually eliminates these errors, ensuring that data is captured accurately every time.
  • Efficiency : By automating the data entry process, barcode scanning frees up time for employees to focus on more important tasks, leading to increased productivity and efficiency.

Getting Started :

Ready to unlock the power of barcode scanning? Here’s how:

  1. Import the API : Use import { getBarcodeScanner } from 'lightning/mobileCapabilities'; in your component’s JavaScript file.
  2. Check availability : Ensure the API is available before using it with getBarcodeScanner().isAvailable().
  3. Scan a Barcode : Scanning with BarcodeScanner is simple using the scanning lifecycle functions.
    • Start a scan with scan(options).
    • Handle the result of the scan, which is returned in the form of a promise.
    • End the scan with dismiss().

BarcodeScanner API Example :

<!-- barcodeScannerCmp.html -->
<template>
    <div class="slds-text-align_center">
        <span class="slds-text-heading_large">BarcodeScanner: Multi-Scan</span>
    </div>

    <!-- Static help text -->
    <div class="slds-text-color_weak slds-m-vertical_large slds-m-horizontal_medium">
        <p>Tap <strong>Start a Scanning Session</strong> to open a barcode scanner camera view. Position barcodes in the scanner view to scan them.</p>
        <p>Continue scanning items. Tap Done when you are done scanning.</p>
    </div>

    <!-- Scan button, always enabled -->
    <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 a Scanning Session"
            title="Start scanning barcodes, until there are no more barcodes to scan"
            onclick={beginScanning}
        ></lightning-button>
    </div>

    <!-- After barcodes are scanned, their values are displayed here: -->
    <template lwc:if={scannedBarcodes}>
        <div class="slds-var-m-vertical_large slds-var-p-vertical_medium slds-border_top slds-border_bottom">
            <p>Scanned barcode values are:</p>
            <pre>{scannedBarcodesAsString}</pre>
        </div>
    </template>
</template>
import { LightningElement, track } from 'lwc';
import { getBarcodeScanner } from 'lightning/mobileCapabilities';

export default class BarcodeScannerCmp extends LightningElement {
    barcodeScanner;
    @track scannedBarcodes;

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

    beginScanning() {
        // Set your configuration options, including bulk and multi-scanning if desired, in this scanningOptions object
        const scanningOptions = {
            barcodeTypes: [this.barcodeScanner.barcodeTypes.QR, 
                            this.barcodeScanner.barcodeTypes.CODE_128,
                            this.barcodeScanner.barcodeTypes.CODE_39,
                            this.barcodeScanner.barcodeTypes.CODE_93,
                            this.barcodeScanner.barcodeTypes.DATA_MATRIX,
                            this.barcodeScanner.barcodeTypes.EAN_13,
                            this.barcodeScanner.barcodeTypes.EAN_8,
                            this.barcodeScanner.barcodeTypes.ITF,
                            this.barcodeScanner.barcodeTypes.PDF_417,
                            this.barcodeScanner.barcodeTypes.UPC_A,
                            this.barcodeScanner.barcodeTypes.UPC_E
                        ],
            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()) {
        // Reset scannedBarcodes before starting new scanning session
        this.scannedBarcodes = [];

        // Start scanning barcodes
        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) {
        // Do something with the barcode scan value:
        // - look up a record
        // - create or update a record
        // - parse data and put values into a form
        // - and so on; this is YOUR code
        console.log(JSON.stringify(barcodes));
        this.scannedBarcodes = this.scannedBarcodes.concat(barcodes);
    }

    processError(error) {
        // Check to see if user ended scanning
        if (error.code == "USER_DISMISSED") {
            console.log("User terminated scanning session.");
        } else {
            console.error(error);
        }
    }

    get scannedBarcodesAsString() {
        return this.scannedBarcodes.map((barcode) => barcode.value).join("\n");
    }
}

Considerations and Limitations :

  • BarcodeScanner API is accessible when it runs within a compatible Salesforce mobile app
    • Salesforce Mobile app
    • Mobile Publisher for Salesforce App
    • Mobile Publisher for Experience Cloud

References :

Read More :

,