Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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:

Screenshot 2020-05-17 at 22.31.28.png

And we want to make it look like this:

Screenshot 2020-05-17 at 22.32.56.png

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.

5 comments

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!

@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 Community Leader Jun 04, 2020

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?

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

Comment

Log in or Sign up to comment
TAGS

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you