AX - Tabla de datos

Resumen

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. Extrae 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 Avonni Data Table es una Componente de datos reactivo

---

Primeros pasos

Usa este sencillo tutorial para aprender los conceptos básicos del componente Data Table y empezar a crear tus casos de uso.

---

Tutoriales

Crear un botón Exportar a en la Data Table

Configuración de la Data Table

Mostrar archivos de Salesforce CMS en una Data Table

---

Conecta tu Data Table a los datos de Salesforce

Fuente de datos

La sección de Origen de datos es donde conectas la Avonni Data Table con tus datos de Salesforce. Tienes dos opciones.

Tipo de origen de datos	Descripción	Caso de uso
Origen de datos manual	Introduce manualmente los datos en la tabla de datos.	Ideal para datos no dinámicos, pruebas y demostraciones.
Consulta	Crea una consulta para rellenar 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 de CMS	Muestra sin problemas tus colecciones de CMS dentro de las Data Tables para actualizaciones de contenido dinámico.	Crea listas de recursos o fuentes 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

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

Compartición del modelo de datos con Avonni Data Table

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

• Respeto por 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á regida 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 origen de datos y mostrarlos 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.
• Convertir en enlace: Activa el enlace de los datos de la celda a otros registros o URL para una navegación rápida.
• Atributos de celda: Personaliza la alineación y los iconos de la celda 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: Activa el filtrado y la búsqueda por columna para una gestión eficiente de los datos.
• Oculto: Elige ocultar ciertas columnas, útil para datos sensibles o menos relevantes.
• Ordenable: Permite que los usuarios ordenen los datos por la columna especificada.
• Ocultar acciones predeterminadas: Opta por ocultar las acciones predefinidas para un aspecto más limpio.
• Ajustar texto: Activa 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 Data Table.

---

Otros ajustes de configuración

Ajustes básicos

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

• Activa 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 que resulta ú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 (añadir, eliminar o funciones personalizadas) que estén directamente accesibles 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 y la eficiencia del usuario.

Configura la interacción en el botón

Configura la interacción 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 se 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

• Texto de marcador: 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 lograr una accesibilidad óptima.
• Valor predeterminado de búsqueda: 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 marcarse 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	Alterna para ocultar el encabezado de la tabla
Ocultar columna de casilla de verificación	Eliminar la columna utilizada para las casillas de selección de filas
Mostrar columna de número de fila	Mostrar una columna con el número de fila
Desplazamiento del número de fila	Establecer el número inicial para la numeración de filas
Máxima selección de filas	Limitar el número máximo de filas que se pueden seleccionar
Suprimir barra inferior	Ocultar la barra inferior, normalmente utilizada para acciones y visualización de información
Mostrar número de elementos seleccionados	Mostrar el recuento de elementos seleccionados actualmente
Solo lectura	Hacer que la tabla no sea interactiva, sin permitir ediciones ni selecciones
Permitir edición en todas las columnas	Activar la edición para todas las columnas
Permitir filtro en todas las columnas	Activar las opciones de filtrado para todas las columnas
Permitir ajuste de texto en todas las columnas	Permitir el ajuste de texto en todas las columnas
Ocultar acciones predeterminadas	Ocultar acciones predefinidas como editar o eliminar
Modo de anchos de columna	Elige entre 'fijo' o 'automático' para el ajuste del ancho de columna
Ancho máximo/mínimo de columna	Establecer límites máximos y mínimos para los anchos de columna
Máximo de líneas para ajuste de texto	Definir el número máximo de líneas para el ajuste de texto en las celdas
Redimensionar columna desactivado	Desactivar la capacidad de redimensionar columnas
Paso de redimensionado	Establecer el incremento para el redimensionado de columnas
Dirección de ordenación / ordenación predeterminada	Elige 'asc' o 'desc' para la dirección de ordenación inicial
Mostrar valor ordenado por	Mostrar qué columna se está utilizando actualmente para la ordenación
Título/leyenda 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/desactivar acciones del encabezado	Controla la visibilidad y la interactividad de las acciones del encabezado
Botones de acción visibles del encabezado	Especifica qué botones de acción son visibles en el encabezado
Acciones del encabezado	Añadir acciones personalizadas al encabezado de la tabla

⏩️ Paginación y búsqueda

🗄️ Filtrado y origen 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 mientras navegan.

---

Lo que lograrás

• Lista de cuentas buscable y filtrable: Permite que los socios encuentren rápidamente cuentas por nombre o sector usando los controles integrados de búsqueda y filtro.
• Registros enlazados 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 eficiente limitando los registros visibles por página.

---

Antes de empezar

• 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 un origen de datos

• Selecciona Consultar cuentas como origen de datos para este componente.

3

Establece tus asignaciones de datos

• Añade las siguientes columnas: Name, Industry, Owner.FullName y Phone.
• Activar Convertir en enlace en la columna Name para que los nombres de las cuentas se conviertan en enlaces clicables.
• Establece Sector como campo de filtro.
• Establece Nombre como campo de búsqueda.

4

Configura el componente

• Establece el Nombre de API en AccountsTable.
• Establece Máxima selección de filas en 1 para que solo se pueda seleccionar una cuenta a la vez.
• Activa la paginación y establece el Número máximo de registros en 10.

5

Personalizar el encabezado

• Establece el Título del encabezado en Accounts.
• 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 un origen de datos para la tabla de contactos

• Selecciona Consultar contactos como fuente de datos.
• Añade un filtro para que AccountId igual a {{AccountsTable.selectedRecord.Id}}, vinculando los resultados de esta tabla a la cuenta que esté seleccionada actualmente.

8

Establece tus asignaciones de datos

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

9

Configura el componente

• Establece el Nombre de API en relatedContactsTable.

10

Personalizar 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 Vista previa en Experience Builder, selecciona una fila de cuenta y confirma que la tabla de 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 la cuenta para que los usuarios de ventas tengan la الصورة completa en un solo lugar.
• Páginas de registros totalmente apiladas: Crea páginas densas y ricas en información que eliminan la necesidad de saltar entre pestañas u objetos para gestionar un pipeline.

---

Antes de empezar

• 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 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 un origen de datos

• Selecciona Consultar oportunidades como origen de datos para este componente.

3

Establece tus asignaciones de datos

• Añade las siguientes columnas: Name, Stage y Amount.
• Activar Convertir en enlace 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 igual a {!Item.id}, limitando los resultados a la cuenta que se está viendo actualmente.

5

Personalizar 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 Vista previa en Experience Builder y navega a un registro de cuenta para confirmar que solo aparezcan en la tabla las oportunidades relacionadas con esa cuenta.