Step 3: Display data

This step is about putting JavaScript to fetch and display information. For Jira Cloud (Forge) ajax calls have to be made through Atlassian Forge requestJira method and for Jira DC jQuery ajax method is used. The script is for Jira Cloud and to avoid duplicating of the code I have put appropriate comments for Jira DC.

define("_ujgCompletedIssues", [ "jquery" ], function($) {
  var MyGadget = function(API) {
    var $msgDiv = $('<div style="padding:10px;"></div>'); // want some padding
    API.getGadgetContentEl().append($msgDiv);
    // function to call from success ajax callbacks
    var showInfo = function(completed, total) {
      if (completed !== undefined && total !== undefined) { // only if 2 vars are defined
        $msgDiv.append('<h2>Completed ' + completed + " from " + total + " issues.</h2>");
        API.resize();
      }
    };
    // function for error displaying
    var showError = function(url) {
      AJS.messages['error']($msgDiv, {
        title : 'Error!',
        body : 'Failed to retrieve data for URL: ' + url
      });
      API.resize();
    };
    var url, completed, total; // initially are undefined
    url = "/rest/api/2/search/jql?jql=" + encodeURIComponent("status = Done AND status changed to Done after startOfMonth() before endOfMonth()") + "&maxResults=5000";
    // make a call for number of completed issues
    // $.ajax({ // for DC
    requestJira(url, { // for Cloud (Forge)
      method: "GET",
      headers: { 'Accept': 'application/json' },
    }).then(response => {
      if (!response.ok) {
        throw new Error("HTTP " + response.status);
      }
      return response.json();
    }).then(data => {
        completed = data.issues.length;
        showInfo(completed, total); // call it 2 times since ajax methods are asynchronous and we are not sure about their completion order
    }).catch(() => {
        showError(url);
    });

    url = "/rest/api/2/search/jql?jql=" + encodeURIComponent("createdDate > startOfMonth() and createdDate < endOfMonth()") + "&maxResults=5000";
    // $.ajax({ // for DC
    requestJira(url, { // for Cloud (Forge)
      method: "GET",
      headers: { 'Accept': 'application/json' },
    }).then(response => {
      if (!response.ok) {
        throw new Error("HTTP " + response.status);
      }
      return response.json();
    }).then(data => {
        total = data.issues.length;
        showInfo(completed, total); // call it 2 times since ajax methods are asynchronous and we are not sure about their completion order
    }).catch(() => {
        showError(url);
    });

  };
  return MyGadget;
});

Please make sure to use your Jira domain for REST URLs and put a valid board id.

While fixing bugs and making changes in your JavaScript you need to reload the board page since AMD modules are cached after first processing. For more info on the gadget API please check API Calls predefined script that goes together with Universal Gadget for Jira.

Congratulations! You've just created your custom Jira gadget! The result should look like: