> 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-list.md).

# AX - Lista

## Resumen

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

Ú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 entre 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 entre sus registros de Salesforce.

{% hint style="success" %}
La Avonni List es un [Componente de datos reactivo](/experience-cloud/experience-cloud-es/primeros-pasos/reactive-components.md)
{% endhint %}

<figure><img src="/files/162e51cfb372c59016eb7ab55c6ed12abdbb79de" alt=""><figcaption></figcaption></figure>

## Configuración de la lista

Comprender el proceso de configuración, especialmente las secciones Fuente de datos y Asignaciones, es crucial para usar la Lista de forma eficaz.

### Configuración de la fuente de datos

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

<figure><img src="/files/8518e3cb6f5f8b218e7cc143d1a17ab6e618f76f" alt=""><figcaption></figcaption></figure>

| Tipo de origen de datos    | Descripción                                                                        | Caso de uso                                                                  |
| -------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| **Origen 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 completar 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 asignaciones de datos

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

* Haz clic en el '**Agregar columnas**' para seleccionar el campo que quieres mostrar como etiqueta en la Lista.

<figure><img src="/files/111c8d79e169054ee18da1626a539f837f47068d" 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="/files/7a4d6e0b047a4af031d8d7c35983256c101ee19b" 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 introduciendo divisores entre los 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>Arriba</strong></td><td>Te permite colocar un divisor en la parte superior de cada elemento de la lista.</td><td><img src="/files/96f992fb52203e4e38914afa3b9c28739871350a" alt=""></td></tr><tr><td><strong>Inferior</strong></td><td>Agrega una línea divisoria en la parte inferior de cada elemento de la lista.</td><td><img src="/files/d500bee60f682931e9be0cac6d1d033a04f8e069" alt=""></td></tr><tr><td><strong>Alrededor</strong></td><td>Coloca líneas divisorias tanto encima como debajo de cada elemento de la lista.</td><td><img src="/files/8a188a54cee960544de88ae3a059de932db15fd9" alt=""></td></tr><tr><td><strong>Tarjeta</strong></td><td>Coloca cada elemento de la lista dentro de su propio contenedor similar a una tarjeta, separado por divisores.</td><td><img src="/files/7e10d7d891d76a745ca1dd86fb59afe2a8c2da00" alt=""></td></tr></tbody></table>

#### Opciones de diseño

La función Opciones de diseño dentro del componente Avonni List 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 los datos, con opciones disponibles de una a doce columnas.

<figure><img src="/files/0a937e0e586466a0932f3d47f0352696aff22427" alt=""><figcaption></figcaption></figure>

Además, el componente Avonni List ofrece una personalización avanzada mediante la capacidad de especificar configuraciones de columnas según el 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 coherente y fácil de usar en pantallas pequeñas, medianas y grandes.

<figure><img src="/files/d36832bb20e09819c59ee499d5c308f2cbecdb16" alt="" width="375"><figcaption></figcaption></figure>

#### Opciones de diseño de campos

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

<figure><img src="/files/152495933e08b75b627f9cb68601aa946cdbf1d8" 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 del campo. A continuación se indican los valores disponibles para la propiedad "variant", cada uno con su estilo único.

1. **Standard**: 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**: Opta por esta variante cuando quieras un diseño minimalista. La etiqueta no se muestra, lo que ofrece un aspecto más limpio. Esto es ideal para formularios donde el contexto o el texto del marcador de posición hacen evidente 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 que ahorra 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 sobre el campo. Cuando el campo tiene el foco o está rellenado, la etiqueta se desplaza hacia arriba. Es un diseño moderno que se usa a menudo en interfaces móviles y aplicaciones web, donde ayuda a ahorrar espacio vertical y a mantener una estética limpia y despejada.

<figure><img src="/files/95e0a9ad3a4c285ee69789524a96a803b0489031" 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 despejada y centrada.

<figure><img src="/files/4498aef9ace98132082d6c2b644fa9798c6eb6d1" 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 Avonni List. Puedes elegir cuántos elementos se muestran en cada página y cómo se ven los controles. Esto facilita la gestión de listas extensas.

<figure><img src="/files/9acfa062962cfd04721e22b5dc876e1808a2c910" alt=""><figcaption></figcaption></figure>

### Buscar

Utiliza el atributo 'Campos de búsqueda' para definir qué campos dentro del componente Lista deben ser buscables, permitiendo a los usuarios localizar rápidamente la información necesaria.

<figure><img src="/files/7b9da14f967c2d801543f1c3343b8eb9fe336e86" 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 'Mostrar búsqueda'. 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="/files/7d8d24209708508178574d13af8b0d99282a5382" alt=""><figcaption></figcaption></figure>

**Establecer texto del marcador de posición**: Personaliza la barra de búsqueda añadiendo texto de marcador de posición para orientar 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 lo que sucederá cuando los usuarios interactúen con el componente de lista haciendo clic en un elemento.

<figure><img src="/files/ded15879061afa36ede9be45f50fb59b14afb698" alt=""><figcaption></figcaption></figure>

Estas son las interacciones disponibles para el componente Lista:

* [Mostrar notificación emergente](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/show-toast.md)
* [Navegar](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/navigate.md)
* [Abrir modal de alerta](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/open-alert-modal.md)
* [Abrir confirmación](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/open-confirm.md)
* [Abrir diálogo de flujo](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/open-flow-dialog.md)

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

## Apariencia del estilo

El componente Avonni List para Experience Cloud Sites ofrece amplias opciones de personalización para su apariencia, lo que te permite adaptarlo perfectamente a la estética de tu sitio.

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

1. **Borde:** Ajusta el grosor, estilo y 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 la altura, 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, incluido 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 que destaque o se alinee con el tema de tu sitio.
6. **Subtítulo del encabezado:** Da estilo al subtítulo debajo del título del encabezado para ofrecer 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 una apariencia coherente y pulida.
10. **Encabezado del elemento:** Personaliza la apariencia de los encabezados de los elementos dentro de la lista para lograr 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 o la imagen de fondo para 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 obtener información adicional o acciones relacionadas con la lista, asegurando que complemente el diseño general.


---

# 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-list.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.