Barcode
The Avonni Barcode component generates and displays scannable barcodes from a value you provide, supporting a wide range of barcode symbologies with customizable colors, size, and text display. Use it whenever you need to encode product codes, serial numbers, tracking IDs, URLs, or other data into a scannable image inside your Dynamic Components.
Overview
The Barcode component turns any value into a scannable image, helping you automate data capture and reduce manual entry errors across your Salesforce applications.
Why Use the Barcode Component?
Automate Data Capture: Enable quick and accurate data capture using barcode scanners.
Improve Efficiency: Streamline workflows that involve product tracking, inventory management, or data entry.
Reduce Errors: Minimize manual data entry errors by using barcodes.
Enhance User Experience: Provide a convenient way to access information or act by scanning barcodes.
Example Use Cases
Product Management: Generate barcodes for products to track inventory and sales.
Event Ticketing: Create barcodes for event tickets to manage attendance and check-in.
Asset Tracking: Assign barcodes to assets to monitor their location and usage.
Document Management: Use barcodes to access and retrieve documents quickly.
Configuration
To configure the Barcode, select it on the canvas. The Edit Barcode panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.
Properties
Value
Enter the data you want to encode in the barcode. This is the information that will be scanned or read by a barcode reader — for example a product code, serial number, tracking ID, URL, or any other relevant data.
You can type the value directly, or use a formula or variable to pull it from a Salesforce field. This setting is required.
Type
Select the barcode symbology to render, based on your data and industry standards. This setting is required.
The component supports a large catalog of one- and two-dimensional barcode types. Common choices include:
UPC-A / UPC-E (Universal Product Code): Retail product identification, primarily in North America.
EAN-13 / EAN-8 (International Article Number): Retail product identification used globally.
Code 128: A versatile barcode that can encode letters, numbers, symbols, and control characters.
Code 39: An older barcode type that encodes uppercase letters, numbers, and a few special characters.
QR Code: A two-dimensional barcode capable of storing large amounts of data such as URLs, contact information, or plain text.
Beyond these, the Type dropdown also offers many specialized symbologies — Aztec Code, Data Matrix, PDF417, GS1 variants, DataBar family, postal codes (Japan Post, Royal Mail, KIX, PostNet), Pharmacode, MaxiCode, and more. When choosing, consider the kind of data you're encoding, your industry, and the capabilities of the scanners that will read it.
Background
Sets the background color shown behind the barcode (typically white).
Color
Sets the color of the barcode bars or squares. Defaults to black (#000000).
Text Color
Sets the color of the human-readable value displayed alongside the barcode. Defaults to black (#000000).
Text Alignment
Sets the position of the displayed value relative to the barcode. The position combines a vertical placement (Top, Center, Bottom) with a horizontal one (Left, Right, Center, Justify) — for example Bottom Center or Top Left. Defaults to a right alignment.
Hide Value
When enabled, the human-readable value is hidden so the barcode displays on its own.
Height
Sets the maximum height of the barcode. Accepts length values in any CSS unit; unitless numbers are treated as pixels. By default the height depends on the width.
Width
Sets the maximum width of the barcode. Accepts length values in any CSS unit; unitless numbers are treated as pixels. Defaults to 100%.
Checksum
When enabled, the barcode's checksum value is shown.
Alternative Text
Available under Advanced options, this provides assistive-text describing the barcode for screen readers and other accessibility tools.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Styling
The Style tab of the Edit Barcode panel gives you fine-grained control over the barcode's spacing, dimensions, and frame.
Controls the outer spacing around the barcode, creating space between it and other elements on the screen.
Top / Right / Bottom / Left: Adjust the space on each side of the barcode.
Controls the inner spacing between the barcode and its border.
Top / Bottom / Left / Right: Adjust the inner spacing on each side.
Controls the barcode's dimensions.
Width / Height: Set fixed dimensions.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Customizes the border around the barcode.
Color: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Last updated
Was this helpful?