Viewer
Importa y muestra archivos CSV, XLSX/XLS y PDF como tablas interactivas, gráficos, calendarios y otras visualizaciones en Drupal.
viewer
Install
composer require 'drupal/viewer:^1.0'
Overview
El módulo Viewer proporciona una solución integral para importar, procesar y mostrar tipos de archivos estructurados y no estructurados, incluyendo archivos CSV, XLSX/XLS y PDF. Permite a los creadores de contenido presentar datos de diversas fuentes directamente en sus sitios Drupal sin necesidad de entrada manual de datos.
El módulo cuenta con una arquitectura de plugins flexible que soporta múltiples tipos de visualización, incluyendo tablas (con integración de Datatables y FooTable), varios tipos de gráficos (Chart.js y ApexCharts), vistas de calendario (FullCalendar) y vistas previas de PDF (PDF.js). Los datos pueden importarse desde múltiples fuentes, incluyendo cargas manuales de archivos, URLs remotas, servidores FTP/SFTP o rutas de archivos locales.
Los visores pueden integrarse en el sitio mediante campos de referencia, bloques o integración con CKEditor5. El módulo soporta importaciones automatizadas de datos vía cron con programaciones configurables, filtrado de datos con múltiples opciones de criterios, conversores de valores de celdas y notificaciones (correo electrónico y Slack) para actualizaciones del estado de importación.
Features
- Importa archivos CSV, XLSX/XLS y PDF desde múltiples fuentes (carga, URL, FTP, SFTP, ruta de archivo)
- Muestra datos como tablas con múltiples opciones de bibliotecas de tablas (tabla básica, Datatables, FooTable)
- Crea varios tipos de gráficos usando Chart.js (línea, barra, circular/dona, dispersión/burbuja, mixto)
- Crea varios tipos de gráficos usando ApexCharts (línea, barra, circular/dona, dispersión, burbuja, mapa de árbol, velas, mixto)
- Integración de vista de calendario con FullCalendar para datos basados en fechas
- Vista previa de PDF usando la biblioteca PDF.js
- Organiza múltiples visores usando diseños de pestañas, pestañas verticales o acordeón
- Vista de hoja de cálculo para archivos XLSX con soporte de pestañas de hojas de trabajo
- Filtra datos usando más de 15 criterios de filtrado (igual a, mayor que, contiene, comparaciones de fechas, regex, etc.)
- Conversores de valores de celdas (enlaces, formato monetario, porcentaje, imágenes, gráficos Peity en línea)
- Configura la visibilidad de columnas, encabezados y orden mediante arrastrar y soltar
- Importaciones automatizadas vía cron con frecuencias configurables (cada hora, diario, semanal, mensual)
- Notificaciones de importación vía correo electrónico y webhooks de Slack
- Tipo de campo de referencia de visor para adjuntar visores al contenido
- Block para colocar visores en cualquier lugar del sitio
- Integración con CKEditor5 para incrustar visores en campos de texto enriquecido
- Endpoint de REST API para obtener datos del visor como JSON
- Comando Drush para ejecutar importaciones
Use Cases
Mostrar informes financieros
Importa datos financieros trimestrales desde archivos XLSX y muéstralos como gráficos interactivos. Usa una fuente SFTP para obtener automáticamente informes de un servidor seguro diariamente. Crea múltiples visualizadores ApexCharts (gráfico de barras para ingresos, gráfico de líneas para tendencias) y organízalos en pestañas. Configura notificaciones para alertar al equipo financiero vía Slack cuando se importen nuevos datos.
Catálogo de productos desde CSV
Muestra un catálogo de productos desde un archivo CSV exportado de un sistema ERP. Usa el visualizador Datatables para una tabla con búsqueda, ordenación y paginación. Configura convertidores de celdas para mostrar imágenes de productos en línea y formatear precios como moneda. Configura importaciones cada hora desde una URL para mantener los datos actualizados.
Calendario de eventos
Crea un calendario de eventos desde datos CSV con títulos y fechas de eventos. Usa el visualizador FullCalendar para mostrar eventos en una vista de calendario mensual. Configura los mapeos de columnas para título, fecha de inicio y fecha de fin. Importa datos desde una URL de exportación CSV de Google Sheets compartida.
Visualizaciones de datos incrustadas en artículos
Permite a los editores de contenido incrustar visualizaciones de datos en el contenido de artículos usando CKEditor5. Habilita el filtro de texto y el botón de la barra de herramientas de Viewer. Los editores pueden insertar cualquier visualizador configurado directamente en el cuerpo del artículo, haciendo que la narrativa de datos sea fluida.
Panel de control con múltiples fuentes de datos
Crea una página de panel de control usando múltiples Block de Viewer. Muestra datos de ventas como un gráfico de barras, tráfico del sitio web como un gráfico de líneas y niveles de inventario en una tabla. Cada visualizador puede tener su propia fuente de datos y programación de actualización, todo mostrado junto en una sola página.
Vista previa de documentos PDF
Muestra documentos PDF (contratos, informes, manuales) directamente en las páginas de contenido. Sube archivos PDF y configura el visualizador PDF.js para vista previa en línea. Los usuarios pueden ver documentos sin necesidad de descargarlos.
Tips
- Usa los visualizadores Tabs o Accordion para organizar múltiples visualizaciones relacionadas en una sola página sin abrumar a los usuarios
- Las etiquetas de caché apropiadas se aplican automáticamente; los visualizadores se actualizan cuando cambian los datos de origen
- Para conjuntos de datos grandes, usa Datatables con paginación del lado del servidor habilitada para mejor rendimiento
- Usa reemplazo de tokens en fuentes URL/Path (por ejemplo, [date:custom:Y-m-d]) para importaciones de archivos basadas en fechas
- Configura notificaciones de Slack para importaciones fallidas para detectar problemas en el flujo de datos tempranamente
- Previsualiza los visualizadores usando la vista previa de iframe antes de incrustarlos para verificar la visualización de datos
- Usa convertidores de celdas para mejorar la presentación de datos sin modificar los archivos de origen
- Para datos financieros, combina ApexCharts Candlestick con filtros de fecha para análisis de series temporales
Technical Details
Admin Pages 10
/admin/structure/viewers
Página principal de listado que muestra todas las entidades Viewer creadas. Desde aquí puede crear nuevos visualizadores, editar los existentes, configurar ajustes, gestionar filtros, previsualizar visualizadores, habilitar/deshabilitar visualizadores y eliminar visualizadores. Cada visualizador muestra su nombre, estado, fuente asociada y tipo de visualizador.
/admin/structure/viewer-source
Gestionar entidades Viewer Source. Las fuentes definen de dónde provienen los datos (carga, URL, FTP, SFTP, ruta de archivo) y qué tipo de archivo es (CSV, XLSX, PDF). Las fuentes pueden compartirse entre múltiples visualizadores.
/admin/structure/viewers/{viewer}/edit
Editar las propiedades básicas del visualizador incluyendo nombre, estado y fuente asociada.
/admin/structure/viewers/{viewer}/settings
Configurar ajustes de visualización específicos del plugin. Los ajustes varían según el tipo de visualizador pero comúnmente incluyen título, subtítulo, opciones de visualización de última importación, paginación y opciones específicas de gráficos.
/admin/structure/viewers/{viewer}/configuration
Configurar ajustes a nivel de columna incluyendo orden de columnas (mediante arrastrar y soltar), sobrescrituras de encabezado, visibilidad, tratamiento de columnas vacías y convertidores de valores de celda.
/admin/structure/viewers/{viewer}/filters
Configurar filtros de datos para limitar qué filas se muestran. Admite múltiples criterios de filtro que pueden combinarse.
/admin/structure/viewer-source/{viewer_source}/edit
Editar propiedades de la fuente incluyendo nombre y frecuencia de importación (para fuentes habilitadas con cron).
/admin/structure/viewer-source/{viewer_source}/schedule
Configurar la próxima hora de importación programada para importaciones automatizadas.
/admin/structure/viewer-source/{viewer_source}/notifications
Configurar notificaciones para eventos de importación. Admite notificaciones tanto por correo electrónico como por webhook de Slack.
/admin/structure/viewer-support
Página de soporte con información sobre el módulo, enlaces a documentación y opciones de soporte.
Permissions 13
Drush Commands 1
drush viewer:import
Ejecuta importaciones automatizadas de Viewer a través de Drush. Procesa la cola de importaciones programadas.
Troubleshooting 6
Instala el adaptador Flysystem SFTP requerido: composer require league/flysystem-sftp-v3
Instala la biblioteca PhpSpreadsheet: composer require phpoffice/phpspreadsheet
Verifica que el endpoint de la REST API sea accesible. Comprueba que el visualizador tiene datos verificando la fuente. Asegúrate de que las bibliotecas JavaScript se estén cargando (revisa la consola del navegador en busca de errores).
Verifica que cron esté configurado y ejecutándose. Comprueba que la fuente tenga una frecuencia establecida (no 'Disabled'). Usa 'drush viewer:import' para activar importaciones manualmente y verificar errores.
Verifica que los ajustes de notificación estén configurados en la fuente. Para correo electrónico, comprueba que el sistema de correo esté configurado (considera usar el módulo SMTP). Para Slack, verifica que la URL del webhook sea correcta y que la aplicación de Slack tenga los permisos adecuados.
Habilita el filtro Viewer en la configuración de tu formato de texto. Añade el botón Viewer a la configuración de la barra de herramientas de CKEditor5. Limpia las cachés después de los cambios de configuración.
Security Notes 4
- Los permisos 'administer viewer' y 'administer viewer source' están marcados como restringidos y solo deben otorgarse a administradores de confianza
- Las contraseñas SFTP se cifran antes de almacenarse usando el cifrado de Drupal
- La REST API respeta los permisos de usuario y los contextos de caché
- Las subidas de archivos se validan contra las extensiones permitidas según el tipo de visualizador