Panel API

About

API to render and manipulate extensions of type Panel.

Signature

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

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

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

onMount()

Provides a container to render custom content in it.

Callback Parameters

Usage

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

/**
 * @clientside-extension
 * @extension-point reff.plugins-example-location
 */
export default PanelExtension.factory(() => {
    function getPanelContent() {
        return `
            <h4>Cool panel</h4>
            <p>This is some cool content generated with JS</p>
        `;
    }

    return {
        onAction: (panelApi) => {
            panelApi.onMount((container) => {
                container.innerHTML = getPanelContent();
            });
        },
    };
});

onUnmount()

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

Callback Parameters

Usage

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

/**
 * @clientside-extension
 * @extension-point reff.plugins-example-location
 */
export default PanelExtension.factory(() => {
    const onClick = () => {
        alert('You clicked a button');
    };

    return {
        label: 'JS Panel',
        onAction: (panelApi) => {
            let button;

            panelApi
                .onMount((container) => {
                    button = document.createElement('button');
                    button.innerText = 'Click me!';
                    button.addEventListener('click', onClick);

                    container.appendChild(button);
                })
                .onUnmount((container) => {
                    // use to cleanup any event listener, subscription, or unmount components
                    button.removeEventListener('click', onClick);
                });
        },
    };
});