CSV import & export

Importing a CSV file

UI Bakery allows importing CSV files to your app and, for example, displaying them in a Table. Let's review how you can do that.

To display a CSV file in a Table:

1. Add the File picker component to the working area.

File picker component has a special property – parsedValue. It allows you to access the CSV file content as an array of objects without uploading it to the server or parsing it separately.

1. In component's settings, select the Parse file checkbox to allow the system to access file content.

2. Next, select the file you want to upload in the File picker.

3. Now, add the Table component and reference File picker using {{ui.filepicker.parsedValue}}.

4. Click Generate structure.

Done! Your CSV file content will now be displayed in the Table.

Exporting a CSV file

Along with importing data, you can also as easily export it from your app in a CSV format. In this section, we'll review two ways how you can do that - using a built-in export button (for the Table component) and using an action to generate a CSV file.

Downloading Table data as CSV

Table component in UI Bakery has a built-in button to directly download data in a CSV format. You simply need to click it and your exported file will be automatically downloaded.

Generating CSV file from action

In this case, you can use an action consisting of two steps, where the first step is an API or database request. Follow the steps below to see the whole flow:

1. Create a new action that will consist of two steps:

   1. First step - HTTP Request action where you need to specify your URL (it should return an array of objects).

   2. Second step - Generate File action where you need to reference the result of the previous step as {{data}} variable in the Generate from field.

2. Click Execute action.

Your exported file will be automatically downloaded to your default Downloads folder.

Exporting data in different formats

UI Bakery also allows exporting data to other formats, not only to CSV. You simply need to use a JavaScript Code action step to achieve this. Check out the code snippets below👇

• To export data to .txt:

// Result of the previous step is available as data
const blob = new Blob([{{data}}], { type: 'plain/text' });
const url = URL.createObjectURL(blob);

// Create a temporary link element and trigger the download
const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = 'data.txt'; // Name your file here
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

return blob;

• To generate JSON file from previous data:

// Result of the previous step is available as data
const jsonData = JSON.stringify({{data}});
const blob = new Blob([jsonData], { type: 'application/json' });
const url = URL.createObjectURL(blob);

// Create a temporary link element and trigger the download
const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = 'data.json'; // Name your file here
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

• For multipart requests:

const fileName = "your_file_name.extension"; // Replace with your desired file name and extension
const fileContent = {{data}}; // Assuming the file content is received in the 'data' variable

const blob = new Blob([fileContent], { type: "application/octet-stream" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);

return { message: "File download triggered" };