Issue Glance

This module adds a special user interface element that appears in the right side of the new Jira issue view under the status and alongside other fields like the assignee, priority, and labels.

Glances provide a quick way for a user to get an overview of some information, provided by your app, that relates to an issue.

The Glance object (which includes your icon, content and URL) is defined using the Issue Glance module.

Setting the status for a Glance

The status of a Glance for a specific an issue can be set using the Set issue property API.

The issue property key needs to be formatted as com.atlassian.jira.issue:[addonKey]:[moduleKey]:status to set the status.

The JSON in your PUT request to set the status should follow this format depending on the type of status you wish you display:

• Lozenge: { type: 'lozenge', value: { label: 'Hello', type: 'default' } }. For available lozenge types, refer to lozenge appearance.
• Icon: { type: 'icon', value: { label: '/img/tick.png' } }. Note that label is the URL relative to your app's base URL.
• Badge: { type: 'badge', value: { label: '123' } }. Note that label must be a numeric string.

More recommended usage and user experience suggestions are available in the design guidelines.

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

{
  "modules": {
    "jiraIssueGlances": [
      {
        "icon": {
          "width": 0,
          "height": 0,
          "url": "my_icon.svg"
        },
        "content": {
          "type": "label",
          "label": {
            "value": "my label"
          }
        },
        "target": {
          "type": "web_panel",
          "url": "/panel_url"
        },
        "name": {}
      }
    ]
  }
}

ISSUE_GLANCE_OPENED event

When a user clicks a glance, the glance panel slides in and covers the details on the right side of the issue. The ISSUE_GLANCE_OPENED event is sent. which you can listen for using the JavaScript API. See the example provided below.

1
2
3

AP.events.on('ISSUE_GLANCE_OPENED', function() {
        // You can decide the logic here in add-on.
  });

You can use this to load additional web resource or trigger activity in your add-on.

More recommended usage and user experience suggestions are available in the design guidelines.

Properties

1
2
3
4
5
6
7

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

1
2
3
4
5
6
7
8

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

1
2
3
4
5

{
  "name": {
    "value": "My Label"
  }
}