Mobile and Offline Developer Guide
jNewer Version Available
BarcodeScanner Example–Modern Scanning API
Here’s a complete example of a Lightning web component that uses BarcodeScanner to scan
multiple barcodes simultaneously and process them in a batch after scanning is
completed.
The HTML template provides a minimal scanning user interface. There’s an element to display the results of the scans in a list view, a bit of static help text, and a button to start scanning.
1<!-- barcodeScannerMultiScan.html -->
2 <template>
3 <div class="slds-text-align_center">
4 <span class="slds-text-heading_large">BarcodeScanner: Multi-Scan</span>
5 </div>
6
7 <!-- Static help text -->
8 <div class="slds-text-color_weak slds-m-vertical_large slds-m-horizontal_medium">
9 <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>
10 <p>Continue scanning items. Tap Done when you are done scanning.</p>
11 </div>
12
13 <!-- Scan button, always enabled -->
14 <div class="slds-align_absolute-center slds-m-vertical_large">
15 <lightning-button
16 variant="brand"
17 class="slds-var-m-left_x-small"
18 icon-name="utility:scan"
19 label="Start a Scanning Session"
20 title="Start scanning barcodes, until there are no more barcodes to scan"
21 onclick={beginScanning}
22 ></lightning-button>
23 </div>
24
25 <!-- After barcodes are scanned, their values are displayed here: -->
26 <template lwc:if={scannedBarcodes}>
27 <div class="slds-var-m-vertical_large slds-var-p-vertical_medium slds-border_top slds-border_bottom">
28 <p>Scanned barcode values are:</p>
29 <pre>{scannedBarcodesAsString}</pre>
30 </div>
31 </template>
32 </template>This example displays all the values of successful scans in a list view. It’s a streamlined example, emphasizing the scanning lifecycle of the modern scanning APIs.
1// barcodeScannerMultiScan.js
2import { LightningElement, track } from "lwc";
3import { getBarcodeScanner } from "lightning/mobileCapabilities";
4
5export default class BarcodeScannerContinuousDocDemo extends LightningElement {
6 barcodeScanner;
7 @track scannedBarcodes;
8
9 connectedCallback() {
10 this.barcodeScanner = getBarcodeScanner();
11 }
12
13 beginScanning() {
14 // Set your configuration options, including bulk and multi-scanning if desired, in this scanningOptions object
15 const scanningOptions = {
16 barcodeTypes: [this.barcodeScanner.barcodeTypes.QR],
17 scannerSize: "FULLSCREEN",
18 cameraFacing: "BACK",
19 showSuccessCheckMark: true,
20 enableBulkScan: true,
21 enableMultiScan: true,
22 };
23
24 // Make sure BarcodeScanner is available before trying to use it
25 if (this.barcodeScanner != null && this.barcodeScanner.isAvailable()) {
26 // Reset scannedBarcodes before starting new scanning session
27 this.scannedBarcodes = [];
28
29 // Start scanning barcodes
30 this.barcodeScanner
31 .scan(scanningOptions)
32 .then((results) => {
33 this.processScannedBarcodes(results);
34 })
35 .catch((error) => {
36 this.processError(error);
37 })
38 .finally(() => {
39 this.barcodeScanner.dismiss();
40 });
41 } else {
42 console.log("BarcodeScanner unavailable. Non-mobile device?");
43 }
44 }
45
46 processScannedBarcodes(barcodes) {
47 // Do something with the barcode scan value:
48 // - look up a record
49 // - create or update a record
50 // - parse data and put values into a form
51 // - and so on; this is YOUR code
52 console.log(JSON.stringify(barcodes));
53 this.scannedBarcodes = this.scannedBarcodes.concat(barcodes);
54 }
55
56 processError(error) {
57 // Check to see if user ended scanning
58 if (error.code == "USER_DISMISSED") {
59 console.log("User terminated scanning session.");
60 } else {
61 console.error(error);
62 }
63 }
64
65 get scannedBarcodesAsString() {
66 return this.scannedBarcodes.map((barcode) => barcode.value).join("\n");
67 }
68}