Skip to main content

Barcode Scanner API In LWC

 


In this blog, you will learn how you can use the newly launched Barcode Scanner API for lightning web component in salesforce.


Salesforce released a new Barcode Scanner API which now supports Scanning barcodes from a Lightning web component for mobile devices.

salesforceScanner.html :-

<!-- barcodeScannerExample.html -->
<template>
    <div class="slds-text-align_center">
        <span class="slds-text-heading_large">
<lightning-icon icon-name="utility:scan" alternative-text="XML file" title="XML">
</lightning-icon>Salesforce Wallah</span>
    </div>
    <template if:true={scannedBarcode}>
        <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>
    </template>
    <div class="slds-align_absolute-center slds-m-vertical_large">
        <lightning-button
            variant="brand"
            class="slds-var-m-left_x-small"
            disabled={scanButtonDisabled}
            icon-name="utility:scan"
            label="Scan Barcode"
            title="Open a camera view and look for a barcode to scan"
            onclick={handleBeginScanClick}>
        </lightning-button>
    </div>
</template>


salesforceScanner.js :-

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { getBarcodeScanner } from 'lightning/mobileCapabilities';

export default class SalesforceScanner 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],
                instructionText: 'Scan a QR Code',
                successText: 'Scanning complete.'
            };
            this.myScanner
                .beginCapture(scanningOptions)
                .then((result) => {
                    this.scannedBarcode = result.value;
                    this.dispatchEvent(
                        new ShowToastEvent({
                            title: 'Successful Scan',
                            message: 'Barcode scanned successfully.',
                            variant: 'success'
                        })
                    );
                })
                .catch((error) => {
                    // Handle cancellation and unexpected errors here
                    console.error(error);

                    if (error.code == 'userDismissedScanner') {
                        // User clicked Cancel
                        this.dispatchEvent(
                            new ShowToastEvent({
                                title: 'Scanning Cancelled',
                                message:
                                    'You cancelled the scanning session.',
                                mode: 'sticky'
                            })
                        );
                    }
                    else {
                        // Inform the user we ran into something unexpected
                        this.dispatchEvent(
                            new ShowToastEvent({
                                title: 'Barcode Scanner Error',
                                message:
                                    'There was a problem scanning the barcode: ' +
                                    error.message,
                                variant: 'error',
                                mode: 'sticky'
                            })
                        );
                    }
                })
                .finally(() => {
                    this.myScanner.endCapture();
                });
        } else {
            alert(
                '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
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Barcode Scanner Is Not Available',
                    message:
                        'Try again from the Salesforce app on a mobile device.',
                    variant: 'error'
                })
            );
        }
    }
}


salesforceScanner.js-meta.xml :-

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Default</target>
        <target>lightningCommunity__Page</target>
      </targets>
</LightningComponentBundle>


Resources :-

Note :-

This Code only work on Mobile salesforce, on desktop it will not work.




Labels

Labels:

Comments

Post a Comment

Please Write your comment here.

Popular Posts

Top 100 Most common used Apex Method in Salesforce

  Here are 100 more Apex methods in Salesforce: 1.       insert: Inserts records into the database. 2.       update: Updates records in the database. 3.       delete: Deletes records from the database. 4.       upsert: Updates or inserts records into the database. 5.       query: Retrieves records from the database using SOQL. 6.       getContent: Retrieves the content of a document or attachment. 7.       getContentAsPDF: Generates a PDF file from a Visualforce page or HTML content. 8.       addError: Adds a custom error message to a record and prevents saving. 9.       start: Initiates processing in batch Apex. 10.    execute: Processes a batch of records in batch Apex. 11.    finish: Finalizes processing in batch Apex....
Post a Comment
Read more

How to create ICS/Calendar File | Helps you to download the calendar invites

  Want to know how to create ICS(Internet Calendar Scheduling) file for Business purpose....👀    ICS (Internet Calendar Scheduling) file is a calendar file saved in a universal calendar format used by several email and calendar programs, including Microsoft Outlook, Google Calendar, Notes and Apple Calendar. It enables users to publish and share calendar information on the web and over email. Lets see the code. The code is written in lwc(Lightning web component). HTML:   <template> <div class="login-container"> <h1 style="size: 14px;"><b>Create ICS File</b></h1> <div class="form-group"> <lightning-input type="datetime" name="input1" value={EventEndValue} onchange={startDate} label="Enter Start date/time value" ></lightning-input> </div> <div class="form-group"> <lightning-input type="...
Post a Comment
Read more

Sharing records by Apex in Salesforce

  Greetings, everyone! In today's session, we'll delve into the topic of sharing records within an Apex class. As we're aware, there exist various methods through which we can accomplish the sharing of records. We engage in record sharing primarily when the object's Organization Wide Default (OWD) settings are set to private. Sharing settings come into play when certain predefined criteria are met, allowing us to extend access to records to designated groups or roles. In cases where intricate logic is involved, manual sharing is employed. While this approach proves beneficial for specific records, instances where a multitude of records require automated handling, Apex sharing becomes the preferred solution. Salesforce offers a 'Share' object for each type of object, with distinct naming conventions: For standard objects, it's 'StandardobjectName+Share', such as 'AccountShare' for the 'Account' object. Custom objects follow the pattern...
Post a Comment
Read more

Login Salesforce Without Credentials(Without UserName and Password)

  Want to login into Salesforce without credentials. Please follow the below STEPS: STEPS:-  1)  Goto to setup  --> Open Developer Console. 2) Goto debug --> Open Execute Anonymous Window --> It will open the pop. 3) Please write the below code in Anonymous window.       String sessionId = UserInfo.getOrganizationId() + '' + UserInfo.getSessionId().SubString(15);      System.debug('$$$$ Session Id ' + sessionId); 4) Click on Execute and filter the debug. You can see one session Id with Organization Id. Now, we have to copy the debug session Id and create one login URL. Steps to create Login URL: 1) Copy the Salesforce URL. Please refer the screenshot shown below. 2) Now concatenate the session Id with the salesforce URL and your Session Id Will look like below. https://d5g000004zfq2eai-dev-ed.lightning.force.com/secur/frontdoor.jsp?sid=00D5g000004zfQ2EAI!AQgAQKzTcnQTifXpRnQ7DgECtk_rv.w9BT5FoPEAmoy_UrgG4HJ6B9YFpQ2LVlmnJhBrYPSf8cI...
Post a Comment
Read more

SF Fact #03 | Undelete Failed, Entity is not in recycle bin

  Similar to ENTITY_IS_DELETED error, if we attempt to undelete a record from recycle bin by mistake which has already been hard deleted, the following error is encountered: UNDELETE_FAILED. When a record is deleted, it moves to the Recycle Bin. This is known as "soft deletion," allowing the record to be easily restored through the user interface. However, under certain conditions, a deleted record will no longer appear in the Recycle Bin: Master-Detail Relationship (Child Deleted First): If a record is a child or detail in a master-detail relationship and it is deleted before its parent record, then after the parent is deleted, the child record transitions to a "hard deleted" status. In this state, the child record cannot be recovered through the Recycle Bin and must be recreated if needed. Master-Detail Relationship (Parent Deleted): If a record is a child or detail in a master-detail relationship and the parent record is deleted, the child record is also soft del...
Post a Comment
Read more