JSON to CSV
Overview
JSON to CSV turns a JSON array of objects into a CSV file that users download with one click. Users can check the data before they download it: a preview card shows it as a table and as the exact CSV text the file will contain.
All inputs are attributes of the context object, so the data, file name, delimiter and column names can come from microflows, nanoflows, export mappings or REST calls. You don't need any Java or custom JavaScript.
Features
- Preview before download: the file name, number of rows and columns, and the delimiter; a paged Table tab; and a CSV tab with the exact file text and a Copy CSV button.
- Delimiter selection: users choose Semicolon, Comma, Tab, Pipe or any custom delimiter, and the preview updates immediately.
- Custom column names: set friendly header names, or leave them empty to use the JSON keys.
- Clear messages for loading, empty data, invalid JSON, and headers that don't match the columns. The download button stays disabled until the data is valid.
- The file includes a byte order mark (BOM), so Excel shows special characters such as é, ü or ₹ correctly.
- The download button uses your theme's primary button style, and the widget supports the Class and Style settings.
Documentation
Typical usage scenario
Use JSON to CSV when users need to download app data as a spreadsheet. The widget turns a JSON array of objects into a CSV file that downloads with one click. Users can first check the data in a preview, as a table and as the exact CSV text.
Where it helps:
- Export list data or search results to Excel or other spreadsheet tools
- Download the response of a REST call or the result of an export mapping as a CSV file
- Let users review data before they share it as a file
- Provide quick data extracts for reporting, audits or migrations
Features and limitations
Features:
- One-click CSV download with a configurable file name (.csv is added automatically)
- Preview card with a summary (file name, rows, columns, delimiter), a paged Table tab, and a CSV tab with a Copy CSV button
- Delimiter dropdown with Semicolon, Comma, Tab, Pipe or any custom delimiter. The preview and the file update immediately.
- Custom column names through the headers attribute. When headers is empty, the JSON keys are used.
- Clear messages for loading, empty data, invalid ders that don't match the columns. The button isdisabled until the data is valid.
- The file includes a byte order mark (BOM), so Excel shows special characters such as é, ü or ₹ correctly.
- Uses the theme's primary button style and supporgs
Limitations:
- Web only; native mobile is not supported.
Dependencies
- Mendix Studio Pro 10.24.17 or a later 10.24 vers
Installation
1. Download mendix.JSONtoCSV.mpk from the Marketplace, or from the GitHub release Version1.0.1.
2. Copy it into the widgets folder of your app. In Studio Pro, choose App > Show App Directory in Explorer to find the folder.
3. Choose App > Synchronize App Directory (F4). Thox as "JSONto CSV".
Configuration
1. Create an entity with a String attribute of unlimited length for the JSON data. Optionally, add String attributes for the file name, delimiter and headers.
2. Fill the data attribute with a JSON array of objects, for example with an Export with mapping activity, a REST call response, or
a microflow.
3. Place a data view with this entity on a page, and put the widget inside it.
4. On the General tab, select the attributes:
- data (required): the JSON array
- filename: the name of the downloaded file (default export.csv)
- delimiter: the field separator (default ;)
- headers: comma-separated column names, for example ID, Name
- Allow delimiter selection (default Yes)
5. On the Preview tab, set Show preview (default Yes) and Rows per page (default 10).
Known bugs
None.
Report issues at https://github.com/bharathidas/JSONtoCSV/issues
Frequently Asked Questions
Why does Excel show all data in one column?
Excel expects the list separator of your region: usually a semicolon in Europe and a comma in English-speaking regions. Choose the matching delimiter in the dropdown or set it in the delimiter attribute.
The button is disabled. Why?
The data is empty, still loading, or not valid JSON. The message above the button explains which one.
Can I rename the columns?
Yes. Set the headers attribute to one name per column, separated by commas, in the order of the JSON keys of the first object.
Can I hide the preview or the delimiter dropdown?
Yes. Set Show preview or Allow delimiter selection to No.
Does it work in Mendix 9?
Use version 1.0.0 for Mendix 9.24.18. Version 1.0.1 is for Studio Pro 10.24.17 and the React client.
Releases
## JSON to CSV 1.0.1
Widget version: **1.0.1** (same as this GitHub release tag)
### Compatibility
- Mendix Studio Pro **10.24.17**
- Built with `@mendix/pluggable-widgets-tools` 10.16.0
- Works in the Mendix 10 React client
### New
- **Preview before download:** file name, row and column count and delimiter; a **Table** tab with paging and a **CSV** tab showing exactly the text that will be downloaded, with **Copy CSV**; Hide/Show preview.
- **Delimiter selection:** a dropdown next to the button with Semicolon, Comma, Tab, Pipe or Other… It starts with the delimiter attribute, or `;` when that is empty.
- **Clear messages** for loading, no data, invalid JSON and JSON that is not an array, plus a warning when `headers` does not match the number of columns.
- The **Download Data** button uses your theme's primary button style; the widget's Class and Style settings are applied.
- New properties: *Allow delimiter selection*, *Show preview* and *Rows per page* (all optional).
### Fixed
- The delimiter attribute is used (1.0.0 read it from the filename attribute).
- With empty headers, the JSON keys are used as column names (1.0.0 wrote a blank first line).
- With empty data the button is disabled (1.0.0 downloaded hard-coded demo rows).
- Invalid JSON shows a message instead of crashing the widget.
- No more "require is not defined" error in the React client.
### Install / upgrade
Download `mendix.JSONtoCSV.mpk` from this release, put it in your app's `widgets` folder and press F4 in Studio Pro. When upgrading from 1.0.0, choose **Update all widgets** when Studio Pro reports that the widget definition has changed.
### Sample module
[JSONtoCSVDemo.mpk](https://github.com/bharathidas/JSONtoCSV/raw/main/JSONtoCSVDemo.mpk) (Studio Pro 10.24.17): an example page, `JSONtoCSVDemo.Home_Web`, with test data and the 1.0.1 widget. Import it with **App > Import module package**.
### Previous version
- [Version1.0.0](https://github.com/bharathidas/JSONtoCSV/releases/tag/Version1.0.0) — Mendix 9.24.18, widget 1.0.0