I was looking to load in an iframe with an issuekey being passed in as a paramater

Forge Forge UI Kit and Custom UI
1

I’ve currently got an iframe appearing on each of my issues, would there be a way to pass in my issue key as a parameter into my html.

2

Hi @BrandonWilliams ,
Thanks for reaching out. If I understand you correctly, you would like to have access to issue key from your app? So, maybe you will find getContext to be useful for your purposes.

regards
Magdalena

1 Like
3

Hello would there be a way to pass this into html as I’m trying to use this inside the url for an iframe for example
<iframe src=“URL/?param1=”+issueKey style=“position: absolute; width: 100%; height: 100%; border: none”>

4

Unfortunately, it is not possible in Forge. Maybe you would like to share the purpose of this need so we could figure out something else?

regards
Magdalena

5

Hello, so I was just looking to use an Iframe and pass in the issueKey into the URL “URL/?param1=”+issueKey” of the iframe, so the iframe application can call some api keys based on the issueKey.

6

Is it possible to call the iframe with js?

7

Hi @BrandonWilliams,

Not sure I understand your question correctly, but you can pass in data into the iframe. For example;

<iframe src={“URL/?param1=”+issueKey} style=“position: absolute; width: 100%; height: 100%; border: none”>

issueKey can be set using useState and UseEffect

Can you paste some more code so I can understand?

8

index.js (354 Bytes)
App.js (603 Bytes)
index.js (228 Bytes)

9 
          <iframe src={“https://devopsapps-dev.ldn.gb.glencore.net/changecontroltest/?param1=”+issueKey} style=“position: absolute; width: 100%; height: 100%; border: none”>

      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
10

Hi @BrandonWilliams,

Please, try this:

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

function App() {
  const [issueKey, setIssueKey] = useState(null);

    useEffect(() => {
        invoke('getIssueKey').then(setIssueKey);
    }, []);

    return (
       <div>
            {issueKey ? <iframe src={"https://devopsapps-dev.ldn.gb.glencore.net/changecontroltest/?param1="+ issueKey} style="position: absolute; width: 100%; height: 100%; border: none"></iframe> : <></>}
       </div>
  );
}

export default App;
11

Seems to be empty no iframe is rendering

12

Any error in console? Forge may prevent you from loading external sites in your forge app.

13

Looking at the console log yep a few, I’m taking a look now

Error: There was an error invoking the function - Cannot destructure property ‘projectId’ of ‘req.context.extensionContext’ as it is undefined.

A lot of these:
DevTools failed to load source map: Could not load content for https://statlas.prod.atl-paas.net/jira-frontend-source-maps/assets/async-issue-watchers.e74cfc027ca6287ae208.8.js.map: Load canceled due to load timeout

Seems like a few API 404, 409 GET, POST commands

14

The undefined issue was due to needing an await command this has now been solved. However the iframe is still blank

15

No problem all solved was due to the styling

1 Like