Exporting a file

Developer Support CMS Development
1

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

2

Hey, @ebp :waving_hand: 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

3

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.

4

Hi @ebp ,

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

5

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?

6

Thank you !

It does the job !