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—Self-Service Kiosk (Legacy)
The HTML template provides the bare minimum for a scanning user interface. There’s an element to display the results of the scans, a bit of static help text, and a button to start scanning.
1<!-- barcodeScannerKiosk.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 <!-- After barcode are scanned, their values are displayed here: -->
8 <template lwc:if={scannedBarcodes}>
9 <div class="slds-var-m-vertical_large slds-var-p-vertical_medium
10 slds-text-align_center slds-border_top slds-border_bottom">
11 Scanned barcode values are:
12 <span class="slds-text-heading_small">{scannedBarcodesAsString}</span>
13 </div>
14 </template>
15
16 <!-- Static help text -->
17 <div class="slds-text-align_center slds-text-color_weak slds-m-vertical_large">
18 Click <strong>Start a Scanning Session</strong> to open a
19 barcode scanner camera view. Position a barcode in the scanner
20 view to scan it.
21
22 <p>Continue scanning items. Click ✖ when there are no
23 more items to scan.</p>
24 </div>
25
26 <!-- Scan button, always enabled -->
27 <div class="slds-align_absolute-center slds-m-vertical_large">
28 <lightning-button
29 variant="brand"
30 class="slds-var-m-left_x-small"
31 icon-name="utility:scan"
32 label="Start a Scanning Session"
33 title="Start scanning barcodes, until there are no more barcodes to scan"
34 onclick={beginScanning}
35 ></lightning-button>
36 </div>
37
38 <!-- Custom UI for the scanner is defined here. We set display:none here because the scanner will show this. -->
39 <div data-id="BarcodeScannerCustomUI" style="display: none;">
40 <div>
41 <h1 align="right"><a style="text-decoration: none;" href="nimbusbarcodescanner://dismiss">✖</a></h1>
42 <h2 align="center">Welcome, let's get you verified!</h2>
43 <h3 align="center">Point the front side of your Health Card<br>at the camera on this device.</h3>
44 </div>
45 </div>
46</template>This example borrows heavily from the code sample in BarcodeScanner Example—Continuous Scanning (Legacy). The differences in this example provide all the basic elements needed for a self-service kiosk use case. It uses the front-facing camera for scanning, employs a continuous scanning lifecycle to minimize the need for user interaction, and even defines and uses a custom UI.
1// barcodeScannerKiosk.js
2import { LightningElement, track } from 'lwc';
3import { ShowToastEvent } from 'lightning/platformShowToastEvent';
4import { getBarcodeScanner } from 'lightning/mobileCapabilities';
5
6export default class NimbusPluginBarcodeScannerCustomUI extends LightningElement {
7
8 sessionScanner;
9 @track scannedBarcodes;
10
11 connectedCallback() {
12 this.sessionScanner = getBarcodeScanner();
13 }
14
15 beginScanning() {
16 // Reset scannedBarcodes before starting new scanning session
17 this.scannedBarcodes = [];
18
19 // Make sure BarcodeScanner is available before trying to use it
20 if (this.sessionScanner != null && this.sessionScanner.isAvailable()) {
21 let elem = this.template.querySelector('div[data-id=BarcodeScannerCustomUI]');
22 let backgroundViewHTML = '<header><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"></header>';
23 backgroundViewHTML += `<html><body>${elem.innerHTML}</body></html>`;
24
25 // Specify the size of the scanner camera view, use of the front-facing camera, and pull in the custom UI defined above
26 const scanningOptions = {
27 "barcodeTypes": [this.sessionScanner.barcodeTypes.QR],
28 "scannerSize": "XLARGE",
29 "cameraFacing": "FRONT",
30 "showSuccessCheckMark": true,
31 "presentWithAnimation": false,
32 "backgroundViewHTML": backgroundViewHTML
33 };
34
35 this.sessionScanner.beginCapture(scanningOptions)
36 .then((scannedBarcode) => {
37 this.processScannedBarcode(scannedBarcode);
38 this.continueScanning();
39 })
40 .catch((error) => {
41 this.processError(error);
42 this.sessionScanner.endCapture();
43 })
44 }
45 else {
46 console.log("BarcodeScanner unavailable. Non-mobile device?");
47 }
48 }
49
50 async continueScanning() {
51 // Pretend to do some work; see timing note below.
52 await new Promise((resolve) => setTimeout(resolve, 1000));
53
54 this.sessionScanner.resumeCapture()
55 .then((scannedBarcode) => {
56 this.processScannedBarcode(scannedBarcode);
57 this.continueScanning();
58 })
59 .catch((error) => {
60 this.processError(error);
61 this.sessionScanner.endCapture();
62 })
63 }
64
65 processScannedBarcode(barcode) {
66 // Do something with the barcode scan value:
67 // - look up a record
68 // - create or update a record
69 // - parse data and put values into a form
70 // - and so on; this is YOUR code
71 console.log(JSON.stringify(barcode));
72 this.scannedBarcodes.push(barcode);
73 }
74
75 processError(error) {
76 // Check to see if user ended scanning
77 if (error.code == 'USER_DISMISSED') {
78 console.log('User terminated scanning session via Cancel.');
79 }
80 else {
81 console.error(error);
82 }
83 }
84
85 get scannedBarcodesAsString() {
86 return this.scannedBarcodes.map(barcodeResult => {
87 return barcodeResult.value;
88 }).join('\n\n');
89 }
90}See Scan Multiple Barcodes (Legacy) for an explanation of how beginScanning() and continueScanning() work together to create the continuous scanning cycle.