How do I use REST api to get data with custom ui

Forge Forge Custom UI and UI kit (beta)
,
1

Hi, I’m trying to make an dashboard gadgets app which can display graphs of issue data ( such as how long issues have had a status), but I’m not able to get data though the REST api. How are you supposed to use the REST api with custom ui?

2

Hi @DanielDennyJakobsen,

So I asume you are using react in a custom ui then. If so, then it is quite easy:

  1. Import @forge/bridge into your App.tsx (or wherever you want to call the REST API).

Before you do that you need to install @forge/bridge in your react app folder e.g. \static\project-page\ and not in your forge app root folder.

import React, { useEffect, useState } from "react";
import { requestJira } from "@forge/bridge";
  1. with that you can use requestJira in your app to access the REST APIs. This is an example:
function App() {

  // ... your states or other hooks

useEffect(() => {
    const fetchData = async () => {
      try {

        const issueResponse = await requestJira("/rest/api/3/issue/ISSUE-10", {
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
          },
        })

        console.log(`Response: ${issueResponse.status} ${issueResponse.statusText}`);
        console.log(await issueResponse.json());

      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);

return (
    // Rendered JSX.. your html goes here...
  );
}

export default App;

Please note that you need to add the appropiate permission to you manifest.yaml to allow the REST call (e.g. read:project:jira)

Please also note that the code samples at The Jira Cloud platform REST API (atlassian.com) do not show invoking the REST api from a custom ui, These examples use an api call (like api.asUser().requestJira) that is for non custom ui rest calls.

1 Like