# Document Scanner

## Overview

The Avonni Document Scanner component enables users to scan documents using a device's camera within Salesforce Dynamic Components or Flows. It's designed  expense tracking, record updates, or document management.

### Use Cases

* Capture expense receipts for reimbursement forms.
* Scan IDs or contracts for customer onboarding.
* Digitize paper forms for case or record attachments.
* Record delivery documents in logistics workflows.
* Archive physical documents in Salesforce Files.

***

## Configuration

Select the Document 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.                                  | `DocScanner` |
| Open Onload  | Boolean | If On, scanner opens automatically when component loads.             | Off.         |
| Image Source | Select  | Source for document: `camera` (live scan) or `upload` (device file). | `camera`.    |
| Show Preview | Boolean | Displays a preview of the scanned document for user verification.    | On.          |

Best Practice: Enable Show Preview to ensure users confirm document quality before processing; use camera for real-time scanning in mobile apps.

### **Button Settings**

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

*Tip:* Use a descriptive Label and an icon like utility:camera for clarity; test Stretch on mobile layouts. (Placeholder for screenshot: Scanner button UI.)

### **Interactions Tab**

Define actions on successful scans.

| Property           | Type     | Description                                                                                                              |
| ------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------ |
| On Successful Scan | Settings | Trigger on scan completion: Access data via $Component.DocScanner.Value (e.g., Save to Files, Update Record, Open Flow). |

***

## Examples

### **Example 1: Single Document Scan for Expense Tracking**

This example scans a receipt and saves it to a Salesforce File.

1. **Configure Scanner:**
   * API Name: ReceiptScanner
   * Open Onload: Off
   * Image Source: camera
   * Show Preview: On
2. **Button Settings:**
   * Label: "Scan Receipt"
   * Variant: brand
   * Icon Name: utility:camera
3. **Add Interaction:**
   * On Successful Scan: Create a File record, using $Component.ReceiptScanner.Value (scanned image data) to populate the ContentVersion.

**Result:** Clicking the button opens the camera; after scanning, users preview the receipt and save it to Salesforce on confirmation.

***

### **Example 2: Uploaded Document for Case Attachment**

This example  a document image for a case.

1. **Configure Scanner:**
   * API Name: CaseDocScanner
   * Open Onload: Off
   * Image Source: upload
   * Show Preview: On
2. **Button Settings:**
   * Label: "Upload Document"
   * Variant: neutral
   * Icon Name: utility:upload
3. **Add Interaction:**
   * On Successful Scan: Update a Case record, attaching $Component.CaseDocScanner.Value as a File.

**Result:** Users upload a document, preview it, and attach it to a Case record via the interaction.

***

## Key Considerations

* **Data Output:** Scanned data is available as $Component.API\_Name.Value (image data); use for File uploads or processing in Flows.
* **Image Source Choice:** Use camera for live scanning; upload for pre-existing images.
* **Preview Usage:** Enable Show Preview to reduce errors by letting users verify scans.
* **Mobile Optimization:** Test camera access and Scanner Size (via Style Panel if supported) on devices.
* **Interactions:** Map scanned data to File or ContentVersion objects; test flow integrations.
* **Accessibility:** Ensure button labels are clear; preview text should assist screen readers.

***

## **Troubleshooting Common Issues**

* **Scanner Not Opening:** Check Open Onload or Disabled button; verify device camera/file permissions.
* **No Preview Shown:** Toggle Show Preview on; ensure scan/upload completed successfully.
* **Data Not Captured:** Confirm $Component.API\_Name.Value binding in interactions; test with static data.
* **Camera Issues:** Check Camera Facing (if supported) or permissions; try upload as fallback.
* **Button Unresponsive:** Ensure not Disabled; verify Variant/Type settings.
* **Image Quality:** Adjust lighting for camera; check upload file format compatibility.

***

## Summary

The Avonni Document Scanner component simplifies document capture in Salesforce, with flexible camera/upload options and seamless integration for record updates. It's ideal for expense tracking, case attachments, and more.