AX - Lista
Resumen
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 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 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 navegar y buscar entre sus registros de Salesforce.
La Lista Avonni es un Componente de Datos Reactivo
Configuración de la Lista
Comprender el proceso de configuración, particularmente las secciones Fuente de Datos y Mapeos, es crucial para usar la Lista de manera efectiva.
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.
Fuente de Datos Manual
Ingresar manualmente la Lista en la tabla de datos.
Ideal para datos no dinámicos, pruebas y demostraciones.
Consulta
Crear una consulta para auto-poblar la Lista con datos de Salesforce.
Adecuado para conjuntos de datos dinámicos, en tiempo real y grandes.
Configuración de Mapeos de Datos
Das vida a tu lista en la sección Mapeos de Datos definiéndola y personalizándola.
Haz clic en el 'Agregar Columnas' botón para seleccionar el campo que deseas mostrar como etiqueta en la Lista.
Luego, puedes incorporar elementos adicionales junto con tus datos principales. Esto puede incluir componentes visuales como imágenes, avatares o incluso campos adicionales para proporcionar más contexto o detalle a cada elemento de la lista.
Configuración de apariencia
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 elementos. Este atributo te permite personalizar cómo cada elemento de la lista se separa del resto.
Arriba
Te permite colocar un divisor en la parte superior de cada elemento en la lista.
Inferior
Agrega una línea divisoria en la parte inferior de cada elemento de la lista.
Alrededor
Coloca líneas divisorias tanto arriba como abajo de cada elemento de la lista.
Tarjeta
Coloca cada elemento de la lista dentro de su propio contenedor tipo tarjeta, separado por divisores.
Opciones de diseño
La función Opciones de Diseño dentro del Componente Lista Avonni otorga 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 los datos deben organizarse, con opciones disponibles desde una hasta doce columnas.
Además, el Componente Lista Avonni proporciona personalización avanzada mediante la capacidad de especificar configuraciones de columnas en función del tamaño de la pantalla del contenedor. Esta función permite ajustar con precisión la apariencia de la lista en varios dispositivos, asegurando una presentación consistente y fácil de usar en pantallas pequeñas, medianas y grandes.
Opciones de diseño de campos
La sección Atributos de Campo te permite definir la cantidad de columnas que cada campo ocupará dentro del contenedor, dándote un control granular sobre el diseño y la apariencia del contenido de tu lista.
Ajustar la variante
La propiedad "variant" en el componente lista Avonni se usa 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.
Estándar: Esta es la configuración predeterminada donde la etiqueta se muestra encima del campo. Es un diseño clásico y ampliamente utilizado, que proporciona una separación clara entre la etiqueta y el contenido del campo.
Etiqueta Oculta: Opta por esta variante cuando quieras un diseño minimalista. La etiqueta no se muestra, ofreciendo un aspecto más limpio. Esto es ideal para formularios donde el contexto o el texto de marcador hace evidente el propósito del campo o cuando el espacio es limitado.
Etiqueta en Línea: En esta variante, la etiqueta se posiciona en línea con el campo, típicamente a la izquierda. Este diseño eficiente en 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.
Etiqueta Apilada: Esta variante coloca la etiqueta directamente sobre el campo. Cuando el campo está enfocado o rellenado, la etiqueta se desplaza hacia arriba. Es un diseño moderno usado frecuentemente en interfaces móviles y aplicaciones web, donde ayuda a ahorrar espacio vertical y mantener una estética limpia y despejada.
Opciones de imagen
Otros ajustes
Filtros
El "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 popover, manteniendo la lista despejada y enfocada.
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.
Búsqueda
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.
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 y ajustando la posición del cuadro de búsqueda según sea necesario.
Establecer texto del marcador: Personaliza la barra de búsqueda añadiendo texto de marcador para guiar a los usuarios.
Posicionamiento de 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
El "Sección Al Hacer Clic" te permite definir qué ocurrirá cuando los usuarios interactúen con el componente lista al hacer clic en un elemento.
Aquí están las interacciones disponibles para el componente Lista:
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 Lista Avonni.
Apariencia y estilo
El componente Lista Avonni para Experience Cloud Sites ofrece opciones de personalización completas para su apariencia, permitiéndote alinearlo perfectamente con la estética de tu sitio.
Aquí están los atributos de estilo disponibles para la personalización en la Lista Avonni:
Borde: Ajusta el grosor, estilo y color del borde para definir o resaltar los límites de la lista.
Tamaño: Personaliza el tamaño general de la lista, incluyendo ancho y alto, para que se adapte a tu diseño.
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.
Encabezado: Estiliza la sección del encabezado, incluyendo título, subtítulo y avatares, para hacerla visualmente distintiva e informativa.
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.
Subtítulo del Encabezado: Estiliza el subtítulo bajo el título del encabezado para una descripción concisa o contexto sobre la lista.
Avatar del Encabezado: Incluye y estiliza un avatar o imagen en el encabezado para representación visual o branding.
Elemento: Ajusta la apariencia de los elementos individuales de la lista, incluyendo fondo, alineación y espaciado.
Alineación Vertical del Elemento: Controla la alineación vertical de los elementos de la lista para una apariencia coherente y pulida.
Encabezado del Elemento: Personaliza la apariencia de los encabezados de los elementos dentro de la lista para una segmentación clara y legibilidad.
Descripción del Elemento: Estiliza el texto de la descripción del elemento para proporcionar información detallada de manera visualmente atractiva.
Fondo del Elemento: Establece el color de fondo o la imagen para los elementos de la lista para diferenciar o resaltar entradas individuales.
Campos del Elemento: Estiliza los campos dentro de cada elemento, como cambiar la fuente o el color, para claridad y jerarquía visual.
Valor de los Campos del Elemento: Personaliza la presentación de los valores de los campos para una representación clara de los datos.
Etiqueta de los Campos del Elemento: Estiliza las etiquetas de los campos para distinguirlas de los valores y mejorar la legibilidad.
Botones de Paginación: Estiliza los botones de paginación para navegar por la lista, asegurando que sean fáciles de usar y coincidan con la estética de tu sitio.
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.
Última actualización
¿Te fue útil?