How To Download a generated CSV file from App Maker?

Question

I've created a AppMaker App for our internal users to facilitate an approval process. The Master approver has asked for the option to download a CSV file with a bunch of data without saving it to GDrive. (I also didn't want to go with this approach since that would require the Drive permission and the users freak out when they see that the app is requesting for the permission to access their files).

So, the furthest I got was to use window.open() with the csv data which does download a csv file but without any extension. However, that's not elegant and it makes it more difficult for the person using it to have to rename it to download.csv or to open it from Excel instead of double-clicking it.

I found online the option of using an anchor with href and the download attribute and happily implemented it only to get the nice error from AppMaker that Anchor href is not allowed to start with "data:".

Any ideas? Solutions?

Thanks!

Answer 1

I implemented the following code for similar functionality, do note however that it only generates data of the items that are currently loaded in the datasource. If you have multiple pages of data then you would need to download each page individually. Note that the download is specifically named with YourFileName.csv.

var ds = widget.datasource;
var items = ds.items;
var fields = ds.model.fields._values;
var serialized = '';
var headers = [];
var permit = widget.root.children.Panel1.datasource.item.WR_Number;

fields.forEach(function(fieldname) {
  var header = fieldname.displayName;
  headers.push(header);
});
serialized += headers.join(',') + '\r\n';

items.forEach(function(item) {
  var values = [];

  fields.forEach(function(field) {
    var value = item[field.name];
    var strVal = value === null ? '' : value.toString();
    values.push(strVal);
  });

  serialized += values.join(',') + '\r\n';
});
var file = new Blob([serialized], {type: 'text/csv'});
var link = document.createElement('a');
link.download = permit + '_WaterUseData.csv';
link.href = window.URL.createObjectURL(file);
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);