Last updated Oct 30, 2024

Example apps for Compass

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.

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 details app with UI Kit

Displays details about various Compass entities on pages in the Compass component side navigation

Code: Component details repository
Products: Compass
Modules: compass:adminPage, compass:componentPage, compass:teamPage
Custom UI: none
UI Kit:
- Text, DynamicTable, Spinner and Code components
- useProductContext hook
Other:
- Uses the GraphQL API Toolkit to fetch component details.

Compass web trigger app with UI Kit

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:
- CodeBlock, Heading, Stack, and Text components.
- useState and useEffect hooks from react library.
- webTrigger and storage APIs.
Other:
- Demonstrates how to respond to the web trigger event with a listener function.

Compass metrics and events ingestor app with Custom UI

Demonstrates a basic admin page skeleton for requesting API credentials. Uses the dataProvider module and webtriggers to set up and ingest metrics and events on a Compass component.

Code: Compass Metrics and Events Ingestor repository
Products: Compass
Modules: webtrigger, compass:adminPage, compass:dataProvider
Custom UI:
- @forge/bridge and resolvers
- webTrigger and storage APIs
UI Kit 1: none
Other:
- Creates events and updates metrics using Compass GraphQL API requests (sent via the Forge GraphQL API toolkit)

Compass details app with UI Kit 1

This example app uses UI Kit 1. If you're using the latest version of UI Kit, this example won't work for your app.

Displays details about various Compass entities on pages in the Compass component side navigation

Code: Component details repository
Products: Compass
Modules: compass:adminPage, compass:componentPage, compass:teamPage
Custom UI: none
UI Kit 1:
- 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 with UI Kit 1

This example app uses UI Kit 1. If you're using the latest version of UI Kit, this example won't work for your 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 1:
- 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.