AX - Tabla de datos

Descripción general

AX - Tabla de datos es un componente de Experience Cloud que muestra tus registros de Salesforce en una tabla interactiva en las páginas de Experience Sites (anteriormente Community Cloud).

Úsalo para mostrar a los usuarios del portal conjuntos de datos filtrados con control total sobre las columnas, la ordenación, la búsqueda y la paginación. Obtén registros de cualquier objeto estándar o personalizado y permite que los usuarios externos vean, busquen e interactúen con datos relevantes para su cuenta o perfil.

Perfecto para portales de clientes que muestran el historial de pedidos, portales de socios que muestran el historial de pedidos, portales de socios que muestran registros compartidos, o sitios de autoservicio donde los usuarios necesitan encontrar y ver sus propios datos.

La Tabla de datos de Avonni es un Componente de datos reactivo

---

Primeros pasos

Usa este sencillo tutorial para aprender los conceptos básicos del componente Tabla de datos y comenzar a construir tus casos de uso.

---

Tutoriales

Crear un botón Exportar a en la Tabla de datos

Configuración de la Tabla de datos

Mostrar archivos de Salesforce CMS en una Tabla de datos

---

Conecta tu Tabla de datos con los datos de Salesforce

Fuente de datos

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

Tipo de fuente de datos	Descripción	Caso de uso
Fuente de datos manual	Introduce datos manualmente en la tabla de datos.	Ideal para datos no dinámicos, pruebas y demostraciones.
Consulta	Crea una consulta para completar automáticamente la tabla con datos de Salesforce.	Adecuado para conjuntos de datos dinámicos, en tiempo real y de gran tamaño.
Colección CMS	Muestra sin problemas tus colecciones CMS dentro de las tablas de datos para actualizaciones dinámicas del contenido.	Crea listas de recursos o feeds de noticias que se actualicen automáticamente.

En el modo Consulta, los datos se muestran en lotes de 25 registros para mantener un rendimiento óptimo del sitio.

Configuración de asignaciones de datos

Dale vida a tu tabla de datos en la sección de Asignaciones de datos definiendo y personalizando sus columnas.

Compartición del modelo de datos con la Tabla de datos de Avonni

Cumplimiento de las reglas de compartición de datos de Salesforce:

• Respeto a la configuración de la organización: Los componentes de Avonni cumplen totalmente con las configuraciones de compartición de datos y los ajustes de acceso existentes de tu organización de Salesforce.

• Política de no interferencia: Estos componentes no modifican ni afectan de ninguna manera tus reglas de compartición de datos preestablecidas.

• Visibilidad y acceso controlados: La capacidad de ver e interactuar con los registros a través de los componentes de Avonni está gobernada por la configuración de compartición y los permisos de usuario definidos por tu organización

Añadir columnas

• Haz clic en el botón "Añadir columnas" para seleccionar campos de tu fuente de datos que se mostrarán como columnas en la tabla de datos.

• Esta sección determina qué datos son visibles y cómo se organizan en tu tabla.

• Haz clic en una columna para acceder a todas las propiedades de esa columna específica.

Configuración de propiedades de columna

• Tipo de dato: Ajusta el tipo de visualización del campo (por ejemplo, texto, número, fecha) para garantizar una representación correcta de los datos.

• Hacer enlazable: Habilita el enlace de los datos de la celda a otros registros o URLs para una navegación rápida.

• Atributos de celda: Personaliza la alineación de las celdas y los iconos para crear una tabla más intuitiva y visualmente atractiva.

• Editable: Decide si una columna debe ser editable directamente dentro de la tabla.

• Filtrable y buscable: Habilita el filtrado y la búsqueda por columna para una gestión eficiente de los datos.

• Oculta: Elige ocultar ciertas columnas, útil para datos sensibles o menos relevantes.

• Ordenable: Permite a los usuarios ordenar los datos por la columna especificada.

• Ocultar acciones predeterminadas: Opta por ocultar las acciones predefinidas para una apariencia más limpia.

• Ajustar texto: Habilita el ajuste de texto para mejorar la legibilidad en columnas estrechas.

• Establecer ancho de columna: Especifica el ancho de cada columna para lograr un diseño equilibrado y organizado.

Añadir acciones de fila

Aquí tienes un tutorial interactivo guiado sobre cómo añadir acciones de fila a la Tabla de datos.

---

Otros ajustes de configuración

Configuración básica

Ocultar encabezado de la tabla

• Esta opción te permite eliminar el encabezado de la tabla para un aspecto más limpio y minimalista.

Ocultar columnas de casillas de verificación

• Habilita este ajuste para ocultar las columnas de casillas de verificación, normalmente usadas para la selección de filas en escenarios de múltiples acciones.

Mostrar columna de número de fila

• Activa esto para mostrar una columna que enumera cada fila, lo cual es útil para una referencia rápida de los datos.

