# AX - Código de barras

## Descripción general

**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 páginas de Experience Sites basados en valores de campos de Salesforce.

Úsalo para mostrar códigos de números de productos, IDs de pedidos, información de seguimiento, entradas para eventos o cualquier dato que los usuarios del portal necesiten escanear con dispositivos móviles. Configura el tipo de código de barras, el tamaño y el estilo en Experience Builder para que coincidan con la marca de tu 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 formas. En primer lugar, puedes introducir manualmente el valor deseado para el código de barras. Como alternativa, el valor puede obtenerse de una de tus colecciones existentes. Para usar un valor de una colección, cambia a la opción de entrada '[Mapeado](https://docs.avonniflowcomponents.com/getting-started/learn-the-basics#what-are-mapped-values)' y selecciona la colección adecuada como tu 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)Cambia 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 Barcode muestra más de 150 tipos diferentes de códigos de barras. Selecciona el que necesites.

<details>

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

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

</details>

## Especificaciones

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

| Name                     | Descripción                                                                                        | Uso                                                                                                                                             |
| ------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| **Tipo**                 | Selecciona el tipo de código de barras que se va a generar.                                        | Elige la simbología de código de barras adecuada según el caso de uso o el estándar de la industria.                                            |
| **Valor**                | Los datos que se codificarán en el código de barras.                                               | Introduce 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ívalo 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**                | Define el ancho del código de barras.                                                              | Ajusta el ancho según las consideraciones de diseño de tu página web o las limitaciones físicas del medio impreso.                              |
| **Altura**               | Define la altura del código de barras.                                                             | Personaliza la altura para asegurarte de que el código de barras encaje bien en el espacio asignado y sea fácil de escanear.                    |
| **Ocultar valor**        | Una opción booleana para mostrar u ocultar el valor codificado debajo del código de barras.        | Actívalo para ocultar el valor numérico o alfanumérico representado por el código de barras, proporcionando una presentación visual más limpia. |
| {% endtab %}             |                                                                                                    |                                                                                                                                                 |

{% tab title="🎨 Apariencia" %}

| Name                     | Descripción                                                                | Uso                                                                                                                                                    |
| ------------------------ | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Color de fondo**       | Establece el color de fondo del componente de código de barras.            | Elige 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 facilidad de escaneo. |
| **Color**                | Establece el color de las líneas y el texto del código de barras.          | Selecciona un color que destaque sobre el fondo, optimizando la visibilidad.                                                                           |
| **Alineación del texto** | Define la alineación del texto que se muestra debajo del código de barras. | Ajusta la alineación del texto para armonizar con el diseño y la disposición general de la página web o del material impreso.                          |
| **Color del texto**      | Establece el color del texto que se muestra debajo del código de barras.   | Elige un color que sea fácilmente legible sobre el color de fondo, asegurando que el valor codificado sea visualmente accesible.                       |
| {% endtab %}             |                                                                            |                                                                                                                                                        |
| {% endtabs %}            |                                                                            |                                                                                                                                                        |
