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

Question

Question

Feature Request: Option to Export Contents of Table to CSV or Excel

asked on December 10

There are several posts of users in the Laserfiche community where, using the classic designer, have created custom buttons with some code that will extract the data from a table on the form and put it in a CSV file that the end user can download.

With the Forms Layout Designer, it would be great if under the Table View Settings/Collection View Settings properties of a table or collection, there were additional options for "Enable download of CSV" and "Enable download of Excel". When enabled, buttons would be made available in the same area as the search and filter options that would allow the user to download the contents of the table/collection to CSV or Excel.

5 0

Replies

replied on December 12 Show version history

Would be a neat feature, could see it work well in cloud with editing lookup tables, but there are some other ways we want to make those work better. In the meantime if anyone needs this now, here's some code to do it. This mechanism can be used for other file types as well. This code requires a custom html field that calls the function outlined below.

HTML:

<button class="btn btn-default" onclick="onDLClick()">Download</button>

JS:

// Set to your fields needed to generate the table
const fields = {
  downloadButton: { fieldId: 13 },
  table: { fieldId: 8 },
}

const getCSVFromTable = () => {
  // Dont actually use this to generate your csv. This is just a quick and dirty example
  const tableValues = LFForm.getFieldValues(fields.table);
  let csvText = `col1, col2\n`;
  for (const row of tableValues) {
    csvText += Object.values(row).slice(0, -2).map(c => c.data).join(',') + '\n';
  }
  // Must return b64 encoded string generated here
  return btoa(csvText);
}

window.onDLClick =async () => {
  // If your generation is slow this makes sense, otherwise its too quick to notice
  await LFForm.changeFieldSettings(fields.downloadButton, {
    content: `<button class="btn btn-default" disabled>Preparing...</button>`
  });
  const csv = getCSVFromTable();
  const b64 = `data:text/csv;base64,${csv}`;
  // Downloading requires another click by the user due to browser security
  await LFForm.changeFieldSettings(fields.downloadButton, {
    content: `<a class="btn btn-default" href="${b64}" download="customname.csv">Download</a>`
  });
}

 

2 0
replied one day ago

Thank you for the above code, Zach. I put it in my LF12 instance and noticed that it was putting all the values on a single row in the CSV file, so I added + '\n'; to the end of row 12, which fixed that.

The other thing I'm seeing though is that if I open in a text editor, it is adding 3 extra commas to the end of each line. Any idea what would be causing that?

0 0
replied one day ago

I didn’t quite intend the make csv function to be used as is. The table field values object contains two keys that describe the row that aren’t fields. I updated the example to remove the last two elements of the array and add the new line 

0 0
replied 18 hours ago

That makes more sense now. It was driving me crazy yesterday when I was testing it to provide a proof of concept. Thank you for the update! Can't wait to see if you guys can build this into the product for both Self-Hosted and Cloud in the future.

0 0
replied 12 hours ago

@████████- just confirming - this requires version 12, right?

I had tried to do something similar six or seven months ago on Version 11.0.2311.50556 and when it created the link to download the file, I would get an error message stating "The following unsupported elements or attributes have been removed: attribute href from element a."

I get the same result trying with your code example.  So I'm assuming a change in LF12 allows us to create the link where it didn't allow it before.

0 0
replied 12 hours ago

Yes, it does require Forms version 12.

1 0
replied 12 hours ago

Thank you @████████!

0 0
replied on December 10

Hi Blake,

I've sent the request to the Forms team, thanks.

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

Sign in to reply to this post.