Barcode Scanner

Overview

The Avonni Barcode Scanner component enables users to scan barcodes using a device's camera within Avonni Dynamic Components. It's ideal for inventory tracking, asset management, or quick data capture, offering flexible scanning modes and visual feedback.

The Barcode Scanner component is functional only when used within the Salesforce mobile app. While you can configure it in the Dynamic Components Builder App, use it exclusively in the mobile app.

Key features include:

• Automatic or Manual Start: Open scanner on load or via button.

• Barcode Type Support: Scan specific or all supported barcode formats.

• Customizable UI: Set instructions, success messages, size, and animations.

• Multi-Scan Options: Support for bulk or simultaneous .

• Interactions: Trigger actions on successful scans (e.g., update records).

• Camera Control: Choose front/rear camera and preview data.

Tip: Use in Flows for mobile-friendly scanning; pair with interactions to process scanned data instantly.

Use Cases

• Inventory management (e.g., scan product barcodes to update stock).

• Asset tracking (e.g., log equipment IDs in Salesforce).

• Event check-ins (e.g., scan attendee tickets).

• Point-of-sale systems (e.g., capture multiple items in bulk).

• Field service (e.g., scan serial numbers to log maintenance).

---

Configuration

Select the Barcode Scanner on the canvas to access properties in the right-hand Properties Panel.

Basic Properties

These control scanner behavior and data handling.

Property	Type	Description	Example
API Name	Text	Unique identifier for the instance.	BarcodeScanner
Open Onload	Boolean	If On, scanner opens automatically when component loads.	Off.
Barcode Types	Select/List	Types to scan (e.g., QR, UPC); defaults to all supported formats.	QR, Code128.
Instruction Text	Text	Guidance shown in scanner UI.	"Point camera at barcode."
Success Text	Text	Message shown after successful scan.	"Scan successful!"
Enable Bulk Scan	Boolean	Allows multiple scans until user cancels or exits.	On.
Enable Multi Scan	Boolean	Scans multiple barcodes simultaneously (enables bulk scan automatically).	Off.
Show Success Check Mark	Boolean	Displays a check mark on successful scan.	On.
Scanner Size	Select	Camera view size as a percentage of device screen.	Medium (50%).
Camera Facing	Select	Camera: front or rear.	rear.
Present with Animation	Boolean	Animates scanner in/out when opened/closed.	On.
Manual Confirmation	Boolean	Requires user to confirm each scan.	Off.
Preview Barcode Data	Boolean	Shows barcode data during scanning.	On.

Best Practice: Use Instruction Text to guide users clearly; enable Bulk Scan for high-volume tasks.

Button Settings

Customize the button that triggers the scanner (if not Open Onload).

Property	Type	Description	Options/Examples
Label	Text	Button text.	"Start Scan"
Variant	Select	Style: e.g., brand, neutral, destructive.	brand.
Icon Name	Text (Optional)	Icon (SLDS/Avonni).	utility:scan
Type	Select	Button type (e.g., standard, icon).	standard.
Stretch	Boolean	Stretches button to container width.	Off.
Disabled	Boolean	Disables button.	Off.

Tip: Use a bold Variant like 'brand' and an icon like 'utility:scan' for a clear UX.

Interactions Tab

Define actions on successful scans.

Property	Type	Description
On Successful Scan	Settings	Trigger on scan: Access data via $Component.BarcodeScanner.Value (e.g., Update Record, Open Flow).

Examples

Example 1: Single Barcode Inventory Scan

This example scans a single product barcode to update inventory.

1. Configure Scanner:

   • API Name: InventoryScanner

   • Open Onload: Off

   • Barcode Types: UPC

   • Instruction Text: "Scan product barcode"

   • Success Text: "Product added!"

   • Show Success Check Mark: On

   • Scanner Size: Medium

   • Camera Facing: back

2. Button Settings:

   • Label: "Scan Item"

   • Variant: brand

   • Icon Name: utility:scan

3. Add Interaction:

   • On Successful Scan: Update Record (e.g., set Product Inventory__c field using $Component.InventoryScanner.Value).

Result: Clicking the button opens the scanner; a successful scan updates the record and shows a check mark.

---

Example 2: Bulk Asset Scanning

This example scans multiple asset barcodes with a side panel for results.

1. Configure Scanner:

   • API Name: AssetScanner

   • Enable Bulk Scan: On

   • Enable Multi Scan: On

   • Instruction Text: "Scan multiple assets"

   • Scanner Size: Large

   • Preview Barcode Data: On

2. Button Settings:

   • Label: "Start Bulk Scan"

   • Variant: neutral

3. Add Interaction:

   • On Successful Scan: Add results.

Result: Users scan multiple barcodes, a list.

---

Key Considerations

• Data Handling: Scanned data is available as $Component.API_Name.Value; use for updates or flows.

• Barcode Types: Limit types to reduce errors (e.g., only QR for tickets).

• Bulk vs. Multi-Scan: Bulk allows sequential scans; Multi-Scan captures multiple in one frame.

• Mobile Optimization: Test Scanner Size/Camera Facing on devices; rear cameras are higher quality.

• Interactions: Bind scan data to Variables or Flows for processing (e.g., inventory updates).

• Accessibility: Ensure Instruction/Success Text are clear; animations aid visual feedback.

---

Troubleshooting Common Issues

• Scanner Not Opening: Check Open Onload or Button Disabled; ensure device camera access.

• No Scan Detected: Verify Barcode Types match scanned codes; test lighting conditions.

• Data Not Captured: Confirm interaction binds $Component.API_Name.Value correctly.

• UI Issues: Adjust Scanner Size for screen fit; toggle animations off if laggy.

• Multi-Scan Fails: Ensure device supports simultaneous detection; fallback to Bulk Scan.

• Button Not Showing: Check Variant/Type; ensure not Disabled.

---

Summary

The Avonni Barcode Scanner component streamlines barcode capture with flexible modes and integrations for Salesforce workflows. It's perfect for inventory, assets, or events.