Salesforce LWC: Barcode Scanner

By -
For scanning barcode in Salesforce, Salesforce is releasing Barcode API as part of Winter 21 release. Currently it is in beta with few limitation which we will see at the end of this blog.
To implement Barcode scanning functionality you need to just import barcode API in your LWC which is :


import { getBarcodeScanner } from 'lightning/mobileCapabilities';

Now barcode scanner functionality will only work on devices which has camera feature so to check that we need to check first whether Scanning feature is available in current device or not. To check this you need to use above API. As part of this API there is a method isAvailable(), this method will help to determine whether current device support scanning feature or not.
So every time when our LWC component will load then in connectedCallback() method we can check this:

1
2
3
4
5
6
connectedCallback() {
        this.myScanner = getBarcodeScanner();
        if (this.myScanner == null || !this.myScanner.isAvailable()) {
            this.scanButtonDisabled = true;
        }
    }

Now after checking scanning feature in our device it is time to write logic for scanning feature. To scan the barcode we just need to call one method which is also part of this scanning API: beginCapture().
So once you will click on button for barcode scanning then we will call this method in our onclick event handler method which will enable the Camera and capture the QR code. After capturing the QR code you can read the result using decodeURIComponent() method.

decodeURIComponent() method is javaScript standard method which is use to decode the Uniform Resource Identifier (URI).

Example:

1. HTML Code:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
    <div style="background-color:white">
        <lightning-card  variant="Narrow"  title="Barcode Scanner" icon-name="standard:pricebook">
            <div class="slds-p-horizontal_small">
                <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>
                <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>
            </div>
        </lightning-card>
    </div>
</template>

2. JavaScript Logic:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { getBarcodeScanner } from 'lightning/mobileCapabilities';

export default class BarCodeScannerCmp extends LightningElement {
    myScanner;
    scanButtonDisabled = false;
    scannedBarcode = '';
    connectedCallback() {
        this.myScanner = getBarcodeScanner();
        if (this.myScanner == null || !this.myScanner.isAvailable()) {
            this.scanButtonDisabled = true;
        }
    }

    handleBeginScanClick(event) {
        this.scannedBarcode = '';
        if (this.myScanner != null && this.myScanner.isAvailable()) {
            const scanningOptions = {
                barcodeTypes: [this.myScanner.barcodeTypes.QR]
            };
            this.myScanner.beginCapture(scanningOptions).then((result) => {
                    this.scannedBarcode = decodeURIComponent(result.value);
                    this.dispatchEvent(
                        new ShowToastEvent({
                            title: 'Successful Scan',
                            message: 'Barcode scanned successfully.',
                            variant: 'success'
                        })
                    );
                }).catch((error) => {
                    this.dispatchEvent(
                        new ShowToastEvent({
                            title: 'Barcode Scanner Error',
                            message:
                                'There was a problem scanning the barcode: ' +
                                JSON.stringify(error) +
                                ' Please try again.',
                            variant: 'error',
                            mode: 'sticky'
                        })
                    );
                }).finally(() => {
                    this.myScanner.endCapture();
                });
        }else{
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Barcode Scanner Is Not Available',
                    message:
                        'Try again from the Salesforce app on a mobile device.',
                    variant: 'error'
                })
            );
        }
    }
}

Code Reference:

https://github.com/flighttoSalesforce/barcodeScanner

 Limitations:

1. BarcodeScanner requires the use of the mobile device camera. You must grant access to your app to access your mobile camera.
2. The quality of camera affects Barcode recognition.
3. Not all type of barcode can be scanned using this API.

References:

1. Salesforce Lightning Component Library
2.  Developer Mozilla

Other Useful blogs:

1. https://www.sfprompt.com
2. https://manish-porwal.blogspot.com


Location: London, UK

Comments

Post a Comment

Followers

Popular posts from this blog

Salesforce LWC: Multi-Record Creation using Lightning Web Component

By -
Image
In this blog we will learn about one very common business use case. Most of the time we get requirement to create a table kind of view from which we can see most of the record's information and also we can manage creating updating and deleting record from same view.  So in this blog we will see how to create such kind of UI using Lightning Web Component. We will take one use case and will implement the same. Use Case:  There will be one input field for Account selection. Once user select any account then user can see all related Contacts. Also user should have capability to add multiple new contacts for selected Account and user can delete existing Contacts. Solutions: To implement above solution first we need one input field where user can select Account Name. For this we can utilize Lightning Data Service. Once User will select Account we can pass the Account Id to Apex Class for getting related Contacts and show it on UI using HTML table. Lets see some code for the UI: 1 2 3
Read more

Salesforce LWC: Basic Drag and Drop Functionality

By -
Image
Recently I attended Salesforce VirtualDearmin session and I found this session very interesting and I thought to share this with everyone of you. For more detail you can refer below link on Drag and Drop Functionality: https://forcementor.github.io/lwc_dnd_20/#/ In this blog we will see about Drag and Drop functionality in Salesforce using Lightning Web Component. To implement drag and drop functionality there are few standard HTML events which we will use to implement. Lets see first what we are going to achieve in this blog with a small video- Now we have clear understanding what we are going to achieve. Let us go to the code. First we will create very basic UI with 3 layout-item. One for each New Task, In Progress Task and Completed Task. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <template> <lightning -layout vertical-align= "stretch" multiple-rows= "true" class= "x-large" > <lightning -layout-item
Read more

Salesforce Lightning Web Component: Dynamic Column Selection in Lightning Datatable

By -
Image
Today in this post we will see how to create Lightning Data Table where we can dynamically select the columns of lightning data table. Below are the properties of this Lightning Data Table: User can select any column for Lightning Data Table User can select only those fields on which user has FLS. User can re-arrange the order of Columns in Data Table. So in UI we will show one Dual List box where user can select any field for table. Once user will select the fields and click on save then selected fields will be visible on UI: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <template> <lightning -card title= "Dynamic Lead Table" > <lightning -button label= "Modify Columns" slot= "actions" onclick= {showColumnSelectionWindow} > < /lightning-button> <p class= "slds-p-horizontal_small" > <lightning -
Read more