Rate this page:
The custom UI bridge is a JavaScript API that enables custom UI apps to securely integrate with Atlassian products.
Install the custom UI bridge using the
@forge/bridge npm package.
Import @forge/bridge
using a bundler, such as Webpack.
For example, you can start by creating a new app from one of the custom UI templates.
In the static/hello-world
directory, running npm install && npm build
will bundle the template
static web application together with the custom UI bridge, into the static/hello-world/build
directory, which is used as the resource path in the Forge app's manifest.yml
.
In the template, the bridge is used in static/hello-world/src/App.js
:
1 2 3
import { invoke } from "@forge/bridge";
invoke("getText", { example: "my-invoke-variable" }).then(setData);
The invoke
bridge method enables custom UI apps to run backend FaaS functions hosted by Atlassian.
To use the invoke
bridge method, you need to define your functions using the
custom UI resolver.
1 2 3 4
function invoke(
functionKey: string,
payload?: { [key in number | string]: any; },
): Promise<{ [key: string]: any } | void>
functionKey
in one of your resolver function definitions.The requestJira
bridge method enables custom UI apps to call the
Jira Cloud platform REST API as the current user.
To use the requestJira
bridge method, you need to define a
custom UI resolver using @forge/resolver
at version 0.2.0
or later. You don't need to define any functions in the resolver.
1 2 3 4 5 6 7 8 9
function requestJira(
path: string,
options?: RequestInit,
): Promise<{
status: number,
ok: boolean,
statusText: string,
body: { [key in string | number]: any } | string | null
}>
{ 'content-type': 'application/json' }
1 2 3 4 5
import { requestJira } from '@forge/bridge';
requestJira('/rest/api/3/issue/ISSUE-1').then(response => {
console.log(response);
});
The requestConfluence
bridge method enables custom UI apps to call the
Confluence Cloud platform REST API as the current user.
To use the requestJira
bridge method, you need to define a
custom UI resolver using @forge/resolver
at version 0.2.0
or later. You don't need to define any functions in the resolver.
1 2 3 4 5 6 7 8 9
function requestConfluence(
path: string,
options?: RequestInit,
): Promise<{
status: number,
ok: boolean,
statusText: string,
body: { [key in string | number]: any } | string | null
}>
{ 'content-type': 'application/json' }
1 2 3 4 5
import { requestConfluence } from '@forge/bridge';
requestConfluence('/wiki/rest/api/content').then(response => {
console.log(response);
});
The view
object refers to the context in which a resource is loaded. For example, a modal.
The close
method enables you to request the closure of the current view. For example, close a modal.
1
function close(): Promise<void>
1 2 3
import { view } from '@forge/bridge';
view.close();
Rate this page: