Common UI kit components
Confluence UI kit components
Jira UI kit components

Rate this page:

IssuePanel

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

Example of an Issue panel

Example: Issue alerting app

Usage notes

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
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

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

Rate this page: