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

Jira issue context

If your app previously use Issue Glance module and you want to migrate to the Issue Context module. Check out How to future-proof your Issue Glance implementation on how to migrate.

The jira:issueContext module adds a collapsible panel under the other fields on the right side of the issue view. These panels give your users a quick way to get information related to the issue from your app. Users can expand these panels to view app information or collapse them if they don’t need it.

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.

For UI Kit 1, see the IssueContext component documentation for more information.

Manifest example

1
2
modules:
  jira:issueContext:
    - key: hello-world-issue-context
      resource: main
      resolver:
        function: resolver
      render: native
      title: Hello World!
      description: A hello world issue context.
      label: Hello World!

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_-]+$

functionstringRequired if using UI Kit 1.A reference to the function module that defines the module. Only used in UI Kit 1.
resourcestringRequired if using custom UI or the current version of UI Kit.A reference to the static resources entry that your context menu app wants to display. See resources for more details.
render'native'Yes for UI Kit.Indicates the module uses UI Kit.
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.

titlestringYesThe title of the issue context panel, which is displayed next to its label.
labelstringYesThe text shown on the button for the issue context panel.
iconstringThe absolute URL of the icon that is displayed to the left of the label on the button for the issue context panel.
statusobjectThe badge, lozenge, or icon shown to the right of the label. If status is not specified, then nothing is shown. See status properties.
displayConditionsobjectThe object that defines whether or not a module is displayed in the UI of the app. See display conditions.
dynamicProperties{ function: string }Contains a function property, which references the function module that returns changeable properties. See Dynamic properties for more details.

Status properties

PropertyTypeRequiredDescription
type'badge' | 'lozenge' | 'icon'YesThe UI element used to display the status.
valueobjectYes

This property is an object representing the status value. See status value properties.

Status value properties

PropertyTypeRequiredDescription
labelstringYesThe text to display in the status.

If type is 'badge', this property is a number specified as a string (for example, '3').

urlstring

If type is 'icon', this value controls the URL of the icon to display in the status.

type'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success'

If type is 'lozenge', this value controls the appearance of the status.

Dynamic properties

To use dynamic properties, you must declare them in your app's manifest.yml. Your app must also implement a dynamicProperties handler function.

Jira will retrieve your app's dynamic properties on initial render, which happens when the issue context panel is first expanded. Your app will then render inside the issue context panel and execute its business logic.

When the issue context panel is collapsed, Jira will call your app's dynamicProperties handler function and update the status based on what the function returns.

The app's handler function is passed the payload argument. The payload object has the following structure:

1
2
interface Payload {
  // The cloudId for your site 
  cloudId: string;
  extension: {
    // The module type included in the manifest.yml file.
    type: "jira:issueContext";
    issue: {
      id: string,
      type: string,
      key: string,
      typeId: string
    },
    project: {
      id: string,
      type: string,
      key: string
    }
  };
}

The handler function should return (or resolve with) a plain JavaScript object with status as key.

This is an example of a handler function returning an object:

1
2
function handlerFunction(contextPayload) {
  return {
    "status": {
      "type": "lozenge",
      "value": {
        "label": "Dynamically set status",
        "type": "moved"
      }
    }
  };
}

When you use an icon in your dynamic properties, its source URL is subject to a permission check.

For an example of adding source URL permissions for your icon property, see External Permissions.

Bundled resources in the following formats are allowed by default:

  • resource:<resource key>;<relative path to resource>
  • data:image URIs

See Icons for more information about bundling icons as a resource.

When the source URL does not have the appropriate permissions, the dynamic properties are not loaded. The default configuration is used instead.

Extension data

UI Kit and Custom UI

Use the useProductContext hook to access the extension context in UI Kit or getContext bridge method 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.

UI Kit 1

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

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.

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: