AX - Contenedor de Chips

Resumen

AX - Contenedor de Chips es un componente de Experience Cloud que muestra una colección de etiquetas interactivas o chips en las páginas de Experience Sites.

Úsalo para mostrar elementos relacionados, categorías, habilidades, filtros o cualquier dato agrupado en un formato visual y compacto. Los usuarios pueden interactuar con los chips para seleccionar, eliminar o activar acciones. Configura el estilo y comportamiento de los chips en Experience Builder sin código.

Perfecto para selecciones de filtros, visualización de etiquetas, insignias de habilidades, listas de categorías o en cualquier lugar donde los usuarios del portal necesiten ver e interactuar con varios elementos relacionados de manera eficiente en el uso del espacio.

Configurando el Contenedor de Chips

Ajustes Generales

1. Línea Única

• Funcionalidad: Determina si los chips se muestran en una sola línea o pueden envolverse en varias líneas.

• Uso: Útil para mantener un diseño compacto o para acomodar un mayor número de chips.

2. Es Plegable

• Funcionalidad: Permite que el contenedor de chips sea plegable.

• Uso: Ideal para escenarios en los que deseas conservar espacio o gestionar la visibilidad de los chips.

3. Está Expandido

• Funcionalidad: Establece el estado inicial del contenedor de chips para que esté expandido.

• Uso: Útil cuando quieres que todos los chips sean visibles inmediatamente para el usuario al cargar la página.

Configuración de Fuente de Datos para el Contenedor de Chips de Avonni

El Contenedor de Chips de Avonni ofrece dos métodos principales para la integración de datos: Fuentes de Datos Manuales y por Consulta. Cada método tiene propósitos distintos y se adapta a diferentes escenarios, desde visualizaciones de datos estáticos hasta integración dinámica y en tiempo real desde registros de Salesforce.

Fuente de Datos Manual

• Funcionalidad:

  • Esta configuración permite la entrada directa y manual de datos en el Contenedor de Chips.

• Uso:

  • Esto es particularmente útil cuando los datos de los chips no se obtienen dinámicamente de registros de Salesforce.

  • Es ideal para configuraciones iniciales, entornos de pruebas o escenarios donde se prefiere datos estáticos.

Fuente de Datos por Consulta

• Funcionalidad:

  • La opción de consulta permite que el Contenedor de Chips obtenga y muestre datos desde registros de Salesforce automáticamente.

• Uso:

  • Perfecto para casos donde los chips deben llenarse dinámicamente con información actualizada desde Salesforce.

  • Facilita la reflexión de datos en tiempo real, lo que la convierte en una excelente opción para sitios activos y orientados a datos.

Mapeos de Datos para la Fuente de Datos por Consulta

El proceso de mapeo de datos es vital para la precisión y relevancia de los datos mostrados en el Contenedor de Chips.

• Proceso:

  • Implica alinear y mapear cuidadosamente los datos de los campos de Salesforce con los atributos correspondientes en el Contenedor de Chips. Este paso asegura que los datos se obtengan y presenten de manera significativa y organizada.

• Resultado:

  • Un mapeo de datos adecuado garantiza que los datos recuperados de Salesforce se representen correctamente en los chips, asegurando visualizaciones significativas y contextualmente precisas.

Configuraciones de estilo

Resumen

Personalizar el estilo del componente Contenedor de Chips de Avonni es crucial para alinear su apariencia con la estética general de tu sitio de Salesforce Experience Cloud. El componente ofrece una variedad de opciones de estilo que permiten una personalización detallada, asegurando tanto la funcionalidad como el atractivo visual.

Opciones de Espaciado

Inicio/Fin de Bloque del Contenedor de Chips, Inicio/Fin en Línea:

• Estos ajustes controlan el espacio alrededor del contenedor de chips en orientaciones de bloque (vertical) y en línea (horizontal).

• Ajustar estos valores puede ayudar a crear el espacio visual deseado entre los chips y otros elementos, mejorando la legibilidad y la coherencia del diseño.

Estilizado del Contenedor de Chips

• Fondo, Color de Borde, Tamaño, Estilo y Radio:

  • Personaliza el color de fondo para complementar o contrastar con el tema del sitio.

  • Las opciones de personalización del borde (color, tamaño, estilo y radio) ofrecen control sobre el contorno del contenedor, permitiendo que destaque o se integre perfectamente con otros elementos de la página.

Estilizado Individual de los Chips

• Tamaño de Fuente de la Etiqueta, Peso, Estilo; Tamaño de Borde, Estilo, Radio; Altura de Línea:

  • Ajusta la tipografía de las etiquetas de los chips para lograr claridad y alineación con la marca.

  • Los ajustes de borde y altura de línea mejoran el impacto visual de cada chip, haciéndolos más distintivos y más fáciles de interactuar.

Personalización del Avatar dentro de los Chips

• Tamaño de Borde, Color, Estilo; Color/Peso de Fuente de las Iniciales, Color de Fondo del Ícono, Ajuste del Objeto de la Imagen:

  • Los avatares dentro de los chips se pueden estilizar para que coincidan con el diseño del sitio, con opciones para ajustar las propiedades del borde y las características de la fuente de las iniciales.

  • Ajustes de 'Image Object Fit' como 'fill', 'contain', 'cover', etc., son cruciales para asegurar que las imágenes de avatar se muestren correctamente sin distorsión.

Ajustes de Estilo por Variante

• Personalizable Según la Variante Seleccionada:

  • El componente Contenedor de Chips ofrece estilos basados en variantes, lo que significa que se pueden aplicar diferentes estilos según la variante de chip seleccionada.

  • Esta función permite una mayor flexibilidad y creatividad en el diseño, asegurando que cada variante de chip pueda tener una apariencia única pero coherente dentro del contenedor.