QR code scanner LWC Component
Thanks to the upcoming winter 21 release in salesforce. We now have a new module called getBarCodeScanner in LWC.
Please note that this feature will only work in mobile phone and not in desktop.
Please find the component code below
HTML
— — — — — — — — — — — — — — — — — — — — — — -
<template>
<! — After a barcode is successfully scanned,
its value is displayed here →
<div
class=”slds-var-m-vertical_large slds-var-p-vertical_medium
slds-text-align_center slds-border_top slds-border_bottom”>
Scanned barcode value is:
<span class=”slds-text-heading_small”>{scannedBarcode}</span>
</div>
<! — This is static help text →
<div class=”slds-align_absolute-center slds-text-align_center
slds-text-color_weak”>
Click Scan Barcode to open a barcode scanner camera view. Position a
barcode in the scanner view to scan it.
</div>
<! — The click-to-scan button;
Disabled if BarcodeScanner isn’t available →
<div class=”slds-text-align_center”>
<lightning-button
variant=”brand”
class=”slds-var-m-left_x-small”
disabled={scanButtonDisabled}
icon-name=”utility:cases”
label=”Scan Barcode”
title=”Open a camera view and look for a barcode to scan”
onclick={handleBeginScanClick}>
</lightning-button>
</div>
</template>
JS
— — — — — — — — — — — — — — — — — — — — — —
import { LightningElement } from ‘lwc’;
import { getBarcodeScanner } from ‘lightning/mobileCapabilities’;
export default class BarCodeScanner extends LightningElement {
myScanner;
scanButtonDisabled = false;
scannedBarcode = ‘’;
// When component is initialized, detect whether to enable Scan button
connectedCallback() {
this.myScanner = getBarcodeScanner();
if (this.myScanner == null || !this.myScanner.isAvailable()) {
this.scanButtonDisabled = true;
}
}
handleBeginScanClick(event) {
// Reset scannedBarcode to empty string before starting new scan
this.scannedBarcode = ‘’;
// Make sure BarcodeScanner is available before trying to use it
// Note: We _also_ disable the Scan button if there’s no BarcodeScanner
if (this.myScanner != null && this.myScanner.isAvailable()) {
const scanningOptions = {
barcodeTypes: [this.myScanner.barcodeTypes.QR]
};
this.myScanner
.beginCapture(scanningOptions)
.then((result) => {
console.log(result);
// 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
// Here, we just display the scanned value in the UI
this.scannedBarcode = decodeURIComponent(result.value);
})
.catch((error) => {
console.error(error);
// Handle unexpected errors here
})
.finally(() => {
console.log(‘#finally’);
// Clean up by ending capture,
// whether we completed successfully or had an error
this.myScanner.endCapture();
});
} else {
// BarcodeScanner is not available
// Not running on hardware with a camera, or some other context issue
console.log(
‘Scan Barcode button should be disabled and unclickable.’
);
console.log(‘Somehow it got clicked: ‘);
console.log(event);
// Let user know they need to use a mobile phone with a camera
}
}
}
Create a Lightning App page in winter 21 org and drag the above LWC component there. We are using Lightning App page because it supports both mobile and desktop form factors.
Now using salesforce 1 mobile app access the LWC component and check the functionality.
Hope you all have enjoyed reading this blog.
