Barcode Scanner
The Avonni Barcode Scanner enables seamless barcode scanning in Salesforce mobile apps, eliminating manual data entry and improving accuracy
The Avonni Barcode Scanner enables barcode scanning in Salesforce mobile Screen Flows. Use it for inventory management, asset tracking, event check-ins, or any scenario where manual data entry should be replaced by a camera scan.
The Barcode Scanner component operates only on mobile devices using the Salesforce mobile app.
Overview
The component can appear as a Button (user taps to open the scanner) or as an Input field (inline scanning within a form). It supports single and bulk scanning, manual confirmation, and configurable barcode type filtering. Scanned values are exposed as output variables for use in subsequent flow elements.
Configuration
To configure it, click the component on the Flow screen. The Edit Barcode Scanner Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Properties
Button Label sets the text on the scan trigger button.
Type sets how the scanner is surfaced to the user:
Button (default)
A standalone button that opens the scanner
Dedicated scanning screens
Input
An inline input field with a scan icon
Embedding scanning within a form
Barcode Types filters which barcode formats the scanner accepts. If nothing is selected, all supported types are scanned. Available types are Code 128, Code 39, Code 93, Data Matrix, EAN-13 / GTIN-13, EAN-8 / GTIN-8, Interleaved 2 of 5, PDF-417, QR Code, UPC-A / GTIN-12, and UPC-E / GTIN-12.
When Type is set to Button, these additional properties are available:
Icon Name — the Lightning Design System name of the icon shown on the button (e.g.
utility:scan, the default).Icon Position — places the icon to the Left or Right of the label.
Variant — the visual style of the scan button: Base, Bare, Bare Inverse, Border, Border Filled, Border Inverse, Brand, Brand Outline, Container, Destructive, Destructive Text, Inverse, Neutral, or Success.
Stretch — when enabled, the button takes the entire available width.
Disabled — when enabled, users cannot interact with the scan trigger.
When Type is set to Input, these additional properties are available:
Button Icon Name — the Lightning Design System name of the icon shown in the input's scan button (default
utility:scan).Hide Barcodes List — when enabled, the list of scanned barcodes is hidden.
Placeholder — placeholder text shown when the input is empty.
Field level help — help text describing the purpose of the input field.
Variant — the input field layout: Standard, Label Hidden, Label Inline, or Label Stacked.
Required — when enabled, the input must be filled before the form can be submitted.
Disabled — when enabled, users cannot interact with the input.
Barcode Scanner
Open Onload — when enabled, the scanner interface opens automatically as soon as the screen loads (Button type only). Default: off (user taps the button to open).
Instruction Text — text displayed inside the scanning interface to guide users on how to position the barcode.
Success Text — message shown to users after a successful scan.
Enable Bulk Scan — when enabled, users can scan multiple barcodes consecutively without closing the scanner. The scanner stays open until the user cancels.
Enable Multi Scan — when enabled, multiple barcodes can be scanned simultaneously. Enabling this also turns on bulk scanning. Requires Enable Bulk Scan to be on.
Remove Duplicates — when enabled, if the same barcode is scanned more than once it is only added to the list once.
Show Success Check Mark — displays a checkmark icon after each successful scan for visual confirmation.
Scanner Size — controls the size of the camera view as a percentage of the device screen: Small, Medium, Large, or X-Large (default).
Camera Facing — selects whether the rear (Back, default) or front (Front) camera is used.
Present With Animation — when enabled, the scanner interface animates in and out when opened and dismissed.
Manual Confirmation — when enabled, the user must explicitly confirm a detected barcode before it is recorded. Reduces accidental scans.
Preview Barcode Data — when enabled, the scanner displays the raw barcode data on screen before it is confirmed.
Interactions
Interactions define what happens when users interact with the Barcode Scanner. Configure them from the Interactions tab of the Edit Barcode Scanner panel.
Change
Fires when the scanned value changes in input mode. Use this to update output variables or drive conditional logic based on the latest scan result.
Successful Scan
Fires after a barcode is successfully scanned and confirmed. Use this to navigate to the next screen, trigger a lookup, or execute any action that depends on a completed scan.
Styling
The Style tab gives you fine-grained control over the Barcode Scanner's appearance. Configure it from the Style tab of the Edit Barcode Scanner panel.
Controls outer spacing.
Top: Sets the top margin.
Right: Sets the right margin.
Bottom: Sets the bottom margin.
Left: Sets the left margin.
Controls inner spacing.
Top: Sets the top padding.
Right: Sets the right padding.
Bottom: Sets the bottom padding.
Left: Sets the left padding.
Customizes the border.
Color: Sets the border color.
Size: Sets the border width.
Style: Sets the border style (solid, dashed, etc.).
Radius: Sets the border corner radius.
Adjusts display when opened as a modal dialog inside a Flow screen.
Width: Sets the dialog width.
Height: Sets the dialog height.
Background Color: Sets the dialog background color.
Styles the input label when the component is in Input type mode.
Color: Sets the label text color.
Font Size: Sets the label font size.
Font Style: Sets the label font style (normal, italic).
Font Weight: Sets the label font weight.
Output Variables
The Barcode 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 Barcode Scanner component, and pick the output variable you need.
Scanning Results
Updated each time a barcode is successfully scanned and confirmed.
Value
Record (Apex-defined type)
The last scanned barcode, as a BarcodeScannerBarcode record with the raw barcode string and its detected format.
Value Collection
Collection of Records (SObject)
All barcodes scanned during the session. Populated when Enable Bulk Scan or Enable Multi Scan is on.
Value Collection Serialized
Text (String)
All scanned barcodes as a JSON string — useful when passing the full scan list to an Apex action or HTTP callout that expects a serialized payload.
Example: A warehouse worker scans multiple product barcodes in bulk mode. After the screen, use Value Collection in a Loop element to look up each product and update its inventory count.
Flow Interaction Output Variables
Like all interactive Flow components, the Barcode 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.
Key Considerations
Device Compatibility: The Avonni Barcode Scanner is optimized for mobile devices with camera functionality, ensuring compatibility with your field teams and mobile workforce.
Permissions: Verify that your Salesforce app has the camera permissions to enable smooth barcode scanning operations. Refer to Salesforce documentation for guidance on managing app permissions.
Last updated
Was this helpful?