Jonathon Creenaune, JIRA Development Team Lead Every tip, trick, guide and how to on integrating your plugin with JIRA 5+'s client side API. * How to integrate with quick edit, inline edit, search * Why you can't jQuery onready, and what you should do instead * The kickass 1 (inline edit) APIs and the coming kickass 2 (search) APIs

1. You can kick ass too

22. What is JIRA’s frontend API
web fragments
web resources and decorators
CSS
some Javascript

23. What is *not* JIRA’s frontend API
DOM
some javascript

25. AJS.$(function() {
AJS.$(‘.myclass’).hover(myHoverListener);
});

27. JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function(e, $ctx){
$ctx.find(‘myclass’).hover(myHoverListener);
});

34. JIRA.Issues.InlineEdit.BlurTriggerMapping
.custom.myCustomFieldTypeId = BlurTriggers.Default;

35. JIRA.Issues.InlineEdit.BlurTriggerMapping
.custom.myCustomFieldTypeId = function(fieldId, $ctx) {
// must eventually call
JIRA.trigger(JIRA.Events.INLINE_EDIT_BLURRED, [fieldId]);
};

38. <select id="projects" class="hidden">
<optgroup label="Recent Projects">
<option value="ANGRY">Angry Nerds</option>
<option value="JRADEV">JIRA Development</option>
</optgroup>
<optgroup label="All Projects">
<option value="GH" selected="selected">Jacobs Creek</
option>
<!-- etc -->
</optgroup>
</select>

39. JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function(e, $ctx){
new AJS.SingleSelect({
element: $ctx.find("#priority"),
// show full text, not value, in lozenges
itemAttrDisplayed: "label"
});
});

40. <select id="assignee" class="hidden"></select>
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function(e, $ctx) {
new AJS.SingleSelect({
element: $ctx.find("#assignee"),
itemAttrDisplayed: "label",
ajaxOptions: {
url: "/rest/assignees",
query: true, // go back to server on each keystroke
formatResponse: function (response) {
// construct groups/options from the JSON response
return ret;
}
}
});
});

42. JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function(e, $ctx) {
new AJS.MultiSelect({
element: AJS.$("#labels"),
itemAttrDisplayed: "label"
});
});

48. <select class="hidden js-default-checkboxmultiselect"
multiple="true">
<optgroup label="Recent Projects">
<option value="ANGRY">Angry Nerds</option>
<option value="JRADEV">JIRA Development</option>
</optgroup>
<optgroup label="All Projects">
<option value="GH" selected="selected">Jacobs Creek</
option>
<!-- etc -->
</optgroup>
</select>

52. Thanks