CSV export best practice advice

App Building
1

Greetings, fella Retoolers.
Hope Y'all are having a great day.

Task: Allow users to offload graph data as a CSV file.

Description: I wanted to check with our wonderful community before coming up with my own way. I have a graph of metric over time that some filtering and metric selection. Some users insist on a take away option in a form of a CSV file. ...guess they don't like my interfaces =( But anyway before I jump reinventing the wheel I wanted to check if the is a best practice approach/function/library/integration I should look in to for starters. Or maybe someone solved a similar issue and would not mind sharing some smarts on it.

Cheers!

Screen Shot 2024-04-18 at 10.56.16 AM
Screen Shot 2024-04-18 at 10.56.16 AM870×1724 112 KB

2

Hello!

If you just need the raw data from the graph as a CSV file, I think you can use the Export Data event handler on your button and supply the data source as the displayed graph data:

image

You can also use the utils.exportData() or utils.downloadFile() functions as part of another script/transformer if you need to transform or clean up any of the data per user feedback:

image
image

Hope this helps!

1 Like
3

And this is exactly the reason I wrote this.
Easier than I thought.

Much appreciated, Scott.

1 Like
4

Now you got me thinking, why is my Event Handler is missing Export Data altogether...?

Screen Shot 2024-04-18 at 2.23.39 PM
Screen Shot 2024-04-18 at 2.23.39 PM706×958 56.8 KB

5

Is your component a button?

6

I found data export button in web version.
Mobile version doesn't seem to this option.
I guess i'm stuck with figuring out how utils.exportData() or utils.downloadFile() works.

7

Don't mean to keep bugging. But I have this "Task failed successfully" vibe with it.

Web instances does have a very convenient Event handler for it.
But utils.exportData() or utils.downloadFile() don't seem to do a thing in web instance.
Anything I'm doing wrong?

async function downloadFullGraphMetricsAsCSV() {
    try {
        // Ensure getGraphMetricsWithRange is defined with correct parameters or adjust as needed.
        // This assumes the function returns all necessary data without further parameters.
        const data = await getGraphMetricsWithRange();

        // Check if data is present
        if (data && Array.isArray(data) && data.length > 0) {
            // Use utils.exportData to download the data as a CSV file
            utils.exportData({
                data: data, // Use the data as is, assuming it's already in the correct format for CSV export
                fileName: 'GraphMetrics.csv', // Name the file as needed
                type: 'csv' // Specify the CSV file type
            });

            console.log('CSV download initiated.');
        } else {
            console.error('No data available to export.');
        }
    } catch (error) {
        console.error('Error fetching graph metrics:', error);
        alert('Failed to download graph metrics: ' + error.message);
    }
}```
8

Hi @Scottsky, I was able to reproduce this issue. Our engineers are currently working on fixing utils.exportData() and utils.downloadFile() on Mobile. We'll let you know here as soon as this is fixed.

2 Likes