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

# AX - Code-barres

## Vue d'ensemble

**AX - Code-barres** est un composant Experience Cloud qui génère des codes scannables, y compris des codes QR, des codes-barres standard et d'autres formats, sur les pages des sites Experience en fonction des valeurs des champs Salesforce.

Utilisez-le pour afficher des codes pour les numéros de produit, les ID de commande, les informations de suivi, les billets d'événements ou toute donnée que les utilisateurs du portail doivent scanner avec des appareils mobiles. Configurez le type de code-barres, la taille et le style dans Experience Builder pour correspondre à l'image de marque de votre portail.

Parfait pour les portails clients affichant des codes-barres de commande, les pages d'inscription à des événements avec des codes QR de billets, les portails partenaires avec suivi de produits, ou les sites en libre-service où les utilisateurs ont besoin de codes d'accès scannables.

## Configuration

### Choisir le type de code-barres <a href="#choosing-the-barcode-type" id="choosing-the-barcode-type"></a>

AX - Bar Code affiche 103 types de codes-barres différents. Sélectionnez celui dont vous avez besoin dans le **Type** propriété. La liste de sélection affiche chaque type par son nom technique, tel que `qrcode` ou `code128`, donc la liste ci-dessous donne ce nom à côté de chaque type courant.

<figure><img src="https://3803934262-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 des 103 types, chacun étiqueté avec son nom dans la liste de sélection Type. Les codes qui n'impriment pas leur valeur (QR Code, Data Matrix, PDF417) ont l'option Masquer la valeur activée.</p></figcaption></figure>

<details>

<summary>Principaux types de code-barres pris en charge</summary>

* **Codes 2D :** QR Code (`qrcode`), Data Matrix (`datamatrix`), PDF417 (`pdf417`), Aztec Code (`azteccode`), MaxiCode (`maxicode`), DotCode (`dotcode`)
* **Commerce de détail / produit (1D) :** EAN-13 (`ean13`), EAN-8 (`ean8`), UPC-A (`upca`), UPC-E (`upce`), GS1-128 (`gs1-128`)
* **Logistique / expédition :** ITF-14 (`itf14`), Code 128 (`code128`), Interleaved 2 of 5 (`interleaved2of5`), GS1 DataBar (`databaromni` et les autres `databar` types)
* **Usage général (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`)
* **Pharmaceutique :** Pharmacode (`pharmacode`), PZN (`pzn`), HIBC (les `hibc` types, tels que `hibccode128`)

L'ensemble complet des 103 symbologies prises en charge est disponible dans la **Type** propriété du composant.

</details>

### Propriétés

**Type** sélectionne la symbologie de code-barres à générer. Choisissez le type approprié en fonction de votre cas d'utilisation ou de la norme du secteur.

**Valeur** est la donnée à encoder dans le code-barres. Saisissez du texte statique ou un jeton qui lit l'enregistrement sélectionné dans un autre composant AX sur la page, tel que `{{accountTable.selectedRecord.AccountNumber}}`. Le code se met alors à jour lorsque l'utilisateur choisit un autre enregistrement. Voir [Composants réactifs](/experience-cloud/experience-cloud-fr/premiers-pas/reactive-components.md).

{% hint style="info" %}
Le composant reste vide jusqu'à ce que **Type** et **Valeur** soient définis. Si la valeur ne respecte pas les règles du type choisi (par exemple, des lettres dans un EAN-13), le composant affiche un message d'erreur au lieu d'un code.
{% endhint %}

**Somme de contrôle** active ou désactive le calcul d'un chiffre de contrôle, ajoutant une couche d'intégrité des données lorsque le type de code-barres le prend en charge. Lorsqu'il est activé, le caractère de contrôle est également affiché dans la valeur lisible. Désactivé par défaut.

**Largeur** et **Hauteur** définissent la taille maximale du code-barres, dans n'importe quelle unité CSS (un nombre simple signifie des pixels). La largeur est définie par défaut sur 100 % du conteneur, et la hauteur suit la largeur sauf si vous la définissez.

**Masquer la valeur** (désactivé par défaut) supprime la valeur lisible imprimée avec le code, pour une présentation visuelle plus épurée.

**Texte alternatif** fournit un texte accessible décrivant le code-barres.

## Style

| Nom                        | Description                                                                                                                                                                                                                                  | Utilisation                                                                                                                                                    |
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Couleur d'arrière-plan** | Définissez la couleur d'arrière-plan du composant de code-barres.                                                                                                                                                                            | Choisissez une couleur qui assure un bon contraste avec les lignes et les chiffres du code-barres, garantissant la lisibilité et la possibilité de le scanner. |
| **Couleur**                | Définissez la couleur des barres (ou des modules, pour les codes 2D). La valeur lisible utilise **Couleur du texte**.                                                                                                                        | Sélectionnez une couleur qui se démarque du fond, afin d'optimiser la visibilité.                                                                              |
| **Alignement du texte**    | Positionnez la valeur lisible autour du code-barres. Douze options associent une bande verticale (Haut, Centre, Bas) à une horizontale (Gauche, Centre, Droite, Justifié), de **Haut gauche** à **Bas justifié**. Par défaut **Bas centre**. | Ajustez l'alignement du texte pour l'harmoniser avec la conception générale et la mise en page de la page web ou du support imprimé.                           |
| **Couleur du texte**       | Définissez la couleur de la valeur lisible, partout où **Alignement du texte** la place.                                                                                                                                                     | Choisissez une couleur facilement lisible sur la couleur d'arrière-plan, afin de garantir que la valeur encodée soit visuellement accessible.                  |

<figure><img src="https://3803934262-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>La même valeur Code 128 avec trois options d'alignement du texte. Justifié répartit les caractères sur toute la largeur du 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-cloud-fr/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.
