Exporting a file

[ebp]

Hi,

I'm creating a custom card with data from outside Hubspot.

I want to export in CSV format the content of the table I created with those datas.

So, is there a way to add a button on the card to download a CSV string (type: 'text/csv') ?

Thanx

[aanchalshethHS · Accepted solution]

Hi @ebp ,

One way of doing this is by generating a data URL and then embedding the URL in the Link component. i can give an example, but make sure you perform necessary security & scalability validations on your end before using in Prod.

Code example:

const dataArray = [
    { id: 1, name: 'Alice', age: 25, department: 'HR' },
    { id: 2, name: 'Bob', age: 30, department: 'Engineering' },
    { id: 3, name: 'Charlie', age: 28, department: 'Marketing' },
    { id: 4, name: 'David', age: 35, department: 'Sales' },
  ];

   const getDataUrl = (dataArray) => {
    const csvRows = [];
    const headers = Object.keys(dataArray[0]);
    csvRows.push(headers.join(','));

    for (const row of dataArray) {
      const values = headers.map(header => {
        const escaped = ('' + row[header]).replace(/"/g, '\\"');
        return `"${escaped}"`;
      });
      csvRows.push(values.join(','));
    }

    const csvData = csvRows.join('\n');
    const dataUrl = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvData);

    return dataUrl;
  };

  const dataUrl = getDataUrl(dataArray);

And in the Link component: 

<Link href={dataUrl}>Download</Link>;

Does that help? 

[ebp]

Thank you !

It does the job !

[aanchalshethHS]

Hi @ebp ,

Confirming that you're using a UI Extension custom card. Is that correct? 

[Jaycee_Lewis]

Hey, @ebp 👋 Did you make any progress on this project? If not, we can try tagging in a few of our community experts who have CRM custom card building experience.

Best,

Jaycee

[ebp]

Hi Jaycee, 

Thanx for your answer.

I didn't progress any more.

I found a workaround outside the card (my export is sent by email in the API).

It's not what i really want but it does the job.