New issue view UI locations

New Jira issue view

These design guidelines relate to the new Jira issue view, which is currently only available to some Jira Software users. New modules and extension patterns on this page only relate to Jira Software right now, but they'll be relevant for Jira Service Desk in future. Learn more about the Alpha preview.

The most common location to add content from your app is on Jira's issue view. In the new Jira issue view, there are two main ways for you to add content: a quick-add button to add issue content, and a glance. You can also create a view that users can switch to in the activity section of the issue, and include items within the issue actions menu.

Issue view locations


Issue content

The issue content module lets you create an experience where users can add content or media from your app via a quick-add button. The content they add helps to describe the Jira issue. The new Jira issue view has a standard set of quick-add buttons to add attachments, subtasks, and linked issues, and you can add content from your app to this list.

If your app lets users embed a diagram, for example, or link to a design prototype or external document, you should use a quick-add button.

Quick-add buttons - annotated

Check out our design guidelines for tips on creating a great user experience with your app.

Properties

Properties for issue content are defined in the documentation for the issue content module.

Sample descriptor JSON

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": {
    "jiraIssueContents": [
      {
        "icon": {
          "width": 24,
          "height": 24,
          "url": "/my_icon.svg"
        },
        "target": {
          "type": "web_panel",
          "url": "/url_to_panel_content_page.htm"
        },
        "tooltip": {
          "value": "This is a tooltip"
        },
        "name": {
          "value": "My Issue Content Panel"
        },
        "key": "my-issue-content-panel"
      }
    ]
  }
}

Quick-add button backwards compatibility

The quick-add pattern is backwards compatible with the atl.jira.view.issue.left.context location, but we strongly recommend you create or update your app using the Atlassian Connect issue content module to provide a high quality user experience.


Glance

Glances are special user interface elements that appear in the right sidebar of the issue view under the status, and alongside other fields like assignee, priority, and labels. They provide a quick way for a user to get an overview of some information provided by your app that relates to the issue. A user can interact with a glance to open its detail view to get more information from your app.

Glance example - annotated

Check out our design guidelines for tips on creating a great user experience with your app.

Properties

Properties for glances are defined in the documentation for the issue glance module.

Sample descriptor JSON

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
{
  "modules": {
    "jiraIssueGlances": [
      {
        "icon": {
          "width": 24,
          "height": 24,
          "url": "my_icon.svg"
        },
        "content": {
          "type": "label",
          "label": {
            "value": "my label"
          }
        },
        "target": {
          "type": "web_panel",
          "url": "/panel_url"
        },
        "name": {
          "value": "My Issue Glance"
        },
        "key": "my-issue-glance"
      }
    ]
  }
}

Glance backwards compatibility

Glances are backwards compatible with the atl.jira.view.issue.right.context location, but we strongly recommend you create or update your app using the Atlassian Connect issue glance module to provide a high quality user experience.


Issue actions and activity

The new issue view is backwards-compatible with the existing issue actions and issue activity locations. See issue view UI locations for more info on issue actions, and the tab panel module for info on issue activity.