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

# AX - Código de barras

## Resumen

**AX - Código de barras** es un componente de Experience Cloud que genera códigos escaneables, incluidos códigos QR, códigos de barras estándar y otros formatos, en las páginas de Experience Sites basándose en los valores de los campos de Salesforce.

Úselo para mostrar códigos de números de producto, IDs de pedido, información de seguimiento, entradas de eventos o cualquier dato que los usuarios del portal necesiten escanear con dispositivos móviles. Configure el tipo de código de barras, el tamaño y el estilo en Experience Builder para que coincidan con la marca de su portal.

Perfecto para portales de clientes que muestran códigos de barras de pedidos, páginas de registro de eventos con códigos QR de entradas, portales de socios con seguimiento de productos o sitios de autoservicio donde los usuarios necesitan códigos de acceso escaneables.

***

## Configuración del código de barras

### Personalización del valor del código de barras <a href="#customizing-the-barcode-value" id="customizing-the-barcode-value"></a>

El valor del código de barras se puede establecer de dos maneras. En primer lugar, puede introducir manualmente el valor deseado para el código de barras. Alternativamente, el valor puede obtenerse de una de sus colecciones existentes. Para usar un valor de una colección, cambie a la opción de entrada '[Mapeado](https://docs.avonniflowcomponents.com/getting-started/learn-the-basics#what-are-mapped-values)' y seleccione la colección adecuada como su fuente.

![](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)Cambie al campo de entrada Mapeado para seleccionar una colección de origen como valor.

### Elección del tipo de código de barras <a href="#choosing-the-barcode-type" id="choosing-the-barcode-type"></a>

El componente Código de barras renderiza más de 150 tipos diferentes de códigos de barras. Seleccione el que necesite.

<details>

<summary>Principales tipos de código de barras admitidos</summary>

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

</details>

## Especificaciones

{% tabs %}
{% tab title="🎛️ Propiedades" %}

| Nombre                   | Descripción                                                                                        | Uso                                                                                                                                           |
| ------------------------ | -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| **Tipo**                 | Seleccione el tipo de código de barras que se va a generar.                                        | Elija la simbología de código de barras adecuada según el caso de uso o el estándar del sector.                                               |
| **Valor**                | Los datos que se codificarán en el código de barras.                                               | Introduzca el valor que debe traducirse a formato de código de barras.                                                                        |
| **Suma de verificación** | Una opción booleana para habilitar o deshabilitar el cálculo de un dígito de suma de verificación. | Actívelo para incluir un dígito de suma de verificación en el código de barras, proporcionando una capa adicional de integridad de los datos. |
| **Ancho**                | Defina el ancho del código de barras.                                                              | Ajuste el ancho según las consideraciones de diseño de su página web o las limitaciones físicas del medio impreso.                            |
| **Altura**               | Defina la altura del código de barras.                                                             | Personalice la altura para garantizar que el código de barras encaje bien en el espacio asignado y sea fácilmente escaneable.                 |
| **Ocultar valor**        | Una opción booleana para mostrar u ocultar el valor codificado debajo del código de barras.        | Actívelo para ocultar el valor numérico o alfanumérico representado por el código de barras, ofreciendo una presentación visual más limpia.   |
| {% endtab %}             |                                                                                                    |                                                                                                                                               |

{% tab title="🎨 Apariencia" %}

| Nombre                   | Descripción                                                                | Uso                                                                                                                                                    |
| ------------------------ | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Color de fondo**       | Establezca el color de fondo del componente de código de barras.           | Elija un color que garantice un buen contraste con las líneas y los números del código de barras, asegurando la legibilidad y la capacidad de escaneo. |
| **Color**                | Establezca el color de las líneas y el texto del código de barras.         | Seleccione un color que destaque sobre el fondo, optimizando la visibilidad.                                                                           |
| **Alineación del texto** | Defina la alineación del texto que se muestra debajo del código de barras. | Ajuste la alineación del texto para armonizar con el diseño general y la disposición de la página web o del material impreso.                          |
| **Color del texto**      | Establezca el color del texto que se muestra debajo del código de barras.  | Elija un color que sea fácilmente legible sobre el color de fondo, asegurando que el valor codificado sea visualmente accesible.                       |
| {% 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-es/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.
