Adding a chart to the issue navigator

This page is part of the Gadget Developers' JavaScript Cookbook.

How do I add my chart to the issue navigator view?

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

Place the gadget in both categories: 'JIRA' and 'Charts':

1
2
<Optional feature="gadget-directory">
    <Param name="categories">
        JIRA
        Charts
    </Param>
</Optional>

Include the following two UserPrefs:

1
2
<UserPref name="isPopup" datatype="hidden" default_value="false"/>
<UserPref name="projectOrFilterId" datatype="hidden" />

Dynamically change the Configuration field for your gadget's Configuration form:

1
2
config: {
    descriptor: function ()
    {
        var gadget = this;
        var filterField ;
        if (/^jql-/.test(gadget.getPref("projectOrFilterId")) || gadget.getPref("isPopup") === "true"){
            // JQL has been passed in and we should place this in a hidden field
            filterField =
            {
                userpref: "projectOrFilterId",
                type: "hidden",
                value: gadgets.util.unescapeString(gadget.getPref("projectOrFilterId"))
            };
        } else{
            // Lets display the filter picker
            filterField = AJS.gadget.fields.filterPicker(gadget, "projectOrFilterId");
        }
        return  {
            action: "/rest/gadget/1.0/chart/validate",
            theme : "top-label",
            fields: [
                filterField,
                { other field }
            ]
        };
    }
}

The popup sets the 'projectOrFilterId' UserPref to the value jql-<JQL-string>. You do not want to display the filter picker.

Your resource should accept the UserPref projectOrFilterId and be able to deal with values of both formats: filter-<filterId> and jql-<JQL-string>.

Refer to the PieChart Gadget for an example of this functionality.

Gadget Developers' JavaScript Cookbook

Using the Atlassian Gadgets JavaScript Framework