You are viewing limited content. For full access, please sign in.

Discussion

Discussion

Generating a file download button within a Custom HTML element - Modern Designer

posted on June 26, 2024

Hey all,

I am attempting to trigger a CSV download (using data from a table) using a custom HTML button.

I have tried the below, however it seems like I am unable to interact with anchor links or even add one that includes a blob into a custom HTML element (the anchor gets removed saying "The following unsupported elements or attributes have been removed: attribute href from element a.".

const data = getTableData()
const csv = data.map((row) => Object.values(row).join(',')).join('\n')
const blob = new Blob([csv], { type: 'text/csv' })
const url = URL.createObjectURL(blob)

LFForm.changeFieldSettings(
  { fieldId: 12 },
  { content: `<a href="${url}" download="data.csv">Download</a>` }
)

Just wondering if anyone knows of a way to accomplish this in modern designer?

1 0
replied on July 9, 2024

We are doing a security review of data urls right now. It should be possible to do this soon!

1 0
replied on July 25

I am also trying to trigger a CSV download from a table using a custom HTML button. Our code in the Classic looked like this:

var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(csv));
    element.setAttribute('download', 'Report.csv');
    element.style.display = 'none';
    if (typeof element.download != "undefined") {
      document.body.appendChild(element);
      element.click();
      document.body.removeChild(element);
 } 

I tried changing our code to work with the Modern but appending child to body does not seem to be working.

I tried the code from Jay's question and got the same message he got: "The following unsupported elements or attributes have been removed: attribute href from element a.". Is there any sample code or tips for doing this?

0 0
replied on July 28

I've managed to get something to work in modern designer. I don't put the link directly on the button in the custom HTML "setup" but rather I change it in the JS after the button is clicked. It requires the user clicking the button twice in order to get the download but it functions. I can elaborate further if you'd like, but that's the gist of it.

1 0
replied on July 28

Yes, could you elaborate on the back-end JS functionality? Thank you!

0 0
replied on July 28

Might want to check out this video: https://youtu.be/-4kWQtbnSlA?si=_PGNLzuS9u1axbrP

2 0
replied on July 29

Definitely refer to that video! A great job of explaining it.

2 0
You are not allowed to follow up in this post.

Sign in to reply to this post.