I’ve been working on multiple client projects where we needed to automatically import CSV files and display them on a site and I couldn’t find a handy existing solution. Our typical scenarios include tables that changed daily like court data or stock information. With these and other possibilities in mind I came up with an idea to create a universal viewer module for different types of files. Basically this is a View module but for files. I started the Viewer module by adding support for CSV and later for XLSX/XLS and PDF.
Source and Viewer for the Solve
The idea was to have two types of entities. First is the Source and the second is the Viewer. The Source would store the reference to imported files with some additional metadata and information about the source plugin. The Viewer entity stores information about viewer plugins, settings and configuration metadata.
Sometimes you need to preprocess data in CSV cells before displaying data; for that purpose I added the support cell plugin and for now the module includes basic plugins such as Money, Number, Image, Link, etc.
The ability to import files from different sources was also an important requirement and for that I added support for SFTP, FTP, Path, URL and manual upload plugins.
The Viewer plugin is the plugin that displays content and provides settings and configuration options. The main plugins that come with the module are support for Chart.js, ApexCharts, Datatables, FooTables and many more. I also added support for grouping different views in Tabs, Vertical Tabs, and Accordions.
Working with Decoupled / Next.js for Drupal
The data from the Viewer reference fields could be used in decoupled (e.g. Next.js for Drupal) sites by making GET requests to the REST endpoint with the viewer ID (with appropriate permissions).
We’re always working at Chapter Three to improve backend administration (whether for developers or content editors), so I tried to make settings, filter and configuration interfaces very easy and intuitive to use. Some screenshots of the Viewer module are below.
New viewer form.
New Viewer Source form.
Table plugin viewer configuration form.
Viewer data filter form. Provides a way to filter data by columns.
Configuration screen for Tab-based plugins. This includes Accordions.
Line/Bar chart-based data configuration form. Comes with ability to add datasets and set colors dynamically.
Preview charts (example).
Datatables preview (example).