Jira Software Cloud Developer

Jira Software Cloud Developer

Boards

Apps can add content to the main board view in Jira Software, and to the board settings area if you have configuration options that are available on a per-board basis.

We have added experimental support for new ecosystem integration points to next-gen boards and backlogs. Please note that the APIs can change at any time. Get in touch with us in Developer community and share your feedback.

Classic board area

You can add a dropdown menu or button to a board, next to the Boards menu.

Available locations

You can define a web section that will be rendered as a dropdown in the top right corner of the screen using the jira.agile.board.tools.

You can then create web items that use this web section as a location to populate the dropdown.

Board dropdown location

Sample app 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
28
...
"modules": {
    "webSections": [
        {
            "key": "board-links",
            "location": "jira.agile.board.tools",
            "weight": 10,
            "name": {
                "value": "My board app"
            }
        }
    ],   
    "webPanels": [
        {
            "key": "my-web-panel",
            "url": "web-panel?id={board.id}&mode={board.screen}",
            "location": "board-links",
            "name": {
                "value": "My Web Panel"
            },
            "layout": {
                "width": "100px",
                "height": "100px"
            }
        }
    ]
}
...

Properties

The properties required for this location are the standard ones defined in the documentation for web sections and web items.

Classic board configuration

You can also provide a web panel in the board configuration section of the board ( accessible by clicking the (•••) menu on the board then Board settings).

Available locations

For web panels:

  • jira.agile.board.configuration

You don't need to declare a separate web item. Once you declare your web panel in this location, the link in the board settings sidebar is created automatically. See the sample descriptor JSON below.

Board configuration location

Sample app descriptor JSON

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...
"modules": {       
    "webPanels": [
        {
            "key": "my-configuration-page",
            "url": "configuration?id={board.id}&type={board.type}",
            "location": "jira.agile.board.configuration",
            "name": {
                "value": "My board configuration page"
            },
            "weight": 10
        }
    ]
}
...

Properties

The properties required for this location are the standard ones defined in the documentation for web panels.

Next-gen board area

You can add a button to a board. It appears next to the board configuration menu.

Available locations

You can define a web item that will be rendered as a button in the top right corner of the screen using the jira.software.board.tools.

Board button location

Sample app 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
...
"modules": {
  "webItems": [
    {
      "location": "jira.software.board.tools",
      "weight": 200,
      "styleClasses": [
        "webitem",
        "system-present-webitem"
      ],
      "context": "addon",
      "target": {
        "type": "dialogmodule",
        "options": {
          "key": "dialog-module-readme"
        }
      },
      "tooltip": {
        "value": "Board Readme"
      },
      "icon": {
        "width": 24,
        "height": 24,
        "url": "/static/img/info.png"
      },
      "name": {
        "value": "Readme"
      },
      "key": "web-item-board"
    }
  ],
  "dialogs": [
      {
        "url": "/static/index.html?board_id={board.id}",
        "options": {
          "chrome": false,
          "header": {
            "value": "Readme"
          },
          "size": "x-large"
        },
        "key": "dialog-module-readme"
      }
    ]
},
...

Next-gen backlog area

You can add a button to a backlog. It appears in the top right-hand corner.

Available locations

You can define a web item that will be rendered as a button in the top right-hand corner of the screen using the jira.software.backlog.tools.

Backlog button location

Sample app 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
...
"modules": {
  "webItems": [
    {
      "location": "jira.software.backlog.tools",
      "weight": 200,
      "styleClasses": [
        "webitem",
        "system-present-webitem"
      ],
      "context": "addon",
      "target": {
        "type": "dialogmodule",
        "options": {
          "key": "dialog-module-readme"
        }
      },
      "tooltip": {
        "value": "Backlog Readme"
      },
      "icon": {
        "width": 24,
        "height": 24,
        "url": "/static/img/info.png"
      },
      "name": {
        "value": "Readme"
      },
      "key": "web-item-backlog"
    }
  ],
  "dialogs": [
    {
      "url": "/static/index.html?board_id={board.id}",
      "options": {
        "chrome": false,
        "header": {
          "value": "Readme"
        },
        "size": "x-large"
      },
      "key": "dialog-module-readme"
    }
  ]
}
...