Step 3: Display data
This step is about putting JavaScript to fetch and display information. For 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.
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; });
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: