> 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/experience-cloud/experience-components/ax-bar-code.md).

# AX - Bar Code

## Overview

**AX - Bar Code** is an Experience Cloud component that generates scannable codes, including QR codes, standard barcodes, and other formats, on Experience Sites pages based on Salesforce field values.

Use it to display codes for product numbers, order IDs, tracking information, event tickets, or any data that portal users need to scan with mobile devices. Configure the barcode type, size, and styling in Experience Builder to match your portal's branding.

Perfect for customer portals showing order barcodes, event registration pages with ticket QR codes, partner portals with product tracking, or self-service sites where users need scannable access codes.

## Configuration

### Choosing the barcode type <a href="#choosing-the-barcode-type" id="choosing-the-barcode-type"></a>

AX - Bar Code renders 103 different types of barcodes. Select the one you need in the **Type** property. The picklist lists each type by its technical name, such as `qrcode` or `code128`, so the list below gives that name next to each common type.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FNslgr4Ch5kqJbQ0XNG8u%2Fax-bar-code-types.png?alt=media" alt=""><figcaption><p>Six of the 103 types, each labelled with its name in the Type picklist. Codes that do not print their value (QR Code, Data Matrix, PDF417) have Hide Value turned on.</p></figcaption></figure>

<details>

<summary>Main types of Barcode supported</summary>

* **2D codes:** QR Code (`qrcode`), Data Matrix (`datamatrix`), PDF417 (`pdf417`), Aztec Code (`azteccode`), MaxiCode (`maxicode`), DotCode (`dotcode`)
* **Retail / product (1D):** EAN-13 (`ean13`), EAN-8 (`ean8`), UPC-A (`upca`), UPC-E (`upce`), GS1-128 (`gs1-128`)
* **Logistics / shipping:** ITF-14 (`itf14`), Code 128 (`code128`), Interleaved 2 of 5 (`interleaved2of5`), GS1 DataBar (`databaromni` and the other `databar` types)
* **General purpose (1D):** Code 39 (`code39`), Code 93 (`code93`), Codabar (`rationalizedCodabar`), MSI (`msi`), Plessey (`plessey`), Telepen (`telepen`)
* **Postal:** USPS Intelligent Mail (`onecode`), POSTNET (`postnet`), PLANET (`planet`), Royal Mail (`royalmail`), Australia Post (`auspost`), Japan Post (`japanpost`)
* **Pharmaceutical:** Pharmacode (`pharmacode`), PZN (`pzn`), HIBC (the `hibc` types, such as `hibccode128`)

The full set of 103 supported symbologies is available in the component's **Type** property.

</details>

### Properties

**Type** selects the barcode symbology to generate. Choose the appropriate type based on your use case or industry standard.

**Value** is the data to be encoded into the barcode. Enter static text, or a token that reads the record selected in another AX component on the page, such as `{{accountTable.selectedRecord.AccountNumber}}`. The code then updates when the user picks another record. See [Reactive Components](/experience-cloud/getting-started/reactive-components.md).

{% hint style="info" %}
The component stays empty until both **Type** and **Value** are set. If the value does not fit the rules of the chosen type (for example letters in an EAN-13), the component shows an error message instead of a code.
{% endhint %}

**Checksum** enables or disables the calculation of a checksum digit, adding a layer of data integrity when the barcode type supports it. When it is on, the check character is also printed in the readable value. Off by default.

**Width** and **Height** set the maximum size of the barcode, in any CSS unit (a plain number means pixels). Width defaults to 100% of the container, and the height follows the width unless you set it.

**Hide Value** (off by default) removes the readable value printed with the code, for a cleaner visual presentation.

**Alternative Text** provides accessible text describing the barcode.

## Styling

| Name                 | Description                                                                                                                                                                                                                             | Usage                                                                                                                        |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **Background Color** | Set the background color of the barcode component.                                                                                                                                                                                      | Choose a color that ensures good contrast with the barcode lines and numbers, ensuring readability and scannability.         |
| **Color**            | Set the color of the bars (or modules, for 2D codes). The readable value uses **Text Color**.                                                                                                                                           | Select a color that stands out against the background, optimizing visibility.                                                |
| **Text Alignment**   | Position the readable value around the barcode. Twelve options pair a vertical band (Top, Center, Bottom) with a horizontal one (Left, Center, Right, Justify), from **Top Left** to **Bottom Justify**. Defaults to **Bottom Center**. | Adjust the text alignment to harmonize with the overall design and layout of the webpage or printed material.                |
| **Text Color**       | Set the color of the readable value, wherever **Text Alignment** places it.                                                                                                                                                             | Choose a color that is easily readable against the background color, ensuring that the encoded value is visually accessible. |

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fu1QfjZfrjFaVPr4IdgRR%2Fax-bar-code-text-alignment.png?alt=media" alt=""><figcaption><p>The same Code 128 value with three Text Alignment options. Justify spreads the characters across the full width of the code.</p></figcaption></figure>


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-bar-code.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.