Summary
DataLaVista™ is a lightweight, client-side reporting and dashboard toolkit that brings the full power of SQL directly to your browser, allowing you to build high-performance visualizations without the need for expensive server-side licenses or complex backend infrastructure.
Initially developed at the Eisenberg Family Depression Center to fill a critical reporting gap when traditional BI tool licenses were unavailable, the tool has since been beta-tested across multiple University of Michigan and Michigan Medicine departments and released as open-source software. While engineered to dominate SharePoint List items with pure JavaScript widgets, DataLaVista™ is a framework-agnostic survivor that terminates data silos across REST services, JSON, Excel, and CSV files. This article covers how to install DataLaVista™, connect to data sources, build queries, design dashboards, and publish finished reports.
Overview
What It Does and Why Use It
DataLaVista™ lets you connect to your data, query and reshape it using visual query builders or SQL, build interactive visualizations, and publish a shareable dashboard — all without leaving the browser. There is no server to stand up, no per-user license to procure, and no IT ticket required. Because everything runs client-side, data is processed locally using your own browser as the compute engine, while permissions to access remote data are handled by SharePoint or the application that is embedding it. This makes it particularly well-suited for smaller or exploratory reports, data discovery, and — above all — reporting on SharePoint list data, which is notoriously difficult to work with in traditional BI tools.
Key advantages:
- Zero server footprint. 100% JavaScript. Your browser is the engine. No server configuration, no backend infrastructure. It can even run locally on your computer.
- Full SQL support. Write and run SQL queries against flat files and SharePoint lists as if they were a relational database — directly in the browser.
- Tight SharePoint integration. When deployed inside a SharePoint site, DataLaVista™ connects directly to SharePoint lists using the current user's session. Complex SharePoint field types (lookups, people fields, URLs) are handled automatically. Publishing a finished dashboard back to a SharePoint document library is built into the workflow.
- Single-file deployment. The entire application is a single HTML/JavaScript file. Embed it in SharePoint using a REACT Modern Script Editor webpart, drop it into another web app, or run it locally on your computer — no build step, no installer.
- Multiple data source types. CSV, JSON, XML, SQLite, and Excel are all supported out of the box, with more planned.
- Secure by design. Data never leaves your environment. Permissions for accessing data sources and published reports are handled entirely by the platform hosting DataLaVista (e.g., SharePoint).
The Four-Step Approach: Query → Design → Preview → Publish
Every DataLaVista™ dashboard follows the same straightforward workflow:
- Query — Connect to your data sources, pick tables and fields, join and reshape your data using the visual query builder or the SQL editor, and verify the results in the query preview.
- Design — Build the visual layout of your dashboard by mapping fields from your query output to widgets, charts, tables, and filters.
- Preview — Review the dashboard as end users will see it. Test filters, verify numbers, and confirm the layout before publishing.
- Publish — Save the finished dashboard configuration as a
.json file by publishing it to a SharePoint document library or downloading it locally. Share the generated link with others.
This tight loop is intentional. Getting the query right first and shaped into a flat table means the design and preview steps are faster, and the published report is more reliable. It also means you can swap out the underlying data sources while keeping the existing dashboard design.
Installation
There is nothing to install in the traditional sense. DataLaVista™ is a single, self-contained HTML/JavaScript file. Depending on how you plan to use it, deployment looks like one of the following:
Live Demo
Inside a SharePoint Online Page
- Ensure the React Modern Script Editor app is installed on your SharePoint site. If it is not available, contact your site administrator.
- Create a new SharePoint page using the Modern Script Editor template. Use DataLaVista as the page title.
- In the Modern Script Editor web part, click Markup, then click the { } button to open the code editor.
- Copy and paste the full contents of
DataLaVista.html into the editor.
- Save and refresh the page.
https://code.depressioncenter.org/datalavista/presentations/sharepoint-installation-1.mp4
Note on Content Security Policy (CSP) restrictions: If your SharePoint tenant has CSP restrictions that block inline JavaScript, use DataLaVista-nojs.html instead. Update the script tag near the top of that file to point to /SiteAssets/datalavista.js, then upload datalavista.js to your site's /SiteAssets directory.
Inside Another Web Application or Standalone
For other web platforms, add the HTML/JavaScript using whatever method is available for embedding custom scripts or pages. Alternatively, upload DataLaVista.html to your web server and reference it in an <iframe> tag, or open it directly in a browser to run it standalone with local files.
The latest version and setup instructions are always available in the DataLaVista™ GitHub repository.
Query Tab
Start Here
The Query tab is the foundation of every dashboard you build in DataLaVista™. All visual widgets require a single, flat-table view as their input — and this tab is where you define what that table looks like. Before designing any charts or filters, you need to connect to your data, join and reshape it as needed, and verify the results in the query preview. Think of this tab as your data modeling environment. If something looks wrong here, it will look wrong in every widget downstream — so it is worth getting right before moving on to Design.
Connect Popup and Data Source Options
Click the Connect + Load button to open the connection popup. DataLaVista supports the following data source types:
- SharePoint Lists — Available when running inside a SharePoint site. DataLaVista will automatically detect the site URL and populate the connection in a few seconds. Access is governed by your existing SharePoint permissions; no additional credentials are stored.
- Remote Files (URL or SharePoint Document Library) — Connect to a file hosted at any web-accessible URL, including files in a SharePoint document library. Click the "Add to Queue" button after each file, then click Connect. If a remote file won't load, the most common causes are permissions or browser CORS restrictions (the remote host must allow cross-origin requests from the page hosting DataLaVista).
- Upload Files — Upload a file directly from your computer. Click the "Add to Queue" button after each file, then click Connect. Uploaded data is saved with the report configuration, making the report self-contained and portable. Keep in mind that this can increase the size of the report
.json file and that the data snapshot will be included if you share the report.
Supported file types:
| Format |
Extension(s) |
| CSV |
.csv |
| JSON |
.json |
| XML |
.xml |
| SQLite |
.sqlite, .db |
| Excel |
.xlsx, .xls |
Note on on-premises databases: Due to JavaScript browser restrictions (networking, drivers, authentication), there is currently no direct connection to on-premises databases. An API proxy option is planned for a future release — this would require a server-side component, Azure Function, or hosted application to broker the connection.
Synthetic Fields
Real-world data — especially from SharePoint — is often nested, multi-valued, or structured in ways that make it difficult to query directly. To solve this, DataLaVista™ automatically generates synthetic fields alongside your original data. These derived fields are added transparently so you can write clean SQL against them without any manual parsing.
Here is how different field types are handled:
- SharePoint multi-select lookup fields — The original field contains semicolon-separated display values. A
*Ids field contains the corresponding semicolon-separated IDs. A *Data field contains the full expanded object data, accessible using the -> operator in SQL queries and used by auto-joins.
- SharePoint URL fields — The original field contains the actual URL. A
*Label field contains the display text.
- Arrays — DataLaVista attempts to guess the best element for a semicolon-separated list representation. If it cannot determine the appropriate element, it falls back to a JSON string representation. A
*Data field is always included so you can still query the raw structure.
- SharePoint Person fields, single-select lookup fields, and JSON objects — These are expanded automatically. Each element within the object is added as a new field using the naming pattern
fieldName + elementName. For example, a Person field named Requester might expand into RequesterTitle, RequesterEmail, RequesterDepartment, and so on — depending on what properties are present in the data.
Tables & Fields Panel
The Tables & Fields panel (left sidebar) displays all connected data sources, their tables, and the fields within each table. You can rename data sources, tables, and individual fields directly from this panel. Renaming here does not change the underlying source data — it only affects how items appear within DataLaVista™, so your query results and dashboard labels can use cleaner, more meaningful names.
Query Builder (Basic and Advanced)
DataLaVista includes a visual query builder for users who prefer not to write SQL directly. Both a basic and an advanced mode are available.
- Auto-joins — DataLaVista™ can automatically detect and create joins based on SharePoint lookup column relationships, SQLite foreign key relationships, and other heuristics. More intelligent join suggestions are planned for future releases.
- Trash can — Remove fields, joins, or filters quickly without hunting through the full query definition. As a best practice, remove any fields you do not need before rendering the dashboard — this reduces memory usage and improves performance in the browser.
- Properties / Filters / Group / Sort / Row Count panel — Configure field-level properties, apply filters, set grouping and sorting, and limit the number of rows returned. Use this panel to keep your query focused and readable, especially before publishing.
SQL Editor
For users who prefer to write SQL directly, the SQL editor provides full SQL support entirely in the browser — no server required. You can write custom SELECT statements, complex aggregations, subqueries, and multi-table joins. The editor includes auto-suggestions for table names, field names, synthetic fields, and SQL keywords based on your connected data sources. Nested or expanded data can be accessed using the -> operator where the underlying SQL engine supports it.
Query Results Preview
Always review the query results preview before switching to the Design tab. This data grid shows exactly what will be passed to your dashboard widgets — it is the "truth" that all your charts, filters, and tables will be built on. Check it carefully: look for unexpected nulls, row count inflation from bad joins, incorrect data types, or missing fields. Most dashboard problems are query problems in disguise, and it is much easier to fix them here than after you have built out the visuals.
Design Tab
The Design tab is where your data comes to life. Because the entire design surface is built on top of the flat-table view produced in the Query tab, you can focus entirely on visualization and layout — there is no additional data modeling to do here.
Add widgets, charts, tables, metric cards, HTML elements, and filters to your canvas and arrange them into your desired layout. Each widget is configured by mapping fields from your query results to the visual's requirements — dimensions (categories, labels) and measures (numeric values to aggregate). Aggregations like sum, average, and count can be applied directly within widget settings.
Preview Dashboard Tab
The Preview Dashboard tab strips away the designer interface and renders the dashboard exactly as end users will see it. This is a required step before publishing — do not skip it. Use this view to verify that global filters affect all linked widgets correctly, that numbers and chart values match your expectations from the query preview, that tool tips and interactivity work as intended, and that the layout holds up at the screen sizes typical for your users.
Spot-checking a few key numbers against a known source (e.g., a SharePoint list view or an Excel export) at this stage is well worth the time.
Download Underlying Data Option
From the preview, you can download the underlying dataset as a CSV file. This is useful for validating what a chart is actually plotting, sharing a quick data extract for review, or answering the inevitable question of "where did that number come from?" after publishing.
Generate Report Tab
Publish to SharePoint or Download
When your dashboard has been previewed and is ready to share, the Generate Report tab gives you two options:
- Publish to a SharePoint document library — Uploads the report configuration directly to the library of your choice. A shareable link is generated automatically upon publishing. This is the most seamless option for sharing with colleagues, since the report and its data sources are both governed by existing SharePoint permissions.
- Download report .json configuration — Saves the report configuration as a
.json file to your local machine. This is useful for development, backup, version control, or moving a report between environments. Note that this file contains the dashboard definition (queries, layout, connections) — not the raw underlying data, unless you used the Upload Files option.
Viewing a Published Dashboard
To view a published dashboard, pass the URL of the report .json file to DataLaVista™ using the ?report= URL parameter:
https://<your-site>/datalavista.html?report=https://<your-site>/<library>/MyDashboard.json
A ready-to-use share link is generated automatically when you publish, so you can copy and paste it directly into an email or Teams message without constructing the URL manually.
Optional: Make report files clickable in SharePoint. The repository's /src folder includes optional SharePoint column formatting that can be applied to a document library. When applied, .json report files in that library become clickable links that open directly in DataLaVista, rather than prompting a file download. This makes browsing and launching reports from SharePoint feel native.
Permissions
DataLaVista™ does not layer any additional permission model on top of your existing environment. Access to the report .json file is controlled by the permissions on the document library or location where it is stored. Access to the underlying data sources (SharePoint lists, document libraries, remote files) is controlled by those sources' own permissions. If a user can open the DataLaVista™ page and reach the data sources referenced in the report, they can view the dashboard. If not, those data sources simply won't load for them.
Architecture
Data Flow
DataLaVista™ processes data through a multi-stage in-browser pipeline designed to keep each dashboard widget fast and independent:
Raw Table → Views → Query → Materialized View → View with Global Filters → Query per Widget
- Raw Table — Source data as loaded from the connected data source (SharePoint list, remote file, or upload).
- Views — Virtual representations of the raw tables, including all synthetic fields generated for complex data types.
- Query — The user-defined SQL query (from the Query Builder or SQL Editor) that joins, filters, renames, and reshapes the data into a flat table.
- Materialized View — The result of the query, stored in memory. This is the dataset that powers the dashboard.
- View with Global Filters — The materialized view with any dashboard-level global filter selections applied dynamically.
- Query per Widget — Each widget on the dashboard runs its own lightweight query against the filtered view to aggregate and render its specific visualization.
Deployment Model
DataLaVista™ is distributed as a single HTML/JavaScript file with no external dependencies to install or serve. It can be embedded inside SharePoint or any other web application, run from a local file on a desktop computer with local files, or hosted on any static web server. There are no backend services, databases, or server-side APIs required.
Notes
- DataLaVista™ does not aim to replace enterprise BI tools entirely. It is designed to be fast and easy to deploy, making it ideal for smaller reports, exploratory data analysis, quick dashboards, and reporting on SharePoint list data where heavier tools may be overkill or unavailable.
- Because data processing happens in the user's browser, performance depends on the end-user's device and the size of the dataset. Use the Query tab to filter out unneeded rows and fields before rendering the dashboard. Preview early and often.
- Direct connections to on-premises databases are not supported at this time due to JavaScript browser restrictions. An API proxy option is planned for a future release (this would require a server or application).
- Remote files that fail to load are often a CORS issue — the remote host must allow cross-origin requests from the page hosting DataLaVista™. Using a SharePoint document library (same tenant) avoids this.
- DataLaVista™ is an open-source project under active development. For the latest updates, bug fixes, and roadmap, see the GitHub repository.
Related Resources
Acknowledgement
DataLaVista™ was written by Gabriel Mongefranco, Jeremy Gluskin, and Shelley Boa, with input from the Automators Anonymous™ community of practice. The software is freely available under the terms of the GNU General Public License v3.0 or later. This documentation is freely available under the terms of the GNU Free Documentation License.
Citation
If you find this repository, code, or article useful for your research, please cite it.
Mongefranco, Gabriel; Gluskin, Jeremy; Boa, Shelley (2026). DataLaVista™. University of Michigan. Software. https://github.com/DepressionCenter/datalavista
DOI: https://doi.org/10.5281/zenodo.19245606
About the Author
 |
Gabriel Mongefranco is a Mobile Data Architect at the University of Michigan's Eisenberg Family Depression Center. Gabriel has over a decade of experience with automation, data analytics, database architecture, dashboard design, software development, and technical writing. He supports U-M researchers with data cleaning, data pipelines, automation and enterprise architecture for wearables and other mobile technologies.
| | |
|