AsyncPanel API

About

API to render and manipulate extensions of type AsyncPanel. This API works similar to the Panel API. 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.

Signature

1
2
type LifecycleCallback = (container: HTMLElement) => void;

interface AsyncPanelApi {
    onMount: (callback: LifecycleCallback) => AsyncPanelApi;

    onUnmount: (callback: LifecycleCallback) => AsyncPanelApi;
}

onMount()

Provides a container to render custom content in it.

Callback Parameters

onUnmount()

Allows to set a cleanup callback to be called when the provided container is about to be deleted.

Callback Parameters

Usage example

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>((pluginAPI, context) => {
    return {
        onAction: panelModuleLoader,
    };
});

panel-module.ts

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

function getPanelContent() {
    return `
        <h4>Cool panel</h4>
        <p>This is some cool content generated with JS</p>
    `;
}

export default function initAsyncPanel(
  panelApi: AsyncPanelExtension.Api,
  context: ExampleContext
) {
    panelApi.onMount(container => {
        container.innerHTML = getPanelContent();
    });
}

types.ts

1
2
export interface ExampleContext {
    label: string;
}