IssuePanel

A piece of content displayed in the body of a Jira issue.

Example of an Issue panel

Usage notes

IssuePanel is the top-level component required for the jira:issuePanel module.
Can be used in Jira Work Management, Jira Software, and Jira Service Management new issue view.
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.

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.

The example shows how to access these variables with the useProductContext UI hook.

Import statement

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

Props

Name	Type	Required	Description
`children`	`Array<ForgeComponent>`	Yes	A container for displaying multiple components. Can contain any UI kit component.
`actions`	`Array<IssuePanelAction>`		A list of IssuePanelAction components that correspond to items in the actions menu. No more than five actions can be defined.

Example

1
2
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/>
);