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

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root

Avatar

1 badge earned

Collect

Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!

Challenges
Coins

Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.

Recognition
Ribbon

Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!

Leaderboard

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

František Špaček _MoroSystems_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
May 19, 2020

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
May 19, 2020

@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
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
Jun 04, 2020

Very interesting article and information! Thanks for sharing @Alexey Matveev . 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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Jun 04, 2020

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

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events