Extension Factories
Extension API
Extension Points

Button

A button extension allows to render a button on the screen and execute an action when its clicked by a user.

Supported attributes

NameTypeDescription
label *stringText to be used as the label of the button.
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: () => void

Method to bind as the click handler of the button.

* 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.
@conditionstring | Condition, UrlReadingCondition

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

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

/**
 * @clientside-extension
 * @extension-point reff.plugins-example-location
 */
export default ButtonExtension.factory((extensionAPI, context) => {
    return {
        label: 'My Button',
        onAction: () => {
            // execute some action when clicked
        },
        // ... set disabled or loading if needed
    };
});

With context definition

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

interface ExampleContext {
    issueId: string;
}

/**
 * @clientside-extension
 * @extension-point reff.plugins-example-location
 */
export default ButtonExtension.factory<ExampleContext>((extensionAPI, context) => {
    return {
        label: 'My Button',
        onAction: () => {
            console.log('Jira issue id', context.issueId);
        },
    };
});

Rate this page: