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.

Barcode

The Avonni Barcode component lets you easily create and customize barcodes within your Salesforce

Overview

The Avonni Barcode renders a barcode image directly on a Flow screen from any value you provide. Use it to display product codes, shipping labels, ticket IDs, or any data that needs to be scannable by a reader.

Tutorials

Name
Description
Illustration

Generating and Displaying Barcodes for Product Codes

Learn to create and display product code barcodes in Salesforce efficiently and effectively.

Configuration

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

Properties

Value (Required) — the data to encode in the barcode. You can type a value directly, or switch to the mapped input and select a flow variable or record field.

Switch to Mapped input field to select a source collection as a value.

Type (Required) — the barcode format to render. The component supports more than 150 types. The most commonly used formats are listed below:

Main types of Barcode supported

  • UPC-A: Universal Product Code, widely used in retail in the USA. Encodes 12 numerical digits.

  • UPC-E: Compressed version of UPC-A for smaller packages. Encodes 6 numerical digits.

  • EAN-13: International Article Number, used globally for retail products. Encodes 13 numerical digits.

  • EAN-8: A shorter version of EAN-13 for small items. Encodes 8 numerical digits.

  • Code 128: Highly versatile — can encode all 128 ASCII characters. Variable length; often used for packaging and shipping.

  • Code 39: Can encode letters, numbers, and symbols. Variable length; less compact than Code 128.

  • QR Code: Two-dimensional barcode that encodes text, URLs, or other data. Variable length; can encode a significant amount of data.

  • Data Matrix: Two-dimensional code used in electronics and healthcare. Variable size; can encode text or raw data.

  • Interleaved 2 of 5: Numeric-only barcode used in warehousing and distribution. Must have an even number of digits.

  • Codabar: Older format used in libraries and blood banks. Variable length; can include numbers and a few special characters.

  • PDF417: Stacked, two-dimensional barcode used for documents and identification cards. Variable length; can encode large amounts of data.

  • GS1 DataBar: A family of barcodes used for fresh foods and coupons. Varies by specific GS1 DataBar type.

  • Aztec Code: Two-dimensional barcodes used mainly in transportation tickets. Variable length; can encode significant amounts of data.

  • ITF-14: Used to mark cartons, cases, or pallets with an EAN-13 or UPC number. Encodes 14 numerical digits.

Background Color — sets the color behind the barcode.

Color — sets the color of the barcode bars. Default: black (#000000).

Text Color — sets the color of the human-readable value shown with the barcode. Default: black (#000000).

Text Alignment — sets the position of the displayed value relative to the barcode. Options: Top Right, Top Left, Top Center, Top Justify, Center Right, Center Left, Center Center, Center Justify, Bottom Right, Bottom Left, Bottom Center (default), Bottom Justify.

Picking QR Code as the type renders a QR code, but the Barcode component does not expose error correction or character encoding. If you need either of those, use the dedicated QR Code component instead. It adds an Error Correction setting (L, M, Q, or H) and an Encoding setting.

Hide Value — when enabled, the human-readable text that normally appears below the barcode is hidden. The barcode image remains visible.

Height — sets the maximum height of the barcode. Any CSS length unit is accepted; unitless values are treated as pixels. By default, the height depends on the width.

Width — sets the maximum width of the barcode. Any CSS length unit is accepted; unitless values are treated as pixels. Default: 100%.

Checksum — when enabled, the checksum digit is shown in the displayed value below the barcode.

Alternative Text — accessible text description of the barcode for screen readers.

Styling

The Style tab gives you control over the barcode's spacing, border, and dimensions. Configure it from the Style tab of the barcode's property editor.

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 / Right / Bottom / Left: Adjust the inner spacing on each side.

Customizes the border surrounding 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.

Controls the barcode's dimensions.

  • Width / Height: Set fixed dimensions for the barcode.

  • Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.

  • Overflow: Control how content that exceeds the bounds is handled.

Last updated

Was this helpful?