feat: extend Quick Lookup aura component with barcode reader support. ✨

flow_screen_components/quickLookup/force-app/main/default/aura/QuickLightningLookup/QuickLightningLookup.cmp

@@ -113,6 +113,10 @@ IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 	</aura:method>
 	<aura:method name="doInit" />
 
+	<aura:method name="invokeLookup" action="{!c.handleInvokeLookup}" description="Invoke lookup with parameter">
+		<aura:attribute name="searchString" type="String" />
+	</aura:method>
+
 	<!-- Parent: {!v.parentId} ID: {!v.cmpId} -->
 	<div aura:id="dropDown" class="slds-scope slds-form-element slds-lookup" data-select="single">
 		<div class="{!v.class + ' ' + v.errorClass}">

flow_screen_components/quickLookup/force-app/main/default/aura/QuickLightningLookup/QuickLightningLookupController.js

@@ -33,7 +33,13 @@ IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
                 helper.hideDropDown(component);
             }
         }, false));
-
+    },
+    handleInvokeLookup : function(component, event, helper) {
+        const { searchString } = event.getParam("arguments");
+        if(searchString) {
+            document.getElementById(component.getGlobalId() + "_myinput").value = searchString;
+            helper.hlpPerformLookup(component);
+        }
     },
     performLookup : function(component, event, helper) {
         helper.hlpPerformLookup(component);

flow_screen_components/quickLookup/force-app/main/default/aura/quickLookup/quickLookup.cmp

@@ -23,6 +23,8 @@
 	<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
 	<aura:attribute name="validate" type="Aura.Action" />
 
+	<aura:attribute name="showScanner" type="Boolean" default="false" />
+
 	<!-- 99% of the awesomesauce in this component comes from this LightningLookup component, created by
 		John Pipkin and Opfocus https://opfocus.com/lightning-lookup-input-field-2/ -->
 
@@ -34,14 +36,22 @@
 					{!v.label}</label>
 			</lightning:layoutItem>
 
-			<lightning:layoutItem size="12">
-				<c:QuickLightningLookup sObjectName="{!v.objectName}" displayedFieldName="{!v.displayFieldName}" searchFieldName="{!v.searchFieldName}"
+			<lightning:layoutItem size="{!AND(v.showScanner,OR($Browser.isPhone,$Browser.isTablet)) ? 11 : 12}">
+				<c:QuickLightningLookup aura:id="QuickLightningLookup" sObjectName="{!v.objectName}" displayedFieldName="{!v.displayFieldName}" searchFieldName="{!v.searchFieldName}"
 					whereClause="{!v.whereClause}" valueFieldName="{!v.valueFieldName}" label="{!v.label}"
 					selectedValue="{!v.selectedValue}" selectedName="{!v.displayedValue}" filteredFieldName="{!v.filterFieldName}"
 					filterFieldValue="{!v.filterFieldValue}" parentChild="{!v.parentChild}" required="{!v.required}"
 					defaultValue="{!v.defaultValue}" parentId="{!v.parentId}" cmpId="{!v.cmpid}" performLookupOnFocus="true"
 					svg="{!v.svg}" />
 			</lightning:layoutItem>
+
+			<aura:renderIf isTrue="{!AND(v.showScanner,OR($Browser.isPhone,$Browser.isTablet))}">
+				<lightning:layoutItem size="1">
+				<c:fsc_barcodeScanner aura:id="barcodeScannerLWC" onscansuccess="{!c.handleScanSuccess}"
+						onscanerror="{!c.handleScanError}" />
+				</lightning:layoutItem>
+			</aura:renderIf>
+
 		</lightning:layout>
 	</div>
 </aura:component>

flow_screen_components/quickLookup/force-app/main/default/aura/quickLookup/quickLookup.design

@@ -17,5 +17,6 @@
     <design:attribute name="parentId" label="Parent ID" />
     <design:attribute name="whereClause" label="Where Clause" />
     <design:attribute name="svg" label="Icon" />
+    <design:attribute name="showScanner" label="I10_Show Scanner in Supported Devices?" />
 
 </design:component>

flow_screen_components/quickLookup/force-app/main/default/aura/quickLookup/quickLookupController.js

@@ -1,5 +1,22 @@
 ({
     doInit: function (component, event, helper) {
         helper.hlpCheckValidity(component, event);
+    },
+    handleScanSuccess: function (component, event, helper) {        
+        const componentA = component.find('QuickLightningLookup');
+        const scannedBarcode = event.getParam('value');
+        componentA.invokeLookup(scannedBarcode);
+      },
+      handleScanError: function (component, event, helper) {
+        const errorMessage = event.getParam('detail');
+        var toast = $A.get('e.force:showToast');
+        if (toast) {
+          //fire the toast event in Salesforce app and Lightning Experience
+          toast.setParams({
+            title: 'Error!',
+            message: errorMessage
+          });
+          toast.fire();
+        }
     }
 });

flow_screen_components/quickLookup/force-app/main/default/lwc/fsc_barcodeScanner/fsc_barcodeScanner.html

@@ -0,0 +1,7 @@
+<template>
+  <template if:false={scannerDisabled}>
+    <lightning-button-icon icon-name="utility:cases" variant="brand" class="slds-m-left_xx-small" size="medium"
+      disabled={scannerDisabled} title="Open a camera view and look for a barcode to scan"
+      onclick={handleBeginScanClick}></lightning-button-icon>
+  </template>
+</template>

flow_screen_components/quickLookup/force-app/main/default/lwc/fsc_barcodeScanner/fsc_barcodeScanner.js

@@ -0,0 +1,85 @@
+import { LightningElement, api, track } from 'lwc';
+import { ShowToastEvent } from 'lightning/platformShowToastEvent';
+import { getBarcodeScanner } from 'lightning/mobileCapabilities';
+import { FlowAttributeChangeEvent } from 'lightning/flowSupport';
+
+export default class fsc_barcodeScanner extends LightningElement {
+  barcodeScanner;
+  scannerDisabled = false;
+  @track barcodeScannedValue;
+  @api
+  get barcodeScanned() {
+    return this.barcodeScannedValue;
+  }
+  set barcodeScanned(value) {
+    this.barcodeScannedValue = value;
+  }
+
+  connectedCallback() {
+    this.barcodeScanner = getBarcodeScanner();
+    if (this.barcodeScanner == null || !this.barcodeScanner.isAvailable()) {
+      this.scannerDisabled = true;
+    }
+  }
+
+  handleBeginScanClick() {
+    const scanningOptions = {
+      scannerSize: 'XLARGE',
+      cameraFacing: 'BACK',
+      showSuccessCheckMark: true,
+      vibrateOnSuccess: true,
+      manualConfirmation: true,
+      previewBarcodeData: true,
+      enableBulkScan: false,
+      enableMultiScan: false
+    };
+
+    this.barcodeScannedValue = '';
+    if (this.barcodeScanner != null && this.barcodeScanner.isAvailable()) {
+      this.barcodeScanner
+        .scan(scanningOptions)
+        .then((result) => {
+          this.handleScannedBarcodes(result);
+        })
+        .catch((error) => {
+          this.handleError(error);
+        })
+        .finally(() => {
+          this.barcodeScanner.dismiss();
+        });
+    } else {
+      this.showToast('Barcode Scanner Is Not Available', 'Try again from the Salesforce app on a mobile device.', 'error', 'sticky');
+    }
+  }
+
+  handleScannedBarcodes(barcode) {
+    console.log(JSON.stringify(barcode));
+    if (barcode && barcode.length > 0) {
+      const value = barcode[0]?.value; //decodeURIComponent
+      this.barcodeScannedValue = value;
+      this.dispatchEvent(new CustomEvent('scansuccess', { detail: { value } }));
+
+      this.dispatchEvent(new CustomEvent('notifychange', { detail: { value: value } }));
+
+      const attributeChangeEvent = new FlowAttributeChangeEvent('barcodeScanned', value);
+      this.dispatchEvent(attributeChangeEvent);
+    }
+  }
+
+  showToast(title, message, variant, mode) {
+    this.dispatchEvent(
+      new ShowToastEvent({
+        title: title,
+        message: message,
+        variant: variant,
+        mode: mode
+      })
+    );
+  }
+
+  handleError(error) {
+    this.dispatchEvent(new CustomEvent('scanerror', { detail: error }));
+
+    this.showToast('Barcode Scanner Error', JSON.stringify(error), 'error', 'sticky');
+  }
+}

flow_screen_components/quickLookup/force-app/main/default/lwc/fsc_barcodeScanner/fsc_barcodeScanner.js-meta.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>62.0</apiVersion>
+    <isExposed>true</isExposed>
+    <masterLabel>BarCode Scanner Action</masterLabel>
+    <targets>
+        <target>lightning__FlowScreen</target>
+    </targets>
+    <targetConfigs>
+        <targetConfig targets="lightning__FlowScreen">
+            <property name="barcodeScanned" type="String" role="outputOnly" description="The last value scanned"/>            
+        </targetConfig>
+    </targetConfigs>
+</LightningComponentBundle>