How to make a select field in Atlassian Jira 8.8.1 to be Select2 field

Hello!

We had a question in Moscow Atlassian User Group. Here is the question:

This code does not work in Atlassian Jira 8.8.1

<script type="text/javascript">
   var customfield_11123 = AJS.$("#customfield_11123").aui-select2();
   console.log(AJS.format("{0}", customfield_11123.aui-select2()));
   $('div#id_customfield_11123').css("width","100%")
</script> 

How to make it work?

First let’s describe what the code does. Suppose, we have a select custom field:

And we want to make it look like this:

We converted a usual Jira select custom field into Select2 custom field.

The script in the question was added to the description of the my_select_list field. It is good to see that Jira 8.8.1 does not let put javascript code into the description field. And it is a good way to go. The correct way would be to create an app to do changes to UI (or have a look at already available app), but we want to make these changes without an app.

I do not recommend to use this solution but here is the answer.

Add the following JavaScript code to the announcement banner:

<script type="text/javascript">
(function ($) {
    AJS.toInit(function () {

        JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context, reason) {
            if (reason == JIRA.CONTENT_ADDED_REASON.dialogReady) {
              if ($('#create-issue-dialog').length || $('#edit-issue-dialog').length) {
                var customfield_10008 = $("#customfield_10008").auiSelect2();
                console.log(AJS.format("{0}", customfield_10008.auiSelect2()));
                $('div#s2id_customfield_10008').css("width","100%");
              }
            }
        });
    });
})(AJS.$);
</script> 

customfield_10008 is the id of the my_select_list custom field.

This code will work for the create and edit issue dialog.

Leave a Reply

%d bloggers like this: