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

[#1]

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. The correct way would be to create an app to do changes to UI, 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.

[František Špaček _MoroSystems_]

Hello Alexey,

thank you for the interesting article!

Have you also tried https://marketplace.atlassian.com/apps/1220214/select2?hosting=server&tab=overview? I know that it will change all the selects in whole instance, I am just curious if there is any other limitation. I am a bit scared to apply such codes at my customers due to maintainability.

Have a nice day!

[Alexey Matveev _Appfire_]

@František Špaček _MoroSystems_ 

I have not tried this solution. But if you need to change the whole instance then I think you should try it. It is much better than to put JS code into announcement banner.

[Михаил К]

Using the ScriptRunner plugin, you can add a Behaviours script to the initialization form for the type of request and project you need.

import com.onresolve.jira.groovy.user.FieldBehaviours 
import groovy.transform.BaseScript

@BaseScript FieldBehaviours fieldBehaviours

getFieldByName("my_select_list_multiple_choices").convertToMultiSelect() getFieldByName("my_select_list_single_choice").convertToSingleSelect()

[Taranjeet Singh]

Very interesting article and information! Thanks for sharing @Alexey Matveev _Appfire_ . Do you by any chance know of a place or plugin for JIRA , apart from Announcement banner, to put your own CSS code?

[Alexey Matveev _Appfire_]

@Taranjeet Singh thank you! You can use Scriptrunner web resources to put your custom css.