Example apps

Example apps are a great way to see what you can build with Forge. Explore the apps listed below to learn how Atlassian develops Forge apps.

Before you begin

You'll need the Forge CLI set up and running. Learn more about getting started. When the CLI is running, clone an example app repository so you can explore and customize the code locally:

1. Click an example app repository.
2. Clone the repository.
3. Open your command line, and navigate to the example app code.
4. Open the README.md file and follow the quickstart instructions.

At any time, refer back to the Jira and Confluence getting started guides or view the Tutorials and guides page for more information.

Note, the forge register command creates a unique app ID in the manifest.yml file and links the ID to the current developer. Forge apps can currently only be deployed and installed by the developer who is linked to the app.

Compass component details app

Displays details about a Compass component on a page in the Compass component side navigation.

• Code: Component details repository
• Products: Compass
• Modules: compass:adminPage, compass:componentPage
• Custom UI: none
• UI kit (beta):
  • Fragment, Text, Table, Head, Cell, and Row components.
  • useProductContext, useEffect, and useState hooks.
• Other:
  • Uses the GraphQL API Toolkit to fetch component details.

Compass web trigger app

Creates a web trigger to receive and display a message of the day on the Compass admin page for the app.

• Code: Web trigger repository
• Products: Compass
• Modules: webtrigger, compass:adminPage
• Custom UI: none
• UI kit (beta):
  • Fragment, Text, Code, and Heading components.
  • useState hook.
  • webTrigger and storage APIs.
• Other:
  • Demonstrates how to respond to the web trigger event with a listener function.

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 (beta):
  • 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.

DACI helper app

Adds a Confluence macro that inspects the page and identifies missing, inconsistent, or incorrect information based on the DACI Confluence template.

Details

• Code: DACI helper repository
• Products: Confluence
• Modules: macro
• Custom UI: none
• UI kit (beta):
  • Fragment, Image, and Text components.
  • useAction and useProductContext hooks.
• Other:
  • Implements a parser to read Atlassian Document Format (ADF) from a Confluence page.
  • Uses an SVG and the Image component to render results.

Dictionary app

Displays the definition of the selected text in an inline dialog. If the definition doesn't exist, the user can submit a new one.

Details

• Code: Dictionary repository
• Products: Confluence
• Modules: confluence:contextMenu
• Custom UI: none
• UI kit (beta):
  • InlineDialog, ContextMenu, Text, Form, TextArea components.
  • useProductContext, useState, useAction hooks.
• Other:
  • Uses Confluence content properties to store data.
  • Uses the Confluence REST API to read content properties from a page.

External authentication with AWS Cognito

Displays the user profile values from an AWS Cognito user pool in a Confluence code block using external authentication for the API requests.

Details

• Code: External authentication with AWS Cognito repository
• Products: Confluence
• Modules: macro
• Custom UI: none
• UI kit (beta):
  • Text, Link, Button, and Code components.
  • useState hook.
• Other:
  • Uses external authentication to authenticate with AWS Cognito REST APIs.
  • Shows how to access remote providers user profile.

External authentication with Google Photos

Displays photos from Google Photos in Confluence using external authentication for the API requests.

Details

• Code: External authentication with Google Photos
• Products: Confluence
• Modules: macro
• Custom UI: none
• UI kit (beta):
  • Heading, Image, Table, Row, Cell, Em, Button, Tab, Tabs, Text, ModalDialog and Code components.
  • useState, useEffect hook.

Feedback collector app

Adds a form to collect feedback on a Confluence page. When a user submits feedback, a Jira issue is created with the details.

Details

• Code: Feedback collector repository
• Products: Confluence, Jira
• Modules: macro
• Custom UI: none
• UI kit (beta):
  • Button, Form, Fragment, Text, TextArea, and TextField components.
  • useProductContext and useState hooks.
• Other:
  • Calls the Jira REST API with asApp to create issues.
  • Creates Atlassian Document Format (ADF).

Issue alerting app

Adds a Jira issue panel that displays SignalFx alert details, alert charts, and links to view the alert in SignalFx.

Details

• Code: Issue alerting repository
• Products: Jira
• Modules: jira:issuePanel and webtrigger
• Custom UI: none
• UI kit (beta):
  • IssuePanel, IssuePanelAction, Form, ModalDialog, Button, ButtonSet, Image, and Text components.
  • useProductContext and useState hooks.
• Other:
  • Uses a web trigger to link SignalFx detectors to Jira issues.
  • Uses environment variables and the app storage API to store SignalFx alert data by project.

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 (beta):
  • 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 (beta):
  • 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

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 (beta):
  • 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.

Page approver app

Allows the easy approval or rejection of a Confluence page using the Confluence content byline item module.

Details

• Code: Page approver repository
• Products: Confluence
• Modules: confluence:contentBylineItem
• Custom UI: none
• UI kit (beta):
  • ContentBylineItem, InlineDialog, Button, Select, and Text components.
  • useProductContext and useState hooks.
• Other:
  • Uses Confluence content properties to store data.
  • Uses dynamicProperties property.

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 (beta):
  • 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.

Risk assessment custom field

Adds a risk assessment custom field that you can configure on your issue screens in company-managed projects.

Details

• Code: Risk assessment repository
• Products: Jira
• Modules: jira:customField
• Forge UI:
  • CustomField, CustomFieldEdit, CustomFieldView, Fragment, Option, Select, StatusLozenge, and Text components.
  • useProductContext hook.
• Other:
  • Uses the edit property in the app manifest to define the rendering function for the editing experience of custom fields.

Simple sign-up app

Adds a sign-up form to a Confluence page.

Details

• Code: Simple sign-up repository
• Products: Confluence, Jira
• Modules: macro
• Custom UI: none
• UI kit (beta):
  • Button, Cell, Form, Fragment, Head, Row, Table, Text, and TextField components.
  • useContentProperty, useProductContext, and useState hooks.
• Other:
  • Shows a configuration view before displaying the result.
  • Uses Confluence content properties to store data.
  • Calls the Jira REST API with asUser to get information about the user.

Todo app

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 (beta): 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

Wheel of fortune app

Displays a wheel on a Confluence page that spins to make a random choice. You set the options for the wheel using a table on the page.

Details

• Code: Wheel of fortune repository
• Products: Confluence
• Modules: macro
• Custom UI: none
• UI kit (beta):
  • Fragment, Image, Option, Select, Text, and TextField components.
  • useAction, useContentProperty, and useState hooks.
• Other:
  • Uses the Confluence API to read values from a page.
  • Generates an SVG for animation.

JQL editor app

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

Details

• Code: JQL editor repository
• Products: Jira
• Modules: jira:projectPage
• Custom UI: Use of bridge.
• UI kit (beta): none
• Other:
  • Requests for issues and JQL autocomplete data from Jira REST API's using the Forge bridge module.
  • Uses the jql-editor-forge component and Chart.js for visualisation.