Page tree
Skip to end of metadata
Go to start of metadata

This step is about putting JavaScript to fetch and display information. For the JIRA Cloud ajax calls have to be made through AP.request and for JIRA Server jQuery ajax is used. The script is for JIRA Cloud and to avoid duplicating of the code I have put appropriate comments for JIRA Server.
 

<script>
  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 = 'https://vkrupach.atlassian.net/rest/agile/1.0/board/6/issue?jql=sprint%20in%20openSprints()%20and%20status%20in(Done)&fields=id';
      // make a call for number of completed issues
      // $.ajax({ // for Server
      AP.request({ // for Cloud
        url : url,
        success : function(data) {
          // completed = data.total; // for Server
          completed = $.parseJSON(data).total; // for Cloud
          showInfo(completed, total); // call it 2 times since ajax methods are asynchronous and we are not sure about thier completion order
        },
        error : function(data) {
          showError(url);
        }
      });
      url = 'https://vkrupach.atlassian.net/rest/agile/1.0/board/6/issue?jql=sprint%20in%20openSprints()&fields=id';
      // $.ajax({ // for Server
      AP.request({ // for Cloud
        url : url,
        success : function(data) {
          // total = data.total; // for Server
          total = $.parseJSON(data).total; // for Cloud
          showInfo(completed, total); // call it 2 times since ajax methods are asynchronous and we are not sure about thier completion order
        },
        error : function(data) {
          showError(url);
        }
      });
    };
    return MyGadget;
  });
</script>


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:

  • No labels