Extension Factories
Extension API
Extension Points

AsyncPanel

An asynchronous panel extension allows the creation of custom HTML content in a container provided by the plugin system.

This API works similar to the Panel factory. The only difference is the behavior of onAction attribute function.

You should use dynamic imports syntax inside the onAction function to defer loading the panel module. The onAction function must return a Promise instance.

The AsyncPanel extension can be used to defer loading of the panel JavaScript module until the extension is initialized by the product runtime.

Supported attributes

NameTypeDescription
weightnumber

Determines the order in which this extension appears respect to others in the same location.

Extensions are displayed top to bottom or left to right in order of ascending weight.

onAction *function

signature: (asyncPanelApi) => Promise

A module provider function. The onAction function must return a Promise instance. The plugin system will provide an API with lifecycles to render/clean up any current content into a provided container.

Refer to AsyncPanel API documentation for more info.

* required

Always remember to check the documentation of each product's extension point and supported attributes.

Read more information about Revealing extension points on the page.

Supported annotations

NameTypeDescription
@clientside-extension *-Indicates that the next function is an extension factory to be consumed by the webpack plugin.
@extension-point *stringDefines the location where the extension will be rendered.
@weightnumber

Determines the order in which this extension appears respect to others in the same location.

Extensions are displayed top to bottom or left to right in order of ascending weight.

@conditionstring | Conditions

Defines one or multiple conditions that must be satisfied for the extension to be displayed.

The conditions are evaluated on the server, and created with Java.

If one of the conditions is not met, the code of the extension won't be loaded in the client.

For more information about the conditions please refer to the examples of Web items documentation.

* required

Usage

my-extension.ts

1
2
import { AsyncPanelExtension } from '@atlassian/clientside-extensions';

// Dynamic module loader
const panelModuleLoader = () => {
    return import('./panel-module.ts');
};

/**
 * @clientside-extension
 * @extension-point reff.plugins-example-location
 */
export default AsyncPanelExtension.factory(() => {
    return {
        onAction: panelModuleLoader,
    };
});

panel-module.ts

1
2
import { AsyncPanelExtension } from '@atlassian/clientside-extensions';

export default function initAsyncPanel(asyncPanelApi: AsyncPanelExtension.Api) {
    asyncPanelApi
        .onMount((container) => {
            // use the container to render your content in it
        })
        .onUnmount((container) => {
            // run your clean up code. e.g. stop listening to events, unmount your component from the container.
        });
}

With context definition

types.ts

1
2
export interface ExampleContext {
    issueId: string;
    title: string;
}

my-extension.ts

1
2
import { AsyncPanelExtension } from '@atlassian/clientside-extensions';
import { ExampleContext } from './types';

// Dynamic module loader
const panelModuleLoader = () => {
    return import('./panel-module.ts');
};

/**
 * @clientside-extension
 * @extension-point reff.plugins-example-location
 */
export default AsyncPanelExtension.factory<ExampleContext>((extensionAPI, context) => {
    return {
        onAction: panelModuleLoader,
    };
});

panel-module.ts

1
2
import { AsyncPanelExtension } from '@atlassian/clientside-extensions';
import { ExampleContext } from './types';

export default function initAsyncPanel(
  asyncPanelApi: AsyncPanelExtension.Api,
  context: ExampleContext
) {
    panelApi.onMount(container => {
        container.innerHTML = `
          <h1>${context.title}</h1>
          <p>Jira issue id: ${context.issueId}</p>
        `;
    });
}

Rate this page: