Adding Barcode Support to a Salesforce Mobile Application | by John Vester | Mar, 2022

After his spouse challenged his degree of snack consumption, John determined to create a Salesforce Cellular app to scan the snack’s barcode

Making a Lightning Internet Element (LWC)

<?xml model="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>53.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<goal>lightning__AppPage</goal>
<goal>lightning__RecordPage</goal>
<goal>lightning__HomePage</goal>
</targets>
</LightningComponentBundle>
import  getBarcodeScanner  from 'lightning/mobileCapabilities';
   connectedCallback()  !this.myScanner.isAvailable()) 
this.scanButtonDisabled = true;

handleBeginScanClick(occasion) 
// Reset scannedBarcode to empty string earlier than beginning new scan
this.scannedBarcode = '';
this.resultsFound = false;
this.snackFound = false;
// Make sure that BarcodeScanner is accessible earlier than making an attempt to make use of it
// Be aware: We _also_ disable the Scan button if there isn't any BarcodeScanner
if (this.myScanner?.isAvailable())
const scanningOptions =
barcodeTypes: [
this.myScanner.barcodeTypes.UPC_E
]
;
this.myScanner
.beginCapture(scanningOptions)
.then((consequence) =>
this.resultsFound = true;
this.scannedBarcode = consequence.worth;
this.scannedBarcodeType = consequence.sort;
findSnackByUpcEquals( upcId: this.scannedBarcode )
.then((snack) =>
this.snackFound = true;
this.snackName = snack.Title;
this.snackCalories = snack.Calories__c;
this.snackUPC = snack.UPC__c;
this.error = undefined;
this.buttonLabel = 'Scan One other Snack Barcode';
)
.catch((error) =>
throw error;
);
)
.catch((error) =>
// Deal with cancellation and sudden errors right here
console.error(error);
this.snackFound = false;
this.buttonLabel = 'Scan Barcode';
// Inform the person we bumped into one thing sudden
this.dispatchEvent(
new ShowToastEvent(
title: 'Barcode Scanner Error',
message:
'There was an issue scanning the barcode: ' +
JSON.stringify(error) +
' Please strive once more.',
variant: 'error',
mode: 'sticky'
)
);
)
.lastly(() =>
// Clear up by ending seize,
// whether or not we accomplished efficiently or had an error
this.myScanner.endCapture();
);
else
// BarcodeScanner is just not accessible
// Not operating on {hardware} with a digicam, or another context difficulty
// Let person know they should use a cell phone with a digicam
this.dispatchEvent(
new ShowToastEvent(
title: 'Barcode Scanner Is Not Out there',
message:
'Strive once more from the Salesforce app on a cellular machine.',
variant: 'error'
)
);

<template>
<div if:false=resultsFound class="slds-align_absolute-center slds-text-align_center
slds-text-color_weak">
Click on the Scan Barcode button to open a barcode scanner digicam view. Place a barcode within the scanner view to scan it.
</div>
<div if:true=resultsFound class="slds-var-m-vertical_large slds-var-p-vertical_medium
slds-text-align_center slds-border_top slds-border_bottom">
<p>Discovered Barcode = scannedBarcode (sort = scannedBarcodeType)</p>
</div>
<div if:true=snackFound class="slds-var-m-vertical_large slds-var-p-vertical_medium
slds-text-align_center slds-border_top slds-border_bottom">
<div class="slds-m-around_medium">
<p><span class="slds-text-title_bold">Title</span>: snackName</p>
<p><span class="slds-text-title_bold">Energy</span>: snackCalories</p>
<p><span class="slds-text-title_bold">UPC Worth</span>: snackUPC</p>
</div>
</div>
<div class="slds-text-align_center slds-p-top_xx-small">
<lightning-button variant="model" class="slds-var-m-left_x-small" disabled=scanButtonDisabled
icon-name="utility:instances" label=buttonLabel title="Scan a Snack"
onclick=handleBeginScanClick>
</lightning-button>
</div>
</template>

Accessing Calorie Information Utilizing an Apex Controller

public with sharing class SnackController 
@AuraEnabled(cacheable=true)
public static Snack__c findSnackByUpcEquals(String upcId)
return [
SELECT Name, Calories__c, UPC__c
FROM Snack__c
WHERE UPC__c = :upcId
LIMIT 1
];

More Posts