Configuración del encabezado

Título y subtítulo

• Personaliza el encabezado con un título y un subtítulo para proporcionar contexto o información resumida sobre los datos de la tabla.

Nombre y tamaño del icono

• Mejora el encabezado con un icono, seleccionando su tipo y tamaño para darle énfasis visual.

Está unido

• Este ajuste determina si el encabezado se conecta visualmente con el cuerpo de la tabla, lo que afecta al diseño general.

Acciones del encabezado

• Configura acciones (agregar, eliminar o funciones personalizadas) que son accesibles directamente desde el encabezado de la tabla.

Botones de acción en el encabezado

• Implementa botones de acción en el encabezado de la tabla para añadir nuevos registros, exportar datos u otras acciones personalizadas, mejorando la interacción del usuario y la eficiencia.

Configura la interacción en el botón

Configura la interacción para cuando los usuarios presionen el botón de acción del encabezado en la sección "Al hacer clic". Para entender cómo funciona la interacción "Navegar", haz clic aquí para obtener más información.

Tutorial

Create an Export To button on the Data Table

Atributos de paginación

• Configura los ajustes de paginación, como el número de elementos por página y el estilo de paginación, para gestionar cómo se muestran y navegan los datos en tablas más grandes.

En el modo Consulta, los datos se muestran en conjuntos de 25 registros para mantener un rendimiento óptimo del sitio. Por lo tanto, configurar la paginación puede ser beneficioso.

Configuración del motor de búsqueda

• Marcador de posición: Establece un texto de marcador de posición para el cuadro de búsqueda para guiar a los usuarios sobre qué pueden buscar.

• Posición: Elige la posición del cuadro de búsqueda dentro del diseño de la tabla para una accesibilidad óptima.

• Valor de búsqueda predeterminado: Predefine un valor de búsqueda para filtrar los datos de la tabla al cargar.

Para mostrar el cuadro de búsqueda, al menos una columna debe estar marcada como "Buscable".

Al menos una columna debe establecerse como "Buscable" para mostrar el cuadro de búsqueda.

Configuración

🎛️ General

Nombre	Descripción
Ocultar encabezado de la tabla	Activa para ocultar el encabezado de la tabla
Ocultar columna de casillas de verificación	Elimina la columna usada para las casillas de verificación de selección de filas
Mostrar columna de número de fila	Mostrar una columna con el número de fila
Desfase del número de fila	Establece el número inicial para la numeración de filas
Selección máxima de filas	Limita el número máximo de filas que se pueden seleccionar
Suprimir barra inferior	Oculta la barra inferior normalmente utilizada para acciones y visualización de información
Mostrar número de elementos seleccionados	Muestra el conteo de elementos actualmente seleccionados
Solo lectura	Haz que la tabla no sea interactiva, sin permitir ediciones ni selecciones
Permitir edición en todas las columnas	Habilita la edición para todas las columnas
Permitir filtro en todas las columnas	Habilita las opciones de filtrado para todas las columnas
Permitir ajuste de texto en todas las columnas	Permite el ajuste de texto en todas las columnas
Ocultar acciones predeterminadas	Oculta acciones predefinidas como editar o eliminar
Modo de anchos de columna	Elige entre 'fixed' o 'auto' para la configuración del ancho de columna
Ancho máximo/mínimo de columna	Establece límites máximos y mínimos para los anchos de columna
Número máximo de líneas para ajuste de texto	Define el número máximo de líneas para el ajuste de texto en las celdas
Redimensionar columna deshabilitado	Desactiva la capacidad de cambiar el tamaño de las columnas
Paso de redimensionamiento	Establece el incremento para cambiar el tamaño de las columnas
Ordenado/Dirección de orden predeterminada	Elige 'asc' o 'desc' para la dirección de orden inicial
Mostrar valor ordenado por	Muestra qué columna se está utilizando actualmente para ordenar
Título/Subtítulo del encabezado	Establece un título y un subtítulo para el encabezado de la tabla
Nombre/Tamaño del icono del encabezado	Añade un icono al encabezado con tamaño personalizable
El encabezado está unido	Opta por conectar visualmente el encabezado con el cuerpo de la tabla
Ocultar/Deshabilitar acciones del encabezado	Controla la visibilidad y la interactividad de las acciones del encabezado
Botones de acciones visibles en el encabezado	Especifica qué botones de acción son visibles en el encabezado
Acciones del encabezado	Añade acciones personalizadas al encabezado de la tabla

⏩️ Paginación y búsqueda

🗄️ Filtrado y fuente de datos

🎨 Estilo

Ejemplos de casos de uso

Ejemplo 1: Lista de cuentas mejorada y contactos relacionados

Ofrece a tus socios una forma potente e intuitiva de explorar los datos de las cuentas, con búsqueda en línea, filtrado y un panel de contactos en vivo que se actualiza a medida que navegan.

