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

1
2
3
4
5
6
7
8

{
  "icon": {
    "width": 16,
    "height": 16,
    "url": "/my-icon.png"
  }
}

1
2
3
4
5
6
7
8
9

{
    "key": "my-addon",
    "modules": {
        "configurePage": {
            "key": "configure-me",
        }
    }
}

1
2
3
4

{
  "value": "My text"
}

1
2
3
4

{
  "value": "My text"
}