How to get issue id with using Forge Custom UI?

Hello everyone,

I am working on app development with using Forge Custom UI on JIRA and I need to get current issue id, I want to use the data on glance panel of the issue. I wonder if there is a way to get current “Issue ID”.

I read something about the UI Kit hook “useProductContext” to get issue id. how to get the issue id with using Custom UI or how can i get current issue id?

Thanks.

1 Like

As far as I now you can get information like the issueKey only in the backend when using Custom UI. Define a function like so:

resolver.define('fooFunction', async (req) => {
    const {projectId, issueKey} = req.context.extensionContext;
    return issueKey
});

and retrieve it in the web-client:

const issueKey = await invoke('fooFunction', {});

I guess this will become easier in near future when Atlassian allows us to use the AP object from Custom UI.

1 Like

But I read that this can be done with the javascript api this link ( https://developer.atlassian.com/cloud/jira/platform/jsapi/context/ )
Can I use the 'javascript api in custom UI ?

Thank you so much for the answer but can you explain that answer a bit more please? Where should i implement these codes? Should i use these codes for App.js and index.js that is in the src folder of the app? And also you mean i should implement these code with using bridge and resolver right?

1 Like

I think this is not possible at the moment when using Forge.

Assuming you create a Forge app using the “forge create” command and the ui-kit template “jira-issue-glance” you have to:

  1. add the mentioned resolver definition in src/index.js
  2. add the mentioned web-client code in static/hello-world/src/index.js (add it within a useEffect hook as the example uses React)

good look
Julian

2 Likes

Julian thank you so much again, your solution is worked well :slight_smile: I want to ask you one more question. How can i get the current user id? If you answer this, i will appriciate it.

1 Like

If you’re lucky the userAccountId (or sth. like that) already exists on req.context. You can check this by logging the object or return the whole req.context object to the UI.

2 Likes

Thanks for your answers @JulianWolf, all perfectly correct!

@EmreBalc To add a bit more specificity to the last answer, there will be an accountId property in the context object passed into the resolver function.

To add a bit more info for the original question, we are considering exposing context on the frontend through @forge/bridge in Forge Custom UI (similar to how AP in Connect does, see https://developer.atlassian.com/cloud/jira/platform/jsapi/context/). Do let us know if this would be valuable for you and why!

Note that UI Kit hooks are not able to be used with Custom UI.

1 Like

Hi @SelimCanBagdatli,

The JavaScript API you linked is for Connect, which is a different app platform than Forge (you could say it is Forge’s predecessor).

You can check out the Forge docs for the JavaScript APIs available in Forge. https://developer.atlassian.com/platform/forge/js-api-reference/

If the features you need are unavailable in Forge, let us know!

Hi, i want to ask you something if you don’t mind. We able to jira requests in our custom ui app but is there any way to call api request for different websites?

1 Like

@EmreBalc At the moment, in Custom UI, you are only able to make API requests to sites other than Confluence and Jira within a resolver function.

You will have to define a resolver, if you haven’t already, in src/index.js. Then, define a function that makes the API request you would like to make using resolver.define. You should use api.fetch from @forge/api to make the request. See https://developer.atlassian.com/platform/forge/js-api-reference/fetch-api/.

@kchan Thanks for the information but I stuck at the fetch now.

Firstly I defined a function for the resolver with using @forge/api in “src/index.js” as you said.

resolver.define("apiFunction", ({}) => {
  fetch(
    'https://backend.heyadriver.com/api/Policies/PoliciesLis', {method: 'GET'}
  ).then(response => { 
    result = response.message; 
    return { example : result }; }); 
  }
);

Then, called the function in “static/hello-world/src/app.js”

invoke("apiFunction", {}).then((returnedData) => { console.log("Result = " + returnedData.example)})

But the result is always undefined. How could i handle this?

PS. I added the result json data below.

image

Hey @EmreBalc your code is very close to correct.

The resolver function must return the JavaScript Promise. Currently, the function runs the fetch request but nothing gets returned from the function, which is why you see undefined always. The return statement you have in the .then simply resolves the Promise with that value, but you haven’t actually returned the Promise from the original function.

You should be able to add a return to the beginning of your function:

resolver.define("apiFunction", () => {
  return fetch(
    'https://backend.heyadriver.com/api/Policies/PoliciesLis', {method: 'GET'}
  ).then(response => { 
    const result = response.message; 
    return { example: result };
  });
});

You may prefer to use async / await syntax (this code block is behaviourally equivalent to the first one).

resolver.define("apiFunction", async () => {
  const response = await fetch(
    'https://backend.heyadriver.com/api/Policies/PoliciesLis', {method: 'GET'}
  ); 
  const result = response.message; 
  return { example: result };
});

Note that we are currently working on returning runtime errors experienced in the resolver back to the invoke function. In the meantime, you may experience that the invoke function resolves with undefined data when there is a runtime error. The only way to see the runtime error is to run forge logs or forge tunnel and observe if there are any errors in the logs after you load your app and invoke the resolver function.