---

Lo que lograrás

• Lista de cuentas buscable y filtrable: Permite a los socios encontrar rápidamente cuentas por nombre o sector utilizando los controles de búsqueda y filtro integrados.

• Registros vinculados en línea: Haz que los nombres de las cuentas sean clicables para que los socios puedan ir directamente a las páginas de detalle del registro.

• Panel de contactos relacionados en vivo: Muestra una segunda tabla que se actualiza automáticamente para mostrar los contactos vinculados a la cuenta seleccionada.

• Resultados paginados: Mantén la interfaz limpia y con buen rendimiento limitando los registros visibles por página.

---

Antes de comenzar

• Diseño de página de dos columnas: Asegúrate de que tu página de Lista de cuentas en Experience Builder ya tenga un diseño de dos columnas listo para recibir ambos componentes.

---

Cómo configurarlo

1

Añade la primera AX - Datatable a tu página

• Arrastra un componente AX - Datatable a la columna izquierda de tu página de Lista de cuentas en Experience Builder.

2

Elige una fuente de datos

• Selecciona Consultar cuentas como la fuente de datos para este componente.

3

Configura tus asignaciones de datos

• Añade las siguientes columnas: Name, Industry, Owner.FullName y Phone.

• Habilita Hacer enlazable en la columna Name para que los nombres de las cuentas se conviertan en enlaces clicables.

• Establece Industry como campo de filtro.

• Establece Nombre como campo de búsqueda.

4

Configura el componente

• Establece el Nombre de API en AccountsTable.

• Establece Selección máxima de filas en 1 para que solo se pueda seleccionar una cuenta a la vez.

• Habilita la paginación y establece el Número máximo de registros en 10.

5

Personaliza el encabezado

• Establece el Título del encabezado en Cuentas.

• Establece el Icono del encabezado en standard:account_info.

6

Añade la segunda AX - Datatable a tu página

• Arrastra un segundo componente AX - Datatable a la columna derecha de la misma página.

7

Elige una fuente de datos para la tabla de contactos

• Selecciona Consultar contactos como fuente de datos.

• Añade un filtro para que AccountId sea igual a {{AccountsTable.selectedRecord.Id}}, vinculando los resultados de esta tabla con la cuenta que esté seleccionada actualmente.

8

Configura tus asignaciones de datos

• Añade las siguientes columnas: Name y Title.

9

Configura el componente

• Establece el Nombre de API en relatedContactsTable.

10

Personaliza el encabezado

• Establece el Título del encabezado en Contactos relacionados.

• Establece el Icono del encabezado en standard:contact.

11

Previsualiza tu página

• Haz clic en Previsualizar en Experience Builder, selecciona una fila de cuenta y confirma que la tabla Contactos relacionados se actualiza dinámicamente para reflejar el registro seleccionado.

---

Enlaces

Tablas de datos vinculadas

---

Ejemplo 2: Oportunidades relacionadas en una página de cuenta

Ofrece a los usuarios de ventas una vista rápida de cada oportunidad vinculada a una cuenta, justo donde la necesitan, sin salir nunca de la página del registro.

---

Lo que lograrás

• Vista 360 del cliente más completa: Muestra los datos clave de las oportunidades directamente en la página de Cuenta para que los usuarios de ventas obtengan la imagen completa en un solo lugar.

• Páginas de registros completamente estructuradas: Crea páginas densas y ricas en información que eliminan la necesidad de cambiar entre pestañas u objetos para gestionar un pipeline.

---

Antes de comenzar

• Página de registro de cuenta con componentes existentes: Asegúrate de que tu página de registro de Cuenta en Experience Builder ya incluya los detalles del registro, un banner y un diseño de columnas listo para alojar el nuevo componente.

---

Cómo configurarlo

1

Añade la AX - Datatable a tu página de Cuenta

• Arrastra un componente AX - Datatable a tu página de registro de Cuenta en Experience Builder.

2

Elige una fuente de datos

• Selecciona Consultar oportunidades como la fuente de datos para este componente.

3

Configura tus asignaciones de datos

• Añade las siguientes columnas: Name, Stage y Amount.

• Habilita Hacer enlazable en la columna Name para que los nombres de las oportunidades se conviertan en enlaces clicables.

4

Configura el componente

• Establece el Nombre de API en RelatedOpportunities.

• Añade un filtro para que AccountId sea igual a {!Item.id}, limitando los resultados a la cuenta que se está viendo actualmente.

5

Personaliza el encabezado

• Establece el Título del encabezado en Oportunidades.

• Establece el Estilo del encabezado en Encabezado 2.

• Establece el Icono del encabezado en standard:opportunity.

6

Previsualiza tu página

• Haz clic en Previsualizar en Experience Builder y navega a un registro de Cuenta para confirmar que solo las oportunidades relacionadas con esa cuenta aparecen en la tabla.