How to load other page to JiraProjectPage iFrame

Jira Development Jira Cloud
1

I have a jira project page defined like this:

"jiraProjectPages": [{
    "url": "pageOne?projId={project.id}&projKey={project.key}",
    "iconUrl": "/img/icon.svg",
    "weight": 100,
    "name": {
        "value": "cool App"
    },
    "key": "coolApp"
}],

This way there is an additional link added to each project in the sidebar. When I click it I go to the backend “…/pageOne?projId=10010&projKey=TEST”. This works as designed and expected.
Now I would like from pageOne open another page in the same iframe.
How to do it properly?
There is AP.navigator.go() method, but it is trying to open the page in the entire browser not in the iframe. Executing following code from pageOne:

  const token = await AP.context.getToken();
  AP.navigator.go('site',{relativeUrl:`/pageTwo?jwt=${token}`});

Changes url in browser to: https://myApp.atlassian.net/pageTwo?jwt=… which is not my desired result (and additionally it shows Encountered a "401 - Unauthorized" error while loading this page. Go to Jira home instead of pageTwo.

So I’ve tried following code:

  const token = await AP.context.getToken();
  window.location=`${localBaseUrl}pageTwo?jwt=${token}`;

And this worked - I did get the GET request on server to /pageTwo and returned content fully replaced pageOne content in the iframe.
Full success.

…almost.
Cause with this approach:

  • when webbrowser is refreshed pageOne is again opened in the iframe
  • after doing something on pageTwo for some time (16 minutes for example) and then using AP.history.back(), pageOne is not shown as backend returns Unauthorized (I’m guessing the JWT token used previously for pageOne expired).

Is there some other/proper way to load pages to the iframe from various subpages?
Or the only answer is to have one page and change what users see by getting new data from server and render entire page on client side?

2

After playing with this, looks that it’s possible to do it using application context variables. So in order to do it, the page should be defined something like this:

"jiraProjectPages": [{
    "url": "pageOne/{ac.subpage}?projId={project.id}&projKey={project.key}",
    "iconUrl": "/img/icon.svg",
    "weight": 100,
    "name": {
        "value": "cool App"
    },
    "key": "coolApp"
}],

Unfortunatelly this requires changing endpoints on server from

ap.get('/pageTwo',...)

to

ap.get('/pageOne/pageTwo',...)

But then it is enough to call from source code new page like this:

function removeApplicationContextParamsFromUrl(url){
  const allUrlParts = url.split('&');
  if(allUrlParts.length == 1) return allUrlParts[0];
  const noACparts = allUrlParts.filter((item)=>item.startsWith('ac.')==false);
  return noACparts.join('&');
}
AP.getLocation(function(location){
  const url = `${removeApplicationContextParamsFromUrl(location)}&ac.subpage=pageTwo`;
  AP.navigator.go('site', {
    absoluteUrl: url
  });
});

Such call supports history, reloading and additionally links can be copied, send to others and they will have the same subpage opened in the application.
Big minus is that entire Jira page is reloading and this takes time :frowning:

So possibly combining this as entry point to single app page would be better to be used :thinking:.