Forge Developer

Beta

Forge Developer

Beta

Rate this page:

IssuePanel

The IssuePanel component renders content above the Activity panel on a Jira issue. IssuePanel is the top-level component required for the jira:issuePanel module.

This module can be used in Jira Core, Jira Software, and Jira Service Desk. It works in the new issue view but not the old issue view.

The following context variables are available for issue panels:

  • localId - The unique ID of the panel, which makes panel instances distinct from each other if allowMultiple is set to true.
  • extensionContext.isNewToIssue - This variable is set to true when a panel has just been added to an issue; otherwise, it's false.

See an example of how to access these variables with the useProductContext UI hook.

A list of IssuePanelAction components can be provided to add items to the more actions ••• menu. You can view existing issue panel actions via the more actions ••• menu.

Usage

1
import ForgeUI, { IssuePanel } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for displaying multiple components. Can contain any UI kit component.
actionsArray<IssuePanelAction>A list of IssuePanelAction components that correspond to items in the actions menu. No more than five actions can be defined.

Example

A hello world example of the issue panel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import ForgeUI, {IssuePanel, IssuePanelAction, render, Text, useProductContext, useState} from '@forge/ui';

const App = () => {
    const {localId: panelId, extensionContext: {isNewToIssue}} = useProductContext();
    return (
        <IssuePanel actions={[
            <IssuePanelAction text="Custom action" onClick={() => {}}/>
        ]}>
            <Text>Hello, world!</Text>
        </IssuePanel>
    );
};
export const run = render(
    <App/>
);

Preview

Example of an Issue panel

Rate this page: