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.
Navigation
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 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 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.
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.
Navigation
Project pages can be accessed via the project sidebar. For Jira Work Management, you can access this from the project view navigation (horizontal navigation above your project’s view) under the Apps dropdown. For all other products, 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.
Apps with a single project page
Clicking the app in the project sidebar opens up the project page.
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 settings pages
Use the Jira project settings page module to build a settings page that only project admins can access.
Navigation
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.
Apps with a single project settings page
Clicking the app in the project settings sidebar opens up the project 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.
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
Navigation
You can access the admin page of an app from the Apps administration sidebar, below the native sections.
Apps with a single admin page
- From the header, select Apps, and then select Manage apps.
- Select the app from the Apps section. The app's page is displayed.
Apps with multiple admin pages
- From the header, select Apps, and then select Manage apps.
- Select the app from the Apps section. The app's pages are displayed.
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
We have three layout types:
- 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.
- 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.
- Blank: Suits pages which need a completely custom look. There are no margins or breadcrumbs and no header.
Custom UI apps support:
- native
- blank
- basic (deprecated)
UI kit apps support:
- native
- basic
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.
Menu label and 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.
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.
Rate this page: