Last updated Jul 8, 2022

Rate this page:

Jira full-page modules

As an app developer, you can use the following Jira full-page modules to create full-page experiences in your Forge app:

Global pages

Use the Jira global page module for larger apps that span multiple projects and entities. The module provides a full-page experience for all app users who use the instance.

You can access the global pages created by the app via Apps in the header. If an app has multiple global pages, clicking the app in the Apps menu navigates to the path /.

Apps navigation

Apps with a single global page

From the header, select Apps, then select the app.

Apps with a single global page don’t display a sidebar.

Apps with a single global page

Apps with multiple global pages

Clicking an app in the Apps menu navigates to the path /. The sidebar displays the name of the app, as well as the app’s global pages.

Apps with multiple global pages

Project pages

Most users do their work in the project context, whether it’s on the board, queue, or issue view. Use the Jira project page module to bring your app closer to where users do their work. Project pages are most suitable for the full-page apps in a single project.

Project pages can be accessed via the project sidebar. Apps that create a project page have a menu item in the project sidebar, in the Apps section. The Apps section is displayed below the native sections in the project.

Project pages navigation

Apps with a single project page

Clicking the app in the project sidebar opens up the project page.

Project pages navigation

Apps with multiple project pages

Clicking the app in the project sidebar displays a contextual sidebar, which then displays the app name and its multiple project pages below. App users can navigate to these project pages.

Project pages navigation

Project settings pages

Use the Jira project settings page module to build a settings page that only project admins can access.

You can access project settings pages from the project settings sidebar. Apps that create a project settings page have a menu item in the project settings sidebar, in the Apps section. The Apps section is displayed below the native sections of the project settings.

Project pages navigation

Apps with a single project settings page

Clicking the app in the project settings sidebar opens up the project page.

Single project settings page

Apps with multiple project settings pages

Clicking the app in the project sidebar displays a contextual sidebar, which then displays the app name and its multiple project pages below. Project admins can navigate to these project settings pages.

Multiple project settings page

Admin pages

The Jira admin page module works best for the following use cases:

  • creating apps with full-page experiences for the admin of an instance
  • providing the global settings of an app

You can access the admin page of an app from the Apps administration sidebar, below the native sections.

Apps with single admin page

Apps with a single admin page

  1. From the header, select Apps, and then select Manage apps.
  2. Select the app from the Apps section. The app's page is displayed.

Apps with single admin page

Apps with multiple admin pages

  1. From the header, select Apps, and then select Manage apps.
  2. Select the app from the Apps section. The app's pages are displayed.

Apps with multiple admin pages

Building your page

The building blocks of full-page experiences in Forge apps are:

Page content

Forge has two options for building the user interface of your apps: UI kit and custom UI. The user interface essentially becomes the page content of your app.

The UI kit lets you quickly and easily build a user interface for your app. It's made up of three main concepts: components, hooks, and event handlers.

Custom UI lets you define your own user interface using static resources, such as HTML, CSS, JavaScript, and images. Forge hosts your static resources, letting your app display custom UI on Atlassian products.

Layout

Pages support two layout types:

  1. Native: Suits simple pages that don’t need multiple items in the header. Use the native layout to get the header styled like an Atlassian page.
  2. Basic: Suits pages that need several items in the header, like actions, branding, and more. Use the basic layout to get more surface area in the header.

Contextual navigation

A contextual sidebar is available when your app has multiple pages of the same kind. From the contextual sidebar you can:

  • display the app name and icon
  • navigate to the subpages and sections

App name and app icon

You can use the name and icon of an app as branding for your app. We recommend using a colored icon for your app icon.

App icon

Menu labels and their corresponding icons are key for users to find their way when using an app. A menu label and its icon should clearly describe the functionality of a particular page, as well as reflect your branding.

Single menu item

Sections

Sections provide the ability to group two or more pages in the contextual sidebar. This helps users find relevant items when navigating the sidebar. We discourage using sections for a single page.

Multiple menu items

Rate this page: