Gadget developers' JavaScript Cookbook

Terminology: On this page and its child pages,

when we refer to the 'framework', we mean the Atlassian Gadgets JavaScript Framework.
when we refer to a 'gadget', we mean a gadget JavaScript object.

Here is a list of all entries in the cookbook, plus the first few lines of content. Click a link to see the full text for each entry.

Adding a Chart to the Issue Navigator

Place the gadget in the 'JIRA' and 'Charts' categories, include two userprefs and change the gadget configuration field:

Adding a Reload Option to your Gadget

This will add a reload icon to the footer of the gadget and an auto-reload option to the config screen:

Use the following code in your view template function:view:{

Adjusting the Gadget Height when the Window is Resized

Enable the onResizeAdjustHeight option on the view object:view: {

Making Ajax Calls

The framework wraps the OpenSocial gadgets.io.makeRequest method with the standard jQuery interface http://docs.jquery.com/Ajax/jQuery.ajax. You should write code as if you were just using the jQuery interface. For example:AJS.$.ajax({

Making your Gadget Reload when Resized

Enable the onResizeReload option on the view object:view: {

Restricting Edit Permissions on your Gadget Preferences

Use the framework and include the views feature:<Require feature="views" />

Showing the Config Screen on Initial Load Only

Include the isConfigured userpref defaulted to 'false':

Specifying Required Features for the Framework

In addition to our full list of features, below is a summary of the features used by the Atlassian Gadgets JavaScript Framework. It is safest just to include all of them:

Specifying Required Resources for the Framework

The framework requires the inclusion of the following resources:

Theming your Gadget Dynamically

It is possible to have the theme dynamically adapt to the space available with some JavaScript like this:action: ...

Using Authentication in your Gadget

Specify the appropriate features as 'required' in your gadget XML, include the necessary resources in the CDATA section, and use the useOauth parameter when constructing your gadget:

Using Cookies in your Gadget

Use the gadget object API for createCookie, readCookie and eraseCookie:view: {

Using Special UserPrefs for the Framework

There are a couple of UserPref values that the framework can use to add functionality to the gadget:<UserPref name="isConfigured" datatype="hidden" default_value="false" />

Using the Atlassian Gadgets JavaScript Framework
Gadgets and Dashboards Documentation