How it works

Configured JavaScript and css files are attached to the plugin wrapper. The gadget configuration screen looks next:

  • Show to logged in users only - check it to restrict gadgets visibility to anonymous users.
  • Gadget title - put the title you want for your gadget instance.
  • JavaScript URLs - comma separated list of URLs to JavaScript files. These can be your custom JavaScript or links to hosted libraries like https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js.
  • CSS URLs - comma separated list of URLs to CSS files. Again, can be your custom styles or externally hosted.
  • AMD module - AMD entry module.
  • HTML to append - any valid HTML combined with inline CSS to be added as the top element of the gadget view. Usually to add parent container.
  • JavaScript to run - any valid JavaScript. Usually, to do retrieval and visualization of data.
  • Predefined scripts - Select with samples to demonstrate what can be built based on Universal Gadget for Jira. Configuration fields are populated when you select some predefined sample. Currently there are 6 samples: API CallsJira REST and Charts sample scriptCivilization TestWeather, User timesheet and Embedded iframe

Unless you create very basic gadget you need to define AMD entry module that returns a function. The function is called by the plugin wrapper code and API object is passed as an argument. The entry module can be defined in one of the loaded scripts that are in "JavaScript URLs" field or can be declared as inline JavaScript in "JavaScript to run" editor. Make sure to put matching name to "AMD module" field.
 

define("SomeAMDEntry", [ "jquery" ], function($) {
  var MyGadget = function(API) {
  };
  return MyGadget;
});


The API object has following methods:

  • getGadgetContentEl() - Returns the gadget content element so other content can be added to it.
  • setTitle(title) - Sets gadget title.
  • getCurrentUser() - Returns object with logged user info: {userKey: currentUserKey, username: currentUsername, displayName: current display name}.
  • getDashboardId() - Id of the host dashboard.
  • getGadgetId() - Id of the gadget.
  • resize() - You may need to call it to fit the gadget's height after you added/edited the content of the gadget.

Please see API Calls sample for live demonstrations of the API methods usage.