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.
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.
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.
Configure Scanner:
API Name: ReceiptScanner
Open Onload: Off
Image Source: camera
Show Preview: On
Button Settings:
Label: "Scan Receipt"
Variant: brand
Icon Name: utility:camera
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.
Configure Scanner:
API Name: CaseDocScanner
Open Onload: Off
Image Source: upload
Show Preview: On
Button Settings:
Label: "Upload Document"
Variant: neutral
Icon Name: utility:upload
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.
Last updated
Was this helpful?