# 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.

{% hint style="warning" %}
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.
{% endhint %}

### 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.

*<mark style="background-color:green;">**Tip**</mark>:* 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.             |

*<mark style="background-color:green;">**Tip**</mark>:* Use a bold Variant like 'brand' and an icon like 'utility:scan' for a clear UX.

<figure><img src="/files/nMjOAPU3H0UgUWYzFKNB" alt=""><figcaption></figcaption></figure>

### **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.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/barcode-scanner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.