Jira Forge Export Excel file

Forge Forge UI Kit and Custom UI
,
1

Hello,
We need to implement an export button for some table data we generate from the issues object.
Is that possible? What are the allowed formats?
I tried an implementation using the file-saver and exceljs packages but it seems forge doesn’t allow npm packages other than @forge/ui

2

Welcome to the Atlassian developer community @DanielVelkov,

Possible, but only as a distinct feature, not associated with existing export capabilities. See this recent discussion:

It isn’t so much that there is an explicit set of “known formats”. Rather that you will have some limitations based on the Forge environment.

In the currently GA runtime, you are limited by Atlassian’s proprietary Node-like implementation. While our documentation has a pretty exhaustive list of limitations, we are aware that it’s often hard to know if those limitations apply to a specific library. You might have to probe the dependency tree pretty hard to know if and why a particular library doesn’t work.

Fortunately, there is a new Forge native Node.js runtime that helps solve these problems:

The new native Node.js runtime enables Forge functions to run within a standard Node.js environment. This will allow you to import any built-in, local, or third-party Node modules into your app.

You might try using your libraries in that runtime instead.

That said, you still don’t have full access to the infrastructure, which some libraries might assume. For example, you won’t have a way to just “drop a file” on disk and pick it up outside the Forge App. So you will still want to be aware of the new runtime’s limitations.

1 Like
3

Thanks for the quick and thorough answer. I changed the project to that runtime and it at least deploys, but the file-saver “saveAs” function doesn’t work. It doesn’t throw any error nor download the file. I am using the latest package versions for forge, file-saver and excelJS. Here is the code:

const workbook = new excelJs.Workbook();
const worksheet = workbook.addWorksheet('Report Data');
workbook.xlsx.writeBuffer().then( (buffer) => {
      const blob = new Blob([buffer], { type: "applicationi/xlsx" });
      saveAs(blob,"Worklogs.xlsx");
    });
4

Has anyone tried something like this?
@ibuchanan any follow up to your answer?

5

You have a typo. Maybe it’ll work if you fix it. If not maybe try exporting it as a CSV instead - that way you can bypass the need to rely on an external library that Forge may or may not support.

We are developing a custom UI app that also allows users to export data and it works for us when exporting as JSON. Here’s a snippet that maybe you can test out:

  const jsonData = JSON.stringify(exportData);
  const blob = new Blob([jsonData], { type: 'application/json' });

  // Create a download link
  const url = URL.createObjectURL(blob);
  const download = `data.json`;

  return (
    <Button appearance='link' href={url} download={download}>
      Export summary
    </Button>
  );

Edit: Oh nevermind, I thought you were using custom UI but it looks like you’re using UI kit?

6

Yes I am using UI Kit. Maybe that’s the root of the problem.

7

Hi @DanielVelkov,
Not sure if this is still relevant but I just gave this a try with UI Kit (note that this is the new one, the previous one is now called UI Kit 1) and everything is working fine for me.

I would love to know more about use case too, if you can share which data you are trying to export and maybe (no guarantee but I’ll try) I can create a sample app for that.

I tested it started from this sample app for Bitbucket Instantly Access and Share Repository Size Data Across All Projects, the source code is available here.

The source code is for a CSV export. The only modifications I did to the app were in the frontend/workspace-settings.jsx file:

  • I added the import ExcelJS from 'exceljs';
  • Changed the Download Button to use the downloadExcelFile function:
<Button onClick={downloadExcelFile}>Download Excel</Button>
  • Added the downloadExcelFile function:
  // Download the Excel file
  const downloadExcelFile = async () => {
    console.log('Downloading Excel file');
    if (!unformattedRows) return;

    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('Repositories');
    worksheet.columns = [
      { header: 'Project', key: 'project' },
      { header: 'Name', key: 'name' },
      { header: 'Size (bytes)', key: 'size' },
    ];

    unformattedRows.forEach(repo => {
      worksheet.addRow(repo);
    });

    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);

    const element = document.createElement("a");
    element.href = url;
    element.download = 'repositories.xlsx';
    document.body.appendChild(element); // Required for this to work in FireFox
    element.click();
  };

Cheers,
Caterina

8

So, it’s pretty simple if you’re working with a Jira Forge export and want to split the date and time in Excel. You can use the “Text to Columns” feature in Excel. Select the column with your date-time values, go to the “Data” tab, and click “Text to Columns.” Choose “Delimited,” then use the space as the delimiter to separate the date from the time. After that, you’ll have two columns—one with just the date and the other with the time. If you need them in different formats, you can use the “DATE” and “TIME” functions to fine-tune them. Here’s a helpful guide for more details on how to separate date and time in excel.