Example apps for Jira

Before you begin exploring these example apps, you'll need to set up the Forge CLI first. Learn more about getting started.

Once the Forge CLI is up and running, clone an example app repository to explore and customize it locally. Each repository's README.md file contains quickstart instructions and other details about the app.

For more information, refer to our getting started guides for building Bitbucket, Confluence, Jira, and Jira Service Management apps. Our tutorials and guides also offer useful information for common tasks.

Issue translator app with UI Kit

Adds a Jira issue panel module that translates the contents of an issue into a range of different languages using the Azure Translator Text API.

Details

• Code: Issue translator repository
• Products: Jira
• Modules: jira:issuePanel
• Custom UI: @forge/bridge
• UI Kit 1: none
• UI Kit:
  • Button, ButtonSet, Strong and Text components from @forge/react library
  • Fragment, useEffect and useState component and hooks from react library
• Runtime:: @forge/resolver and @forge/api
• Other:
  • Translates the Jira summary and description fields using Azure Translator Text API
  • Uses secure environment variables for Azure API authentication tokens.

Jira project stats app with UI Kit

Displays Jira project stats in a pie chart and allows for the export of issue data as a .json file. The app adds the items 'Show stats' and 'Export issue data' to the more actions (•••) menu of the Jira board and backlog views.

Details

• Code: Jira project stats app repository
• Products: Jira
• Modules: jira:backlogAction and jira:boardAction
• Custom UI: none
• UI Kit 1: none
• UI Kit:
  • Inline, PieChart, SingleValueChart, Spinner, Stack, Text and useProductContext components and hooks from @forge/react library
  • useEffect, useRef and useState component and hooks from react library
  • requestJira, showFlag and useRef APIs from @forge/bridge library
• Runtime: none

Project introduction app with UI Kit

The app displays a summary of the project's objective and milestones using Jira Global page module.

Details

• Code: Project introduction
• Products: Jira
• Modules: jira:globalPage
• Custom UI: none
• UI Kit 1: none
• UI Kit:
  • Inline, Stack, Button, Heading, Tag, Text, Lozenge
• Runtime:: @forge/resolver and @forge/api

Todo app with Custom UI

Adds a simple todo list to a Jira issue for simple tasks that do not require a description, tracking, or workflow.

Details

• Code: Todo repository
• Products: Jira
• Modules: jira:issuePanel
• Custom UI: Use of resources, resolvers, and bridge.
• UI Kit 1: none
• Other:
  • Implements a set of backend resolver functions for custom UI to communicate with a Faas backend.
  • Uses a combination of Atlaskit and custom styled components

UI modifications with Custom UI

This app serves as an end-to-end example of how to write and use UI modifications in Jira Cloud.

Details

• Code: Jira UI modifications
• Products: Jira
• Modules: jira:uiModifications and jira:adminPage
• Custom UI: Use of @forge/jira-bridge
• UI Kit 1: none
• Other:
  • Uses REST endpoints to assign UI modification entities to specific contexts.
  • Uses react-router@^6.2 to handle each subpage route.

JQL editor app with Custom UI

Adds a JQL editor to any Jira project page. This editor visualizes the statuses of all issues matching a query.

Details

• Code: JQL editor repository
• Products: Jira
• Modules: jira:projectPage
• Custom UI: @forge/bridge
• UI Kit 1: none
• Other:
  • Requests issue and JQL autocomplete data from the Jira REST APIs using the Forge bridge module.
  • Uses the jql-editor-forge component and Chart.js for visualization.

JQL function - subtaskOf()

Adds a JQL function that allows you to search for issues that are subtasks of the issues returned by the query passed as an argument.

Details

• Code: JQL function repository
• Products: Jira
• Modules: jira:jqlFunction
• Other:
  • See the JQL functions page for more information about the architecture of JQL functions.

Currency exchange app

Adds a custom field to a Jira issue that returns the total value of one or more currency amounts exchanged into a common currency. For example, you could enter currency amounts in euros and US dollars to display the total in Australian dollars. If no currency values are provided the field displays "No values yet." This message is applied using the context configuration.

Details

• Code: Currency exchange app repository
• Products: Jira
• Modules: jira:customFieldType
• Custom UI: none
• UI Kit 1:
  • Button, CustomField, CustomFieldEdit, CustomFieldContextConfig, Form, Select, TextField, Fragment, Table, Text components.
  • useState, useProductContext hooks.
• Other:
  • Uses the useProductContext hook to get the issue global configuration based on the CustomFieldContextConfig component.
  • Uses a jira:customFieldType object type in the manifest with formatter and schema properties.

Issue countries app

Adds an issue panel that displays a world map, where the highlighted countries are related to the current issue that's selected via a custom field.

Details

• Code: Forge issue countries repository
• Products: Jira
• Modules: jira:issuePanel
• Custom UI: none
• UI Kit 1:
  • Button, Fragment, Image, and Text components.
  • useProductContext, useAction, and useState hooks.
• Other:
  • Calls the Jira REST API with asUser to get issue details and custom fields.

Issue health app

Adds a Jira issue glance that displays the health of the issue. The app determines the issue health from the number of issues blocked, number of days without updates, and how many sprints have contained the issue. The app has configuration panel that is placed in admin pages.

Details

• Code: Issue health repository
• Products: Jira
• Modules: jira:issueGlance, jira:adminPage
• Custom UI: none
• UI Kit 1:
  • Button, Fragment, Table, Form, ModalDialog and Text components.
  • useProductContext, useEffect and useState hooks.
• Other:
  • Calls the Jira REST API with asUser to get issue details.
  • Uses the app storage API to store app configuration.

Issue translator app with UI Kit 1

Adds a Jira issue panel that translates the contents of an issue into a range of different languages using the Azure Translator Text API.

Details

• Code: Issue translator repository
• Products: Jira
• Modules: jira:issuePanel
• Custom UI: none
• UI Kit 1:
  • Button, ButtonSet, Fragment, and Text components.
  • useProductContext and useState hooks.
• Other:
  • Translates the Jira summary and description fields using Azure Translator Text API
  • Uses secure environment variables for Azure API authentication tokens.

QA demo validator

Adds a Jira issue glance that shows whether or not all required testing areas have been checked during QA demos. You can create and customize a checklist that contains the required testing areas per project.

Details

• Code: QA demo validator repository
• Products: Jira
• Modules: jira:adminPage and jira:issueGlance
• Custom UI: none
• UI Kit 1:
  • AdminPage, Button, Checkbox, CheckboxGroup, Cell, Form, Fragment, Head, IssueGlance, ModalDialog, Option, Row, Table, Text, and Select components.
  • useAction, useProductContext, and useState hooks.
• Other:
  • QA demos are a common practice of presenting a project's code and functionality to a peer engineer. This helps to confirm that the implemented feature works as expected and complies with standards and requirements. See How Atlassian Does QA for more details.