Ctrlk
YouTube ChannelBook A Demo🪄 Build with AISubscribe for Updates
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Document Scanner

The Avonni Document Scanner uses your device's camera to extract text from documents, allowing you to use it within Salesforce records and flows easily.

The Avonni Document Scanner component leverages your device's security features. It's available exclusively on the Salesforce Mobile App.

Overview

The Document Scanner lets users photograph a physical document — a form, contract, label, or ID — and automatically extracts its text using OCR. The extracted text is available as an output variable you can use to populate Salesforce fields or drive subsequent flow logic.

Tips for best results:

  • Ensure images have good lighting and clear, legible text.

  • Test on the Salesforce Mobile App; the component does not function in a desktop browser.

Configuration

To configure it, click the component on the Flow screen. The Edit Document Scanner Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

Properties

Open Onload — when enabled, the scanner launches automatically as soon as the screen loads. Ideal for flows where scanning is the primary action on the screen.

Image Source — determines where the image to scan comes from:

Option
When to Use

Input Image

An image has already been captured or uploaded earlier in the flow

Photo Library

Let the user pick an existing image from their device's photo library

Device Camera

Let the user take a new photo directly with the device camera

Base64 Image Data — only visible when Image Source is set to Input Image. Connect this to a flow variable containing the base64-encoded image bytes to scan.

Show Preview — when enabled, a preview of the scanned document is displayed after capture so the user can review the result before the flow continues.

Button

Customize the trigger button that opens the scanner:

Setting
What It Controls

Button Label

Text displayed on the button

Button Variant

Visual style — Brand, Neutral, Destructive, etc.

Button Icon Name

Lightning icon shown on the button

Button Icon Position

Whether the icon appears to the Left or Right of the label (only when Button Icon Name is set)

Button Stretch

When enabled, the button expands to fill the available width

Button Disabled

Grays out the button so it is visible but cannot be clicked

Button Type

HTML type attribute — Button, Reset, or Submit

Use Cases

Imagine you're a healthcare provider at a medical conference. With the Avonni Document Scanner, you can:

  1. Photograph a flyer detailing a new medical device directly within your Salesforce app.

  2. Extract the text from the flyer, including product name, features, and contact information.

  3. Instantly save this information to a new Salesforce note or a custom "Conference Materials" object for later review.

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 OCR completes and text is successfully extracted from the scanned document. Use this to save the extracted text to a Salesforce field, navigate to the next screen, or trigger any downstream flow logic.

Styling

The Style tab gives you fine-grained control over the Document Scanner's appearance. Configure it from the Style tab of the Edit Document Scanner panel.

Controls outer spacing around the component.

  • Top: Space above the component.

  • Right: Space to the right of the component.

  • Bottom: Space below the component.

  • Left: Space to the left of the component.

Controls inner spacing between the component's border and its content.

  • Top: Inner space at the top.

  • Right: Inner space on the right.

  • Bottom: Inner space at the bottom.

  • Left: Inner space on the left.

Customizes the border drawn around the component.

  • Color: Border color.

  • Size: Border thickness.

  • Style: Border style (solid, dashed, dotted, etc.).

  • Radius: Corner rounding of the border.

Adjusts display when the component is opened as a modal dialog inside a Flow screen.

  • Width: Dialog width.

  • Height: Dialog height.

  • Background Color: Dialog background color.

Customizes the border of the scanner trigger button.

  • Size: Button border thickness.

  • Style: Button border style.

  • Radius: Button border corner radius.

  • Color, Color Active, Color Hover: Border color in the default, active, and hover states (set per button).

Controls the typography of the button label.

  • Font Size: Label font size.

  • Font Style: Label font style (normal, italic, etc.).

  • Font Weight: Label font weight.

  • Font Family: Label font family.

  • Line Height: Label line height.

  • Color, Color Active, Color Hover: Label text color in the default, active, and hover states (set per button).

Sets the background fill of the scanner buttons.

  • Color, Color Active, Color Hover: Background color in the default, active, and hover states (set per button).

Applies shadow effects to the trigger button.

  • Shadow: Default shadow of the button.

  • Shadow Focus: Shadow applied when the button is focused.

Output Variables

The Document Scanner exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Document Scanner component, and pick the output variable you need.

Scanning Results

Populated when OCR completes successfully (requires the Successful Scan interaction to have fired).

Output variable
Type
What it returns

Value

Apex (DocumentScannerDocument)

The most recently scanned document, including the extracted text and any metadata returned by the OCR engine.

Value Collection

Collection of Apex (DocumentScannerDocument)

All scanned documents captured during the current screen session, in scan order.

Example: After scanning an intake form, store Value in a flow variable, then use its extracted text field to pre-populate a case description field on the next screen.

Flow Interaction Output Variables

Like all interactive Flow components, the Document Scanner exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.

Last updated

Was this helpful?