Issue Content

This module adds a quick-add button alongside the existing quick-add buttons for attachments, subtasks, and linked issues in the new Jira issue view. Users will use your quick-add button to add content to help describe, and ultimately resolve, an issue.

When a user clicks on your app's quick-add button, a panel is added below the issue description that displays content from a URL provided by your app (similar to the web panel module). This URL must be a relative URL from your app's server.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
  "modules": {
    "jiraIssueContents": [
      {
        "icon": {
          "width": 0,
          "height": 0,
          "url": "/my_icon.svg"
        },
        "target": {
          "type": "web_panel",
          "url": "/url_to_panel_content_page.htm"
        },
        "tooltip": {
          "value": "This is a tooltip"
        },
        "contentPresentConditions": [
          {
            "condition": "user_is_admin",
            "invert": false
          }
        ],
        "jiraNativeAppsEnabled": false,
        "name": {
          "value": "My Issue Content Panel"
        },
        "key": "my-issue-content-panel"
      }
    ]
  }
}

ISSUE_QUICK_ADD_CLICKED event

When a user clicks your quick-add button, the ISSUE_QUICK_ADD_CLICKED event is sent. You can listen for this event using the JavaScript API. Here's an example:

1
2
3
4
5
6
7
8
9
10
11
12
AP.events.on('ISSUE_QUICK_ADD_CLICKED', function(event){
  // display a dialog when quick add button was clicked. event = { isNewToIssue: boolean }
  // isNewToIssue is true if this is first time content panel being added to current issue.
  // isNewToIssue is false if content panel is already on issue view, and it is selected.
  AP.dialog.create({
        key: 'sized-panel',
        width: '500px',
        height: '200px',
        chrome: true,
        header: JSON.stringify(event)
  });
});

You can use this to design an experience where you want a user to input, select, or review information before interacting with your web panel.

Find out more about recommended usage and get user experience suggestions in the design guidelines.

ISSUE_CHANGED event

Apps can receive a frontend event notifying them that an issue changed, either by being updated or commented on. This event is only available for Jira issue view modules.

1
2
3
AP.events.on('ISSUE_CHANGED', function (data) {
  console.log('ISSUE_CHANGED (Connect)', data);
});

However, if you have multiple issue view modules in your app, you should use the Jira issue view background script module. 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
3
4
5
6
7
8
{
  "issueId": string,
  "projectId": string,
  "changes":[{
    "changeType": "updated" | "commented",
    "atlassianId": string
  }]
}

  • issueId - ID of the issue the app is rendered on
  • projectId - ID of the project the issue belongs to
  • changes - the list of issue changes
  • changeType - type of the change
  • commented - a new comment was 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.

Properties

icon
Type
Required
Yes
Description

Specifies an icon to show alongside the quick-add menu item. The icon should be 24x24 pixels or larger, preferably in .SVG format.

Defines an icon to display.

Example

1
2
3
4
5
6
7
8
{
  "icon": {
    "width": 16,
    "height": 16,
    "url": "/my-icon.png"
  }
}

Properties

url
Type
Format
uri
Required
Yes
Description

The URL of the icon. Your icon needs to be hosted remotely at a web-accessible location. You can specify the URL as an absolute URL or relative to the add-on's base URL.

height
Type
Description

The height in pixels of the icon image.

width
Type
Description

The width in pixels of the icon image.


key
Type
Max length
100
Required
Yes
Pattern
^[a-zA-Z0-9-]+$
Description

A key to identify this module.

This key must be unique relative to the add on, with the exception of Confluence macros: Their keys need to be globally unique.

Keys must only contain alphanumeric characters and dashes.

The key is used to generate the url to your add-on's module. The url is generated as a combination of your add-on key and module key. For example, an add-on which looks like:

1
2
3
4
5
6
7
8
9
{
    "key": "my-addon",
    "modules": {
        "configurePage": {
            "key": "configure-me",
        }
    }
}

Will have a configuration page module with a URL of /plugins/servlet/ac/my-addon/configure-me.


name
Type
Required
Yes
Description

A human readable name.

Represents a string that can be resolved via a localization properties file. You can use the same i18n Property key and value in multiple places if you like, but identical keys must have identical values.

Example

1
2
3
4
{
  "value": "My text"
}

Properties

value
Type
Max length
1500
Required
Yes
Description

The human-readable default value. This will be used if no translation exists. Only the following HTML tags are supported: b, i, strong, em, and code.

i18n
Type
Max length
300
Description

The localization key for the human-readable value. Translations for the keys are defined at the top level of the add-on descriptor.


target
Type
Required
Yes
Description

Specifies the target of this content as a result of clicking on the menu item. Currently, you can only display a web panel in the issue's content area.

Read about Issue Page Target Web Panel.


tooltip
Type
Required
Yes
Description

Specifies a tooltip for the quick-add menu item.

Represents a string that can be resolved via a localization properties file. You can use the same i18n Property key and value in multiple places if you like, but identical keys must have identical values.

Example

1
2
3
4
{
  "value": "My text"
}

Properties

value
Type
Max length
1500
Required
Yes
Description

The human-readable default value. This will be used if no translation exists. Only the following HTML tags are supported: b, i, strong, em, and code.

i18n
Type
Max length
300
Description

The localization key for the human-readable value. Translations for the keys are defined at the top level of the add-on descriptor.


conditions
Type
Description

Conditions can be added to display only when all the given conditions are true.


contentPresentConditions
Type
Description

Specifies a list of Conditions that, when resolved to true, will force the content to always be displayed for that issue. Users have the ability to collapse the content if they don't want to see it.


jiraNativeAppsEnabled
Type
Defaults to
false
Description

This is coming soon. We will update the docs here with the minimum supported Jira iOS and Android app versions when it is ready.

Specifies whether the issue content module will be shown in the Jira mobile and desktop clients.