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

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

Hi team,

I’m building an app using Custom UI, using the App.js to render all data gathered from the resolver, and the Index.js to make all the API calls with the resolver.
So far so good, I’ve been able to define a lot of calls and filter the data as desired to render in the front.

What I’m trying to do now is to pass some values to the API call to get more specific data, for example passing a project Key (defined before by a previous trigger) to the API call URL to get that specific project data. And honestly I’m quite lost because I’ve been trying to manipulate the call inside the index.js, by first creating an array to store all the project keys with a call, and then inside a for loop iterate through all the project keys modifying the URL (/rest/api/3/project/${pkey}) but is not working.

There is a way to pass a value with a trigger from the front (App.js) to the index.js and make an API call using this variable?

Thanks!

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