How to make API calls using a dynamic value - Custom UI

Forge Forge UI Kit and Custom UI
,
2

Hi @AdrianKausel ,

Here is some code demonstrating how to make cascading calls between a Forge CustomUI frontend, the app function and a product API. The sceanrio s slightly contrived because you could get the current issue key with one less call.

index.js app function code

import Resolver from '@forge/resolver';
import api, { route } from '@forge/api';

const resolver = new Resolver();

resolver.define('getIssueKey', async (request) => {
  console.log(`getIssueKey request = ${JSON.stringify(request, null, 2)}`);
  const issueKey = request.context.extension.issue.key;
  const data = {
    issueKey: issueKey
  }
  console.log(`returning ${JSON.stringify(data, null, 2)} from getIssueKey...`);
  return JSON.stringify(data);
});

resolver.define('getIssueSummary', async (request) => {
  console.log(`getIssueSummary request = ${JSON.stringify(request, null, 2)}`);
  const issueKey = request.payload.issueKey;
  console.log(`issueKey = ${issueKey}`);
  const response = await api.asApp().requestJira(route`/rest/api/2/issue/${issueKey}?fields=summary`);
  const json = await response.json();
  console.log(`json = ${JSON.stringify(json, null, 2)}`);
  const data = {
    summary: json.fields.summary
  }
  console.log(`returning ${JSON.stringify(data, null, 2)} from getIssueSummary...`);
  return JSON.stringify(data);
});


export const handler = resolver.getDefinitions();

App.js app CustomUI code

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

function App() {
  const [data, setData] = useState(null);

  useEffect(async () => {
    const issueKeyResult = await invoke('getIssueKey');
    console.log(`issueKeyResult = ${issueKeyResult}`);
    const issueKey = JSON.parse(issueKeyResult).issueKey;
    console.log(`issueKey = ${issueKey}`);
    const issueSummaryResult = await invoke('getIssueSummary', { issueKey: issueKey });
    console.log(`issueSummaryResult = ${issueSummaryResult}`);
    setData(JSON.parse(issueSummaryResult).summary);
  }, []);

  return (
    <div>
      {data ? data : 'Loading...'}
    </div>
  );
}

export default App;

Regards,
Dugald

1 Like