Mobile and Offline Developer Guide
jNote: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.
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}