> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/barcode-scanner.md). # Barcode Scanner 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.
{% hint style="warning" %} The Barcode Scanner component operates only on mobile devices using the **Salesforce mobile app**. {% endhint %} *** ## 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 **Type** sets how the scanner is surfaced to the user: | Type | What It Looks Like | Best For | | ---------------------- | ------------------------------------------ | -------------------------------- | | **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 | **Button Label** sets the text on the scan trigger button. **Barcode Types** filters which barcode formats the scanner accepts. If nothing is selected, all supported types are scanned. Available types include Code 128, Code 39, Code 93, Data Matrix, EAN-13/GTIN-13, EAN-8/GTIN-8, Interleaved 2 of 5, PDF417, QR, UPC-A, and UPC-E. ### 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](/flow/component-builder/interactions-panel.md) 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. {% tabs %} {% tab title="Margin" %} Controls outer spacing. * **Top:** Sets the top margin. * **Right:** Sets the right margin. * **Bottom:** Sets the bottom margin. * **Left:** Sets the left margin. {% endtab %} {% tab title="Padding" %} Controls inner spacing. * **Top:** Sets the top padding. * **Right:** Sets the right padding. * **Bottom:** Sets the bottom padding. * **Left:** Sets the left padding. {% endtab %} {% tab title="Border" %} 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. {% endtab %} {% tab title="Flow Dialog" %} 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. {% endtab %} {% tab title="Button Border" %} Customizes the scan button's border. * **Size:** Sets the button border width. * **Style:** Sets the button border style. * **Radius:** Sets the button border corner radius. {% endtab %} {% tab title="Button Text" %} Styles the text label on the scan button. * **Font Size:** Sets the button label font size. * **Font Style:** Sets the button label font style (normal, italic). * **Font Weight:** Sets the button label font weight. * **Font Family:** Sets the button label font family. * **Line Height:** Sets the button label line height. {% endtab %} {% tab title="Button Shadow" %} Controls the shadow on the scan button. * **Shadow:** Sets the default box shadow on the button. * **Shadow Focus:** Sets the box shadow when the button is focused. {% endtab %} {% tab title="Label Text" %} 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. {% endtab %} {% endtabs %} ## 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. | Output variable | Type | What it returns | | ------------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | **Value** | Record (SObject) | 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](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md). ## 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. *** --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/flow/flow-components/barcode-scanner.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.