Sub-pages in a Custom UI ProjectPage

Forge
1

In the docs, it says:

Subpages

By default, the jira:projectPage module registers a top-level page. However, there is an option to register multiple pages using a pages or sections field.

Use pages to add individual pages to the sidebar and sections to group pages.

The sidebar will only change the project page URL, you will need to handle routes inside your custom UI app using view.createHistory().

The trouble is, the sidebar does indeed “only change the project page URL”. The URL of the iframe containing my Custom UI single page app is not updated. The context retrieved with view.getContext() from the @Forge/Bridge doesn’t change when the sidebar links are clicked either. I can’t see any mention of messages passed to the iframe.

The docs mention adding routing to app running in the iframe but that seems to just be for navigation within the app.

The example subpage app mentioned in this post seems to no longer exist:

So… what gives? It seems I can make subpages but they don’t work. What have I missed?

2

There is an example app that uses subpages for admin pages. I think the routing principles are the same.

3

Thanks @AaronCollier, that example helped a lot.

For posterity, in case someone else is confused, it’s all about the view from the @forge/bridge, which provides the connection, for the app in the iframe, with the URL change in the main parent window.

I have these pages set in manifest.yml:

         pages:
            - title: "In Progress"
              route: "in-progress"
            - title: "Done"
              route: "done"

I’m using Preact so it’s a bit simpler than the React routing in the example. I can just trigger a route change with route().

At the top of my App.js I import the view:

import { requestJira, view } from "@forge/bridge.js";

After that:

const App = (props /*: Props */) /*: string */ => {
  useEffect(() => {
    view.createHistory().then((history) => {
      // The first time the history is set, we need to manually route
      route(history.location.pathname);
      // From then on, we can listen to changes in the URL of the main parent window
      history.listen((location, action) => {
        route(history.location.pathname);
      });
    });
  }, []);

  return html`
    <${AppProvider} >
      <${Router}>
        <${Counter} count="2" path="/in-progress" />
        <${Counter} count="3" path="/done" />
      </${Router}>
    </${AppProvider} >
  `;
};

export default App;

The first time one of the pages is clicked, the app in the iframe loads but the URL of the main parent window is unchanged - i.e. the path is “/”, for which there is no route. Then the URL of the main parent window is changed to the page path and that change is picked up with history.listen(). The app actually loads blank (there is no matching route), then quickly loads the actual page route.

3 Likes
Routing between sub-pages in Project Settings Page module