Barcode

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

The Barcode is also available as an Experience Cloud Component.

---

Tutorials

Name	Description	Illustration
Generating and Displaying Barcodes for Product Codes	Learn to create and display product code barcodes in Salesforce efficiently and effectively.

---

Changing the properties

Customizing the barcode value

The value for the barcode can be set in two ways. Firstly, you can manually enter the desired value for the barcode. Alternatively, the value can be sourced from one of your existing collections. To use a value from a collection, switch to the 'Mapped' input option and select the appropriate collection as your source.

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

Choosing the barcode type

The Barcode component renders more than 150 different types of barcodes. Select the one you need.

Main types of Barcode supported

• UPC-A:

  • Description: Universal Product Code, widely used in retail in the USA.

  • Requirements: Encodes 12 numerical digits.

• UPC-E:

  • Description: Compressed version of UPC-A for smaller packages.

  • Requirements: Encodes 6 numerical digits.

• EAN-13:

  • Description: International Article Number, used globally for retail products.

  • Requirements: Encodes 13 numerical digits.

• EAN-8:

  • Description: A shorter version of EAN-13 for small items.

  • Requirements: Encodes 8 numerical digits.

• Code 128:

  • Description: Highly versatile and can encode all 128 ASCII characters.

  • Requirements: Variable length, often used for packaging and shipping.

• Code 39:

  • Description: Older type, can encode letters, numbers, and symbols.

  • Requirements: Variable length, less compact than Code 128.

• QR Code:

  • Description: Two-dimensional barcodes that encode text, URLs, or other data.

  • Requirements: Variable length, can encode a significant amount of data.

• Data Matrix:

  • Description: Two-dimensional code, often used in electronics and healthcare.

  • Requirements: Variable size, can encode text or raw data.

• Interleaved 2 of 5:

  • Description: A numeric-only barcode is typically used in warehousing and distribution.

  • Requirements: Must have an even number of digits.

• Codabar:

  • Description: Older format often used in libraries and blood banks.

  • Requirements: Variable length, can include numbers and a few special characters.

• PDF417:

  • Description: A stacked, two-dimensional barcode used for documents and identification cards.

  • Requirements: Variable length, can encode large amounts of data.

• GS1 DataBar:

  • Description: A family of barcodes used for fresh foods and coupons.

  • Requirements: Varies based on the specific GS1 DataBar type.

• Aztec Code:

  • Description: Two-dimensional barcodes are used mainly in transportation tickets.

  • Requirements: Variable length, can encode significant amounts of data.

• ITF-14:

  • Description: Used to mark cartons, cases, or pallets with an EAN-13 or UPC number.

  • Requirements: Encodes 14 numerical digits.

---

Specifications

🎛️ Attributes

Name	Type	Description
Value	String	The Value to encode in the barcode.
Type	String	The type of barcode to render.
Hide Value	Boolean	If present, hide the value of the barcode.
Checksum	Boolean	If present, show the checksum value.

🎨 Styling

Setting	Description	Notes
Background	Changes the background color of the barcode.	Choose any color to match your design.
Color	Alters the color of the barcode stripes.	Select a color that contrasts well with the background.
Text Color	Modifies the color of the barcode value text.	Ensure readability with a contrasting text color.
Text Alignment	Adjusts the position of the barcode value.	Options include left, center, or right alignment.
Height	Sets the height of the barcode.	Adjust according to the space available.
Width	Defines the width of the barcode.	Choose a width that fits your layout.