# AX - Lista

## Descripción general

**AX - Lista** es un componente de Experience Cloud que muestra registros de Salesforce como tarjetas personalizables en diseños de cuadrícula o lista en páginas de sitios de Experience.

Úsalo para mostrar a los usuarios del portal conjuntos de registros filtrados —como sus pedidos, casos, contratos o cualquier dato relacionado— con control total sobre qué campos aparecen en cada tarjeta. Los usuarios pueden buscar, filtrar, paginar los resultados y hacer clic en las tarjetas para navegar a los registros. Obtén datos de cualquier objeto estándar o personalizado en Experience Builder.

Perfecto para el historial de pedidos de clientes, listas de casos, bibliotecas de documentos, catálogos de productos o cualquier lugar donde los usuarios del portal necesiten explorar y buscar en sus registros de Salesforce.

{% hint style="success" %}
La Lista Avonni es un [Componente de datos reactivo](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/primeros-pasos/componentes-reactivos)
{% endhint %}

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fpt2IfBa0lYKIcPqkp9r4%2FAvonni%20Components%204.2.webp?alt=media&#x26;token=bfa921dd-9ffe-457d-a418-9bd6afe5a723" alt=""><figcaption></figcaption></figure>

## Configuración de la lista

Comprender el proceso de configuración, en particular las secciones Fuente de datos y Mapeos, es fundamental para usar la Lista de manera eficaz.

### Configuración de la fuente de datos

La sección Fuente de datos es donde conectas la Lista Avonni con tus datos de Salesforce. Tienes dos opciones de fuente de datos.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FbPNBH8BWbxiRQWP0nvC2%2F2024-02-04_15-01-30.png?alt=media&#x26;token=6d86abef-43ac-4b13-8490-d197f0fc154f" alt=""><figcaption></figcaption></figure>

| Tipo de fuente de datos    | Descripción                                                                       | Caso de uso                                                                  |
| -------------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| **Fuente de datos manual** | Introduce manualmente la Lista en la tabla de datos.                              | Ideal para datos no dinámicos, pruebas y demostraciones.                     |
| **Consulta**               | Crea una consulta para rellenar automáticamente la Lista con datos de Salesforce. | Adecuado para conjuntos de datos dinámicos, en tiempo real y de gran tamaño. |

### Configuración de mapeos de datos

Dale vida a tu lista en la sección de Mapeos de datos definiéndola y personalizándola.

* Haz clic en el botón '**Agregar columnas**', para seleccionar el campo que deseas mostrar como etiqueta en la Lista.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FsuXTMbmTsztyn3eSA11F%2F2024-02-04_14-49-35.png?alt=media&#x26;token=0b2c9073-24b6-477d-bbdd-d32f7987f043" alt=""><figcaption></figcaption></figure>

* Luego, puedes incorporar elementos adicionales junto con tus datos principales. Esto podría incluir componentes visuales como imágenes, avatares o incluso campos adicionales para proporcionar más contexto o detalle a cada elemento de la lista.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fc32Ky8kXM5Bec7yYKlV1%2F2024-02-04_14-52-53.png?alt=media&#x26;token=a9b956a2-f67f-4f5e-bdcc-f389ada8ecd7" alt=""><figcaption></figcaption></figure>

### Configuración de apariencia y estilo

#### Configuración del divisor de elementos

La función Divisor de elementos está diseñada para mejorar la estructura visual de tu lista mediante la introducción de divisores entre elementos. Este atributo te permite personalizar cómo se separa cada elemento de la lista de los demás.

<table><thead><tr><th width="125.33333333333331">Divisor</th><th width="309">Descripción</th><th>Ilustración</th></tr></thead><tbody><tr><td><strong>Superior</strong></td><td>Te permite colocar un divisor en la parte superior de cada elemento de la lista.</td><td><img src="broken-reference" alt=""></td></tr><tr><td><strong>Inferior</strong></td><td>Añade una línea divisoria en la parte inferior de cada elemento de la lista.</td><td><img src="broken-reference" alt=""></td></tr><tr><td><strong>Alrededor</strong></td><td>Coloca líneas divisorias tanto arriba como abajo de cada elemento de la lista. </td><td><img src="broken-reference" alt=""></td></tr><tr><td><strong>Tarjeta</strong></td><td>Coloca cada elemento de la lista dentro de su propio contenedor tipo tarjeta, separado por divisores.</td><td><img src="broken-reference" alt=""></td></tr></tbody></table>

#### Opciones de diseño

La función Opciones de diseño dentro del componente Lista Avonni brinda la capacidad de definir la presentación de los datos dentro de la lista. Esto se logra seleccionando el número deseado de columnas en las que se debe organizar la información, con opciones disponibles de una a doce columnas.&#x20;

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FUF0NVgdHNfCVLdEPeKIr%2F2024-02-07_21-24-47.png?alt=media&#x26;token=aa9fb4b6-7f17-402b-a6f5-1a00a4c751d8" alt=""><figcaption></figcaption></figure>

Además, el componente Lista Avonni ofrece personalización avanzada mediante la posibilidad de especificar configuraciones de columnas en función del tamaño de pantalla del contenedor. Esta función permite ajustar con precisión la apariencia de la lista en distintos dispositivos, garantizando una visualización uniforme y fácil de usar en pantallas pequeñas, medianas y grandes.&#x20;

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3dTwkrWEQzbdIGV6TwHa%2F2024-02-07_21-25-19.png?alt=media&#x26;token=48d5c695-2f82-487e-bc3a-f08a81169fc7" alt="" width="375"><figcaption></figcaption></figure>

#### Opciones de diseño de campos

La sección de Atributos de campo te permite definir el número de columnas que ocupará cada campo dentro del contenedor, brindándote un control detallado sobre el diseño y la apariencia del contenido de tu lista.&#x20;

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FrerSxvfhSCDCOBOF6uAp%2F2024-02-07_21-27-15.png?alt=media&#x26;token=e7ecb311-fd51-4271-b601-b45a2fa7d809" alt=""><figcaption></figcaption></figure>

**Ajustar la variante**

La propiedad "variant" en el componente de lista Avonni se utiliza para modificar la apariencia de cómo se muestra la información de los campos. A continuación se presentan los valores disponibles para la propiedad "variant", cada uno con su estilo único.

1. **Estándar**: Esta es la configuración predeterminada, donde la etiqueta se muestra encima del campo. Es un diseño clásico y muy utilizado, que proporciona una separación clara entre la etiqueta y el contenido del campo.
2. **Etiqueta oculta**: Elige esta variante cuando quieras un diseño minimalista. La etiqueta no se muestra, lo que ofrece un aspecto más limpio. Es ideal para formularios donde el contexto o el texto del marcador de posición hacen obvio el propósito del campo o cuando el espacio es limitado.
3. **Etiqueta en línea**: En esta variante, la etiqueta se coloca en línea con el campo, normalmente a la izquierda. Este diseño eficiente en el uso del espacio funciona bien en formularios donde el espacio horizontal es más abundante que el vertical. También es útil cuando quieres lograr un diseño de formulario más compacto.
4. **Etiqueta apilada**: Esta variante coloca la etiqueta directamente encima del campo. Cuando el campo recibe el foco o se completa, la etiqueta se desplaza hacia arriba. Es un diseño moderno que suele usarse en interfaces móviles y aplicaciones web, donde ayuda a ahorrar espacio vertical y a mantener una estética limpia y ordenada.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FHsOhZBf72KG2HfCgthFE%2F2024-02-07_21-28-52.png?alt=media&#x26;token=96b20a77-af03-43c8-9acb-5b09db482cd0" alt=""><figcaption></figcaption></figure>

#### Opciones de imagen

## Otros ajustes

### Filtros

La "**`Opción de filtrado`**" te permite agregar un menú de filtros. Cuando esta función está habilitada, todos los campos designados como filtros se mostrarán en este menú emergente, manteniendo la lista ordenada y enfocada.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F5az4m93BFO7sn6RyKV0d%2F2024-02-04_16-32-15.png?alt=media&#x26;token=87feb3fb-af0e-4547-a17a-dbc7295ee9c8" alt=""><figcaption></figcaption></figure>

### Paginación

El área "Opciones de paginación" te permite dividir listas largas en partes más pequeñas en el componente Lista Avonni. Puedes elegir cuántos elementos se muestran en cada página y cómo se ven los controles. Esto facilita el manejo de listas extensas.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FzeK9JTrAHa50bc1g2xJV%2F2024-02-04_16-33-26.png?alt=media&#x26;token=e1518494-b96c-44b7-860e-dfdd62a3eb52" alt=""><figcaption></figcaption></figure>

### Búsqueda

Utiliza el atributo 'Search Fields' para definir qué campos dentro del componente Lista deben ser buscables, permitiendo a los usuarios localizar rápidamente la información necesaria.&#x20;

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F06qOPZmtykLJ5oDM6MBC%2F2024-02-04_16-37-32.png?alt=media&#x26;token=2010499d-9896-4ab4-9fc4-76e33e9e006b" alt=""><figcaption></figcaption></figure>

**Activar la búsqueda**: Para activar la función de búsqueda, ve a la sección Búsqueda y activa el interruptor 'Show Search'. Esta acción introducirá un cuadro de búsqueda dentro del componente Lista. Puedes personalizar esta función modificando el texto del marcador de posición y ajustando la posición del cuadro de búsqueda según sea necesario.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FIaNqX8MljJ6BiCs2dVfY%2F2024-02-04_16-38-23.png?alt=media&#x26;token=d4d4509a-054f-4864-9b6e-ffc876e413d7" alt=""><figcaption></figcaption></figure>

**Definir el texto del marcador de posición**: Personaliza la barra de búsqueda agregando texto de marcador de posición para guiar a los usuarios.

**Posicionar la barra de búsqueda**: Usa el atributo de posición para establecer la ubicación de la barra de búsqueda. Las opciones incluyen:

## Interacciones

La "**Sección Al hacer clic**" te permite definir qué sucederá cuando los usuarios interactúen con el componente de lista haciendo clic en un elemento.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FgU5pBJZqt1tHVmeY8EPp%2F2024-02-04_20-37-16.png?alt=media&#x26;token=1929d1aa-7c5a-42dc-84b5-81459adb889a" alt=""><figcaption></figcaption></figure>

Estas son las interacciones disponibles para el componente Lista:

* [Mostrar notificación](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/mostrar-toast)
* [Navegar](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/navegar)
* [Abrir modal de alerta](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/abrir-modal-de-alerta)
* [Abrir confirmación](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/abrir-confirmacion)
* [Abrir diálogo de flujo](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/abrir-cuadro-de-dialogo-de-flujo)

Explora cada sección para obtener información sobre cómo configurar estas funciones y mejorar la interactividad para los usuarios finales dentro del componente Lista Avonni.

## Apariencia de estilo

El componente Lista Avonni para sitios de Experience Cloud ofrece opciones completas de personalización para su apariencia, lo que te permite adaptarlo perfectamente a la estética de tu sitio.&#x20;

Estos son los atributos de estilo disponibles para personalizar en la Lista Avonni:

1. **Borde:** Ajusta el grosor, el estilo y el color del borde para definir o resaltar los límites de la lista.
2. **Tamaño:** Personaliza el tamaño general de la lista, incluido el ancho y el alto, para adaptarlo a tu diseño.
3. **Espaciado:** Controla el espacio entre los elementos de la lista, los encabezados y el cuerpo de la lista para mejorar la legibilidad y el atractivo visual.
4. **Encabezado:** Da estilo a la sección del encabezado, incluidos el título, el subtítulo y los avatares, para que sea visualmente distintiva e informativa.
5. **Título del encabezado:** Personaliza la fuente, el tamaño y el color del título para hacerlo destacar o alinearlo con el tema de tu sitio.
6. **Subtítulo del encabezado:** Da estilo al subtítulo debajo del título del encabezado para proporcionar una descripción breve o contexto sobre la lista.
7. **Avatar del encabezado:** Incluye y da estilo a un avatar o imagen en el encabezado para representación visual o marca.
8. **Elemento:** Ajusta la apariencia de los elementos individuales de la lista, incluido el fondo, la alineación y el espaciado.
9. **Alineación vertical del elemento:** Controla la alineación vertical de los elementos de la lista para lograr un aspecto uniforme y pulido.
10. **Encabezado del elemento:** Personaliza la apariencia de los encabezados de los elementos dentro de la lista para una segmentación clara y una mejor legibilidad.
11. **Descripción del elemento:** Da estilo al texto de la descripción del elemento para proporcionar información detallada de una manera visualmente atractiva.
12. **Fondo del elemento:** Establece el color de fondo o la imagen de los elementos de la lista para diferenciar o resaltar entradas individuales.
13. **Campos del elemento:** Da estilo a los campos dentro de cada elemento, como cambiar la fuente o el color, para lograr claridad y jerarquía visual.
14. **Valor de los campos del elemento:** Personaliza la presentación de los valores de los campos para una representación clara de los datos.
15. **Etiqueta de los campos del elemento:** Da estilo a las etiquetas de los campos para distinguirlas de los valores y mejorar la legibilidad.
16. **Botones de paginación:** Da estilo a los botones de paginación para navegar por la lista, asegurando que sean fáciles de usar y que coincidan con la estética de tu sitio.
17. **Pie de página:** Personaliza la sección del pie de página para información adicional o acciones relacionadas con la lista, asegurando que complemente el diseño general.