Custom UI bridge

Rate this page:

view

The view object refers to the context in which a resource is loaded. For example, a modal.

close

The close method enables you to request the closure of the current view. For example, close a modal.

Function signature

1
function close(): Promise<void>;

Example

1
2
3
import { view } from '@forge/bridge';

view.close();

submit

The submit method enables you to request form submission on the Jira custom field edit, Jira custom field type edit, and Jira context configuration views.

The submit method throws an error if the submission fails.

Function signature

1
function submit(payload: mixed): Promise<void>;

Where the payload shape is defined by the requirements of the views.

Example

This example shows how to request form submission on a Jira custom field edit.

1
2
3
4
5
6
7
8
9
10
import { view } from '@forge/bridge';

const onSubmit = async () => {
  const fieldValue = 'new-value';
  try {
    return await view.submit(fieldValue);
  } catch (e) {
    // Handle the error
  }
}

getContext

The getContext method enables you to retrieve contextual information for your custom UI app. The data available depends on the module in which your app is used.

Function signature

1
function getContext(): Promise<{ [key: string]: any }>;

Example

1
2
3
import { view } from '@forge/bridge';

const context = await view.getContext();
  • There may be an extensionContext property in the context data. This extensionContext property is deprecated and will soon be removed. Use the extension property instead.
  • Not all of the values in the context data are guaranteed to be secure, unalterable, and valid to be used for authorization. See App context security for more information.

createHistory

The createHistory method enables your custom UI app to manipulate the current page URL for routing within full page apps.

When using this API, the path and location properties are always relative to your app's URL.

Note, the createHistory method is only available in the jira:adminPage, jira:projectPage, and confluence:spacePage modules.

Learn how to add routing to a full page app with React Router.

Function signature

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
type LocationDescriptor = {
  pathname: string;
  search?: string;
  hash?: string;
  state?: any;
};
type UnlistenCallback = () => void;
type Action = 'POP' | 'PUSH' | 'REPLACE';

function createHistory(): Promise<{
  action: Action;
  location: LocationDescriptor;
  push(path: string, state?: any): void;
  push(location: LocationDescriptor): void;
  replace(path: string, state?: any): void;
  replace(location: LocationDescriptor): void;
  go(n: number): void;
  goBack(): void;
  goForward(): void;
  listen(
    listener: (location: LocationDescriptor, action: Action) => void
  ): UnlistenCallback;
}>;

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { view } from '@forge/bridge';

const history = await view.createHistory();

// e.g. URL begins as http://example.atlassian.net/example/apps/abc/123

history.push('/page-1');
// this updates the URL to http://example.atlassian.net/example/apps/abc/123/page-1

history.push('/page-2');
// this updates the URL to http://example.atlassian.net/example/apps/abc/123/page-2

history.go(-2);
// this updates the URL to http://example.atlassian.net/example/apps/abc/123

Rate this page: