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


---

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