How to create a gadget for Jira Dashboard [Jira Cloud] – 2021 Developer Tutorial

Jira Cloud Dashboard gadget tutorial

Gadgets in Jira are pretty useful parts of the application that are used very little. Maybe because of there is not much of them or maybe people are not used to looking at their dashboard that much other as for example looking at Kanban boards or backlogs.

In any case, if you would like to start using dashboards, you should totally customize it wish widgets.

Jira offers just a few of the available gadgets, for example:

  • Assigned (issues) to me
  • Filter counts
  • Introduction to Jira
  • Service project reports
  • Bubble chart

Indeed, there are very few of them. You can also customize your Jira by installing a plugin from Atlassian Marketplace and thus extending your Jira with gadgets.

In this tutorial I’ll guide you through how to create such gadget, because it is really easy.

In this tutorial I’ll be using a plugin Issue Calendar for Jira to illustrate, how to create such gadget.

Prerequisites

This tutorial assumes you already know, how to create a Connect app for Jira. If no, please follow the official tutorial: Getting started with Connect.

Tutorial

1. Implement the descriptor’s fields

The very first step to including a gadget within your Connect app is simply including some meta information about the gadget inside your app descriptor.

For example:

{
  "jiraDashboardItems": [
    {
      "description": {
        "value": "Dashboard item description"
      },
      "url": "/dashboard-item-test?dashboardItemId={dashboardItem.id}&dashboardId={dashboard.id}&view={dashboardItem.viewType}",
      "configurable": true,
      "thumbnailUrl": "atlassian-icon-16.png",
      "name": {
        "value": "Dashboard item title"
      },
      "key": "dashboard-item-key"
    }
  ]
}

(The example code from: https://developer.atlassian.com/cloud/jira/platform/modules/dashboard-item/)

Take notice of a few variables in the code above:

  • {dashboardItem.id}
  • {dashboard.id}
  • {dashboardItem.viewType}

The variables will be passed by the URL that your gadget is loaded from and by employing the variables you can set up configuration for each dashboard gadget for each user separately.

2. Ready to go

If you’re wondering if that’s it. Then yes. That’s it. Creating a dashboard gadget for your Connect app is as easy as including a single property within your atlassian-connect.json descriptor file.

The harder part is obviously building up a gadget that is going to be useful for you or your clients and that is task then just for you.

Wrapping up

In this tutorial you’ll learnt how to create a dashboard gadget for a Jira Cloud app. Below this article there are a few links from the article that you should follow. It is our plugin Issue Calendar for Jira or also the official documentation for dashboard gadgets by Jira.

Links:

Last updated: