Client-side Extensions Developer

Client-side Extensions Developer

Rate this page:

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
3
4
5
6
7
8
9
type PanelRenderCallback = (container: HTMLElement) => void;

type PanelCleanupCallback = (container: HTMLElement) => void;

interface PanelAPI {
    onMount: (callback: PanelRenderCallback) => this;

    onUnmount: (callback: PanelCleanupCallback) => this;
}

onMount()

Provides a container to render custom content in it.

Callback Parameters

NameTypeDescription
containerHTMLElementHTML element to be used as a container to render custom content.

onUnmount()

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

Callback Parameters

NameTypeDescription
containerHTMLElementHTML element that was provided to render custom content in it. It's important to unmount any React component you've mounted in there to avoid keeping the component alive when the container is destroyed.

Usage example

my-extension.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { AsyncPanelExtension, PluginAPI } from '@atlassian/clientside-extensions';
import { Context } from './types';

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

/**
 * @clientside-extension
 * @extension-point reff.plugins-example-location
 */
export default AsyncPanelExtension.factory((pluginAPI: PluginAPI, context: Context) => {
    return {
        label: 'JS Async Panel',
        onAction: panelModuleLoader,
    };
});

panel-module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { AsyncPanelExtension } from '@atlassian/clientside-extensions';
import { Context } 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: Context) {
    panelAPI.onMount(container => {
        container.innerHTML = getPanelContent();
    });
}

types.ts

1
2
3
export interface Context {
    /*...*/
}

Rate this page: