Bitbucket modules
Common modules
Compass modules
Confluence modules
Jira modules
Jira Service Management modules

This module now has support for UI Kit 2 (preview) for faster user experiences and to access additional React features.

For more information on all the supported modules, see the Supported products and their modules section.

Jira issue panel

The jira:issuePanel module adds an issue panel to a Jira issue when a configured button is clicked. The content of the module is shown above the Activity panel on a Jira issue.

This module can be used in Jira Work Management, Jira Software, and Jira Service Management.

It works in the new issue view but not the old issue view.

See the IssuePanel component documentation for more details.

Example of an Issue panel

Properties

PropertyTypeRequiredDescription
key

string

Yes

A key for the module, which other modules can refer to. Must be unique within the manifest.

Regex: ^[a-zA-Z0-9_-]+$

functionstringThe issue panel module requires either a function for usage with the UI kit, or a resource when building with custom UI.A reference to the function module that defines the issue panel. This function must return the IssuePanel component.
resourcestringA reference to the static resources entry that your issue panel wants to display. See resources for more details.
render'native'Yes for UI Kit 2Indicates if the module is a UI Kit 2 module.
resolver{ function: string } or
{ endpoint: string }
Yes

Set the function property if you are using a hosted function module for your resolver.

Set the endpoint property if you are using Forge remote (preview) to integrate with a remote back end.

Can only be set if the module is using the resource property.

viewportSize'small', 'medium', 'large' or 'xlarge'The display size of resource. Can only be set if the module is using the resource property. Remove this property to enable automatic resizing of the module.
titlestringYesThe title of the issue panel, which is displayed above the panel. The title also appears in the ••• menu that’s clicked to display the issue panel.
iconstringYes

The icon that will be displayed as a button. When the button is clicked, an issue panel is added to the issue view.


For custom UI and UI kit apps, the icon property accepts a relative path from a declared resource. Alternatively, you can also use an absolute URL to a self-hosted icon. See Icons for more information.

If no icon is provided, or if there's an issue preventing the icon from loading, a generic app icon will be displayed.

allowMultiple

boolean

Controls whether or not multiple instances of the issue panel are shown when clicking the issue panel button repeatedly. Defaults to false.

If set to true, a maximum number of five instances of the issue panel can be shown on the issue.

displayConditionsobjectThe object that defines whether or not a module is displayed in the UI of the app. See display conditions.

Extension data

Custom UI

Use the getContext bridge method to access the extension context in custom UI.

PropertyTypeDescription
typestringThe type of the module.
issue:
  id
stringThe id of the issue on which the module is rendered.
issue:
  key
stringThe key of the issue on which the module is rendered.
issue:
  type
stringThe type of the issue on which the module is rendered.
issue:
  typeId
stringThe id of the type of the issue on which the module is rendered.
project:
  id
stringThe id of the project where the module is rendered.
project:
  key
stringThe key of the project where the module is rendered.
project:
  type
stringThe type of the project where the module is rendered.
isNewToIssuebooleanDefines if the panel was just added to the issue.

UI kit

Use the useProductContext hook to access the context in UI Kit.

Extension context

PropertyTypeDescription
typestringThe type of the module.

Platform context

PropertyType/valueDescription
issueIdstringThe ID of the issue on which the module is rendered.
issueKeystringThe key of the issue on which the module is rendered.
issueTypestringThe type of the issue on which the module is rendered.
issueTypeIdstringThe ID of the type of the issue on which the module is rendered.
projectIdstringThe ID of the project where the module is rendered.
projectKeystringThe key of the project where the module is rendered.
projectTypestringThe type of the project where which the module is rendered.
isNewToIssuebooleanDefines if the panel was just added to the issue.

Events

Apps can receive a frontend event that will notify your app that an issue has been changed. This event is triggered when an issue is updated or commented on. This event is only available for Jira issue view modules.

1
2
import {events} from '@forge/bridge';
    events.on('JIRA_ISSUE_CHANGED', (data) => {
    console.log('JIRA_ISSUE_CHANGED (Forge)', data);
});

However, if you have multiple issue view modules in your app, you should use the Jira issue view background script module or its Connect counterpart. This will give you a central place for fetching issue details, thus reducing the number of network requests and improving the user experience. Fetching issue details separately for every module would introduce unnecessary overhead and degrade performance.

Data shape

1
2
{
    "issueId": string,
    "projectId": string,
    "changes":[{
        "changeType": "updated" | "commented",
        "atlassianId": string
    }]
}
PropertyDescription
issueIdID of the issue the app is rendered on.
projectIdID of the project the issue belongs to.
changesList of issue changes
  • changeType - type of the change
    • commented - a comment has been added to the page
    • updated - the issue has been updated
  • atlassianId - ID of the user who made the change

Limitations

  • UI kit apps don’t have an event system in place and so aren’t supported.
  • There is a delay between the moment the issue is modified and when the event is emitted. It might take up to a few seconds.
  • We can’t guarantee that all issue change events will be received by Jira. Therefore, the issue view may sometimes remain stale.
  • When the issue is modified by the user who is currently viewing it, it will not be refreshed. This is because we assume the change was made by that same user and there is no need for an update.

Rate this page: