Implementing Download Functionality

Suddenly, do you have any features that you find inconvenient when using kintone?

The most common complaint I heard while developing apps on kintone was,

“The download (CSV export) functionality is cumbersome.”

For those managing the app, the UI of the download screen might be somewhat familiar as it is seen in other features, but for most users, it might be used once a month or less. (Ideally, the workflow should be improved so that downloading is not necessary…)

So this time, to solve the cumbersome download functionality, I will introduce a simple method to implement custom download functionality.

Source Code

This is the core code for this implementation.

const downloadAsCsv = (name, records) => {
  const keys = Object.keys(records[0]);

  const data = [keys, ...records.map((record) => keys.map((key) => record[key].value))];

  return download(name, data);
};

const download = (name, array) => {
  const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
  const blob = new Blob([bom, array], { type: 'text/csv' });
  const url = (window.URL || window.webkitURL).createObjectURL(blob);

  const link = document.createElement('a');
  link.download = name + '.csv';
  link.href = url;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);

  return true;
};

Implementation Example

Download on Screen Display

This might not be used often, but it is the simplest implementation.

kintone.events.on('app.record.index.show', (event) => {
  downloadAsCsv('test.csv', event.records);

  return event;
});

Adding a Download Button

Add a button to the app header and execute the process when clicked.

kintone.events.on(['app.record.index.show', 'mobile.app.record.index.show'], (event) => {
  const app = kintone.app || kintone.mobile.app;
  const headerMenuSpace = app.getHeaderMenuSpaceElement() || app.getHeaderSpaceElement();

  const button = document.createElement('button');
  button.textContent = 'csv';
  headerMenuSpace.append(button);
  button.onclick = (clicked) => {
    downloadAsCsv('test.csv', event.records);
  };

  return event;
});