Document Scanner
The Avonni Document Scanner component enables users to scan or upload documents using a device's camera or photo library within Salesforce Dynamic Components. Use it for expense tracking, record updates, or document management workflows.
Overview
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
To configure the Document Scanner, select it on the canvas. The Edit Document Scanner panel opens on the right with two tabs: Properties and Interactions. The sections below mirror the Properties tab.
Properties
Open Onload
If enabled, the scanner opens automatically when the component loads on screen, without requiring the user to click a button.
Image Source
Specifies how the document is acquired. Options:
Input Image — scans from base64 image data supplied via the Base64 Image Data setting.
Photo Library — opens the device's photo library so the user can pick an existing image.
Device Camera — activates the device camera for a live capture.
Base64 Image Data
Provides the base64-encoded image bytes to scan. Requires: Image Source = Input Image.
Show Preview
If enabled, a preview of the scanned document is shown to the user before the result is committed.
Button
These settings control the button that opens the scanner when Open Onload is off.
Label
The text displayed on the button. Defaults to Scan.
Variant
Changes the visual appearance of the button. Options: Bare, Bare Inverse, Base, Border, Border Filled, Border Inverse, Brand, Brand Outline, Container, Destructive, Destructive Text, Inverse, Neutral (default), Success.
Icon Name
The Lightning Design System icon displayed on the button (for example, utility:camera).
Icon Position
The side of the button label where the icon appears — Left (default) or Right. Requires: Icon Name to be set.
Type
The HTML button type. Options: Button (default), Reset, Submit.
Stretch
If enabled, the button expands to fill the full available width.
Disabled
If enabled, the button is disabled and users cannot interact with it.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Interactions
Interactions define what happens when users interact with the Document Scanner. Configure them from the Interactions tab of the Edit Document Scanner panel.
Successful Scan
Fires when a scan completes successfully. Use this to save the scanned result to Salesforce Files, update a record, or trigger downstream flow logic. The scanned data is available through the value and valueCollection output attributes.
Output Variables
The Document Scanner exposes these output variables you can reference elsewhere on the page after the user interacts with it.
Scan Result
When a scan completes successfully, these variables are populated with the captured document data.
Value
Text (String)
The scanned document as a base64-encoded string.
Value Collection
Text Collection
The scanned documents as a collection of base64-encoded strings, one per scanned page.
Example: After a successful scan, use Value to store the base64 image in a record field, or pass Value Collection to a downstream component that processes multi-page documents.
Styling
Configure the Document Scanner's appearance from the Style tab of the Edit Document Scanner panel. The button color sections adapt to the trigger button's Variant.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Customizes the border surrounding the component.
Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.
Styles the scanner trigger button (color set per variant).
Background: Color / Color Active / Color Hover.
Border: Size / Style / Radius; Color / Color Active / Color Hover.
Text: Font Size / Font Style / Font Weight / Font Family / Line Height; Color / Color Active / Color Hover.
Shadow: Shadow / Shadow Focus.
Last updated
Was this helpful?