> 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

## Aperçu

**AX - Code-barres** est un composant Experience Cloud qui génère des codes scannables — y compris des codes QR, des codes-barres standards et d’autres formats — sur les pages des sites Experience, à partir des valeurs de champs Salesforce.

Utilisez-le pour afficher des codes pour les numéros de produit, les identifiants de commande, les informations de suivi, les billets d’événement 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 afin de les adapter à l’identité visuelle 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 le suivi des produits, ou les sites en libre-service où les utilisateurs ont besoin de codes d’accès scannables.

***

## Configuration du code-barres

### Personnalisation de la valeur du code-barres <a href="#customizing-the-barcode-value" id="customizing-the-barcode-value"></a>

La valeur du code-barres peut être définie de deux façons. Premièrement, vous pouvez saisir manuellement la valeur souhaitée pour le code-barres. Sinon, la valeur peut être issue de l’une de vos collections existantes. Pour utiliser une valeur provenant d’une collection, passez à l’option d’entrée « [Mappé](https://docs.avonniflowcomponents.com/getting-started/learn-the-basics#what-are-mapped-values) » et sélectionnez la collection appropriée comme source.

![](https://docs.avonniflowcomponents.com/~gitbook/image?url=https:%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FNtPc8kKJjE5Zjgb2vPDb%252F2022-11-29_10-58-14.png%3Falt=media%26token=1882446b-d6c9-432f-a648-61dbfd839c45\&width=768\&dpr=4\&quality=100\&sign=69e627c744a074a265f6977004fae447ff1c0cb987dbdaa6a062336d44834319)Passez au champ de saisie Mappé pour sélectionner une collection source comme valeur.

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

Le composant Barcode affiche plus de 150 types de codes-barres différents. Sélectionnez celui dont vous avez besoin.

<details>

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

* *
  *
* *
  *
* *
  *
* *
  *
* *
  *
* *
  *
* *
  *
* *
  *
* *
  *
* *
  *
* *
  *
* *
  *
* *
  *
* *
  *

</details>

## Spécifications

{% tabs %}
{% tab title="🎛️ Propriétés" %}

| Nom                   | Description                                                                                     | Utilisation                                                                                                                                                  |
| --------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Type**              | Sélectionnez le type de code-barres à générer.                                                  | Choisissez la symbologie de code-barres appropriée en fonction du cas d’utilisation ou de la norme du secteur.                                               |
| **Valeur**            | Les données à encoder dans le code-barres.                                                      | Saisissez la valeur à convertir en code-barres.                                                                                                              |
| **Somme de contrôle** | Une option booléenne permettant d’activer ou de désactiver le calcul d’un chiffre de contrôle.  | Activez cette option pour inclure un chiffre de contrôle dans le code-barres, offrant ainsi une couche supplémentaire d’intégrité des données.               |
| **Largeur**           | Définissez la largeur du code-barres.                                                           | Ajustez la largeur en fonction des considérations de conception de votre page web ou des contraintes physiques du support imprimé.                           |
| **Hauteur**           | Définissez la hauteur du code-barres.                                                           | Personnalisez la hauteur pour garantir que le code-barres s’intègre bien dans l’espace alloué et puisse être facilement scanné.                              |
| **Masquer la valeur** | Une option booléenne permettant d’afficher ou de masquer la valeur encodée sous le code-barres. | Activez cette option pour masquer la valeur numérique ou alphanumérique représentée par le code-barres, offrant ainsi une présentation visuelle plus épurée. |
| {% endtab %}          |                                                                                                 |                                                                                                                                                              |

{% tab title="🎨 Apparence" %}

| Nom                        | Description                                                    | Utilisation                                                                                                                                          |
| -------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Couleur d’arrière-plan** | Définissez la couleur d’arrière-plan du composant code-barres. | Choisissez une couleur qui garantit un bon contraste avec les lignes et les chiffres du code-barres, afin d’assurer la lisibilité et la scanabilité. |
| **Couleur**                | Définissez la couleur des lignes et du texte du code-barres.   | Sélectionnez une couleur qui se démarque du fond, afin d’optimiser la visibilité.                                                                    |
| **Alignement du texte**    | Définissez l’alignement du texte affiché sous le code-barres.  | Ajustez l’alignement du texte pour l’harmoniser avec la conception globale et la mise en page de la page web ou du document imprimé.                 |
| **Couleur du texte**       | Définissez la couleur du texte affiché sous le code-barres.    | Choisissez une couleur facilement lisible sur la couleur d’arrière-plan, afin de garantir que la valeur encodée soit visuellement accessible.        |
| {% endtab %}               |                                                                |                                                                                                                                                      |
| {% endtabs %}              |                                                                |                                                                                                                                                      |


---

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

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

The question should be specific, self-contained, and written in natural language.
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.
