Need Help Extracting Data from Jira Projects for Use on Global Page in Jira Forge App

Jira Development Jira Cloud
1

Hi Atlassian Development Community,

I need your help with a Forge app that I’ve created. I’ve made a global page in Jira and now I want to get data from my Jira projects, like issues, worklogs, and groups.

I wrote some functions with resolver and invoked them in my React app. But the problem is that I can only access the function that was created when I made the Forge app
`

resolver.define('getText', (req) => {
    console.log(req);

    return 'Hello world!';
});

`.
This function only gives basic information, and I can’t delete it because I get an error message.

  08:23:03.492  8b50fd23fc0bacbe  {
  payload: { example: 'my-invoke-variable' },
  context: {
    localId: 'ari:cloud:ecosystem::extension/1860a73-f632-43ca-93f-d4704f861b03/7d122a97-8acc-4130-9968-c241222d7838/static/jfm-hello-world-page',
    cloudId: '5813b69-5e44-41b5-adbb-ee97966bd118',
    environmentId: '7d122a97-8acc-4130-9968-c21222d7838',
    environmentType: 'DEVELOPMENT',
    moduleKey: 'jfm-hello-world-page',
    siteUrl: 'https://worklogs-app.atlassian.net',
    extension: { type: 'jira:globalPage' },
    installContext: 'ari:cloud:jira::site/583b609-5e44-41b5-abb-ee97966bd118',
    accountId: '62051d29733407067554986',
    license: undefined,
    jobId: undefined
  }
}

the error message is 08:24:02.572 b3da422880d3b8dd Resolver has no definition for 'getText'. Error: Resolver has no definition for 'getText'. at Resolver.getFunction (webpack://jira-global-page-custom-ui/node_modules/@forge/resolver/out/index.js:44) at resolve (webpack://jira-global-page-custom-ui/node_modules/@forge/resolver/out/index.js:52) at Reference.value (bootstrap.js:1:9146)

Can anyone please help me fix this issue so that I can use my Forge app and global page in Jira to their full potential?

Thank you for your assistance.

Best regards,

2

Hi @SarraMEHREZ,

I can see that the app is using the Custom UI resolver, however, that’s not required anymore when using the requestJira bridge method to retrieve projects, issues, etc.

Let me share my example here which loads the projects on a site and some of their details in a table on a global page:
static/hello-world/src/App.js

import React, { useEffect, useState } from 'react';
import {requestJira, invoke } from '@forge/bridge';

function App() {
    const [projects, setProjects] = useState([]);

    useEffect(() => {
        requestJira('/rest/api/3/project')
          .then((response) => response.json())
          .then((data) => {
            setProjects(data);
          }).catch((err) => {
            console.log(err.message);
          });
    }, []);

    return (
        <div>
            <table>
                <tbody>
                    {projects && projects.map(project =>
                        <tr key={project.id}>
                            <td>{project.id}</td>
                            <td>{project.key}</td>
                            <td>{project.name}</td>
                        </tr>
                    )}
                </tbody>
            </table>
        </div>
    );
}

export default App;

manifest.yml

modules:
  jira:globalPage:
    - key: forge-jira-customui-hello-world-page
      resource: main
      title: forge-jira-customUI
resources:
  - key: main
    path: static/hello-world/build
permissions:
  scopes:
    - read:jira-work
app:
  id: ari:cloud:ecosystem::app/<appId>

To build this I’ve started with a template app created via the Forge CLI which still references the resolver and I can understand how this can be misleading.
Because the resolver is not needed anymore, you can remove its references from the manifest.yml and delete the src/index.js file.

You might also want to have a look at the Custom UI documentation page which covers a few more details about how to use Custom UIs in Forge.

Hope this helps,
Caterina

1 Like