Can I have multi-select custom field behave like components/versions fields

Moshe Hajaj March 21, 2012

I really like the auto-complete feture of these fields. it is easy to search for values, and it looks good on the screen.

We have some custom fields with dozens of values, and the existing multi-select field, where you need to select values by click+Ctrl key, is just not good enough.

Is there's a solution, a workaround, or even a way do develop a new custom field type?

thank you.

20 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

28 votes
Answer accepted
JamieA
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.
March 21, 2012

Components and versions are just plain html multiselects, sexed up by some javascript. You can call the same routines on your single or multi-selects. Eg customfield_10052 is the ID of my multi-select field. You need to embed some javascript, eg by pasting it into the description of that field:

(function($){
    new AJS.MultiSelect({
        element: $("#customfield_10052"),
        itemAttrDisplayed: "label",
        errorMessage: AJS.params.multiselectComponentsError
    });
})(AJS.$);

Try it, in the F12 tools of your browser.

JamieA
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.
March 21, 2012

Playa tip: This also works for the nasty massive multi-select used for associated custom fields with projects, except change it to:

new AJS.MultiSelect({
   element: AJS.$("select[name='projects']"),
   itemAttrDisplayed: "label",
   errorMessage: AJS.params.multiselectComponentsError
});

Like # people like this
Jason Brison
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.
December 6, 2012

That's exactly what I was looking for. You my friend are a life saver and get an upvote for your answer, and for your added comment!!

Like # people like this
Alexey Paveliev
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.
December 14, 2012

Can you look at this question ?

Umair Haroon
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.
April 21, 2014

Hi Jamie, I would like to pass this javascript code to a multiselect field I am creating in a plugin. I want to pass this as a description parameter when creating the custom field.

Eg:

CustomField cField = CustomFieldManager.createCustomField(customfieldName, "FIELD DESCRIPTION: JAVA SCRIPT CODE HERE", customFieldManager.getCustomFieldType(customFieldTypeKey) , customFieldSearcher, contexts, issueTypes);

The problem with using the above code is that it relies on knowing the ID of the field. However before the field is created, I cant use

cField.getID()

So How can I set the javascript code as description of a multi select custom field I am creating in the plugin.

Tuan Vo February 24, 2015

Hi Jamie, I used your code above in the description area of my custom field, but can't get it to work. Here is the exact code in the description area of the customfield: <script type="text/javascript"> (function($){ new AJS.MultiSelect({ element: $("#customfield_10500"), itemAttrDisplayed: "label", errorMessage: AJS.params.multiselectComponentsError }); })(AJS.$); </script> I wanted to see if the code will make the multiselect behaves like a component field, but the result is just a multiselect behavior. What am I doing wrong? Tuan

Hung Nguyen February 25, 2015

You still need to add the options into the multiselect to make it works properly. This is just the creation for the shell

Frode Haugland March 3, 2015

This works fine when i Create a new issue, but if i change the issue type the "magic" disappears for all these fields. Any tips?

Karanpreet Kaur March 20, 2018

Hi @JamieA,

We had been using description of the multiselect fields mixed with javascript to achieve autocomplete functionality in multiselect custom fields. However, I wonder if there is a more stable way of implementing this, using Scriptrunner. We have been using SFJ for quite sometime now, and it has been stable. So rather than relying on javascript embedded in the description of field which doesnt behave as needed sometimes, it would be great to know if this functionality can be achieved via Scriptrunner for Jira.

Thanks,
Karan

Karanpreet Kaur March 20, 2018

I got it :)

Using below script in the behaviors initializer helps!

getFieldByName("Example Multi-Select Field").convertToMultiSelect()

Like # people like this
Torbjörn Richter April 18, 2018

thank you, this one really help me

8 votes
Stefan Egli February 26, 2016

I also suggest voting for this:
https://jira.atlassian.com/browse/JRA-23013

Note: There seems to be a way to enable this feature by using so called "dark features"... just check the comments of this JIRA issue. All credits to Matthias Vill:

At least with Jira 6.0.8 the easiest way to use this features is by enabling a dark feature. Basic procedure as in the documentation:
1. Point your browser to /secure/admin/SiteDarkFeatures!Default.jspa beneath you Jira-URL (for this Jira this would become https://jira.atlassian.com/secure/admin/SiteDarkFeatures!Default.jspa)
2. Enable "jira.site.darkfeature.admin" so you get a link to this page in Administration-menu
3. Enter "multiselect.frother.renderer" into the text-field and klick add.

Afterwards all multi-selects should be presented as "frother"-controls.

 

 

JiraYo
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.
February 20, 2019

Wow thanks for that. that totally works perfectly as a solution. I dont see why it has to be in this "dark" features or wth that is, but it does work and fixed my fields.

Like Stefan Egli likes this
Stefan Egli February 20, 2019

I use this now for 3 years and never had any problem with it. No idea, why this is not a normal feature.

Alessandro Tondo February 21, 2019

Thanks @Stefan Egli !

Do you know whether it is also possible to add extra items to the list or not?

Stefan Egli February 24, 2019

Adding new values can only be done in the custom field configuration. If you want to be able to add values you probably should use a label field.

Like Alessandro Tondo likes this
Dane Kantner February 25, 2019

You can add items to custom field's list programmatically via the API but it requires a free third party add-on jiracustomfieldeditorplugin ; do a post to https://jira/rest/jiracustomfieldeditorplugin/1/user/customfields/10301/contexts/default/options where 10301 is the CF ID #

Like Alessandro Tondo likes this
2 votes
Dan Deftos November 4, 2014

So, we have tried this script and it works well, thank you Jamie. However we are noticing one thing. We have in-line editing turned on and when the field is editing in this manner (in-line) it behaves like it originally did, without the javascript. Is there any way to get this to behave in the same manner during an in-line edit?

2 votes
Eric Thn April 10, 2014
Stefan Egli February 16, 2016

This is great! Thanks..

Note: If you use SSL for your JIRA Instance you need to "include" Chosen with https instead of http link.

1 vote
Shaun Field November 17, 2014

We are using JIRA OnDemand.  It appears that the custom field description only supports WikiMarkup.  How do change my custom select list (multi choice) to support the component/version behaviour with this version of JIRA?

JamieA
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.
November 17, 2014

You can't really do anything with OnDemand as it doesn't allow javascript.

1 vote
SRIDHAR August 6, 2012

I have a single select list and i have used the following javascript. I read in the forums i can use MultiSelect in javascript for single select & multi select . But it is not working.

<script type="text/javascript">

AJS.$("#customfield_10504 option[value='None']").remove();

//AJS.$("#customfield_10504 option[value='-1']").remove();

(function($)

{

new AJS.MultiSelect(

{

element: $("#customfield_10504"),

itemAttrDisplayed: "None", // "label"

errorMessage: AJS.params.multiselectComponentsError

});

}

)(AJS.$);

</script>

I tried to replace the option in comments as well but it is not working. Can some one help? I tried to put this code in configuration decription field and also tried in field description . nothing works.

Stefan Egli April 12, 2019

Use the dark feature that I mention in my answer...

1 vote
CK1 June 12, 2012

Hi there!

Thanks for this bit of info - It works brilliantly but for one very annoying thing:

If I switch the Issue Type in the "create new Issue screen" everything is back to plain old multiselect...

Is there a way to reload the Script???

We would really like to use this, since we have MS with 80 values...

TIA,

Chris

Mike August 13, 2012

Having the same issue here.

Looks like it was resolved here, for anyone who views this page looking for a complete solution.

1 vote
Moshe Hajaj March 22, 2012

Thanks, works great.

Only one (minor) problem there, the field selects by default the "None" option. So the user will have to remove it before choosing other values. I think I can work it out somehow.

The bigger problem, is that you have to go over your custom fields and change each one separately.

other than that, it is just magic.

Dieter
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.
March 22, 2012
Removing the none option can be done using this js code: AJS.$("#customfield_12345 option[value='None']").remove();
JamieA
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.
March 22, 2012

You should run Dieter's line before you convert iirc.

Regarding your bigger problem - not really, you just need to find the selector that gets all the multiselects you need.

Moshe Hajaj March 22, 2012

it works!

but with one change ("-1" instead of "none"):

AJS.$("#customfield_12345 option[value='-1']").remove();

S
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 10, 2012

Can you please tell me where I need to put this code.

wlong (SHIP) June 7, 2012

I can't get the "None" option removed with the :

AJS.$("#customfield_12345 option[value='-1']").remove();
Where inline does this go in the following code???
(function($){
new AJS.MultiSelect({
element: $("#customfield_10052"),
itemAttrDisplayed: "label",
errorMessage: AJS.params.multiselectComponentsError
});
})(AJS.$);
wlong (SHIP) June 7, 2012

This worked!

<script type="text/javascript">
AJS.$("#customfield_10306 option[value='-1']").remove();

(function($)
{
new AJS.MultiSelect(
{
element: $("#customfield_10306"), itemAttrDisplayed: "label", errorMessage: AJS.params.multiselectComponentsError
});
}
)(AJS.$);
</script>

Umair Haroon
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.
April 21, 2014

Thanks. It works for me too.

Dane Kantner October 2, 2017

Thanks wlong, it did take 3 saves and a reindex but in the end, worked as expected! 

Dane Kantner October 2, 2017

the only remaining issue I see w/ that is it loads the box properly on the first rendering but if you switch project queues it doesn't seem to re-render it properly when it switches between project types, it shows it as the standard drop-down.  I notice when I'm in debug that the class styling for multi-select-select exists in the version that works but not in the one that doesn't and there are other items that go missing when switching (multi-select css related to the drop down box etc). At EOD this is better than Atlassian's out of the box implementation so ¯\_(ツ)_/¯

0 votes
Olga Videc
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
April 12, 2019

Hello, 

Can someone walk me through this?

I create an field, i click configure  -> edit configuration -> description

I add this to a description

 

(function($){
    new AJS.MultiSelect({
        element: $("#customfield_10052"),
        itemAttrDisplayed: "label",
        errorMessage: AJS.params.multiselectComponentsError
    });
})(AJS.$);

I edit custom filed ID and itemAttrDisplayed: to name of my field.

customFieldId=12610

 

I still I get the same multi selection filed, what i'm I doing wrong?

 

Sorry, I'm new to java, 

 

Thanks

Stefan Egli April 12, 2019

Use the dark feature that I mention in my answer.

Olga Videc
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
April 12, 2019

Hello, 

Figured how the only thing I can't figure is how to add this shaded part behind the text to make it visibly separated instead of being separated by a comma.

Olga Videc
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
April 12, 2019

Hello, 

I enabled both 

  • jira.site.darkfeature.admin (Disable)
  • jira.user.darkfeature.admin (Disable)

but still no help

Did I miss some step after enabling darkfeatures?

Normal view

Server role normal view.PNG

Edit viewServer role edit view.PNG

Stefan Egli April 12, 2019

You need to add the option for the custom fields: multiselect.frother.renderer

dark-features.png

Olga Videc
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
April 12, 2019

Hello, 

Great, it worked, sorry for bothering you but is there a way to add the grey shade behind it?

So the choices are separated by colored rectangular and not by the comma?

Stefan Egli April 12, 2019

I am not aware of any further customization options... I guess this is as good as it gets.

Like Olga Videc likes this
DORIAN KERSCH April 22, 2019

Hi @Stefan Egli is there a similar option for single select and frother renderer? I tried a few options that were unsuccessful. 

Stefan Egli April 22, 2019

I think there is none.

gadamchetty ramya May 31, 2019

Hi @Stefan Egli

 will it work for default customfield?

example : we have an customfield called  `Labels` in jira , so i want to implement multiselect option .

Thanks,
saroja

gadamchetty ramya May 31, 2019

Hi @Stefan Egli 

I am unable to revert back the change multiselect.frother.renderer . Even though disable the `multiselect.frother.renderer` in darkfeature . Please let me know how can we revert this option .

Thanks ,

Saroja

Stefan Egli June 2, 2019

I never tried to revert it and thus cannot offer any help. I suggest contacting Atlassian Support.

0 votes
Deleted user March 6, 2018

Did anyone figure out, how to make it work on cascading fields? :-)

Stefan Egli March 21, 2018

See my answer. JIRA can do it, but it needs to be enabled...

0 votes
agouaux October 8, 2015

s@ii, did you ever get this resolved?

0 votes
s@ii May 4, 2015

new AJS.MultiSelect(
{
element: $("#customfield_10504"),
itemAttrDisplayed: "None", // "label"
errorMessage: AJS.params.multiselectComponentsError
});

its worked fine in jira 5.2 . now we are upgrading JIRA to 6.3.15. script is not working now. any one please give me some suggestions..

 

Thanks in advance

0 votes
Frode Haugland March 3, 2015

This works fine when i Create a new issue, but if i change the issue type the "magic" disappears for all these fields. Any tips?

0 votes
Yanis Foris August 17, 2014

Jamie, can we have any solution for cascading field? I need autocomplete both for parent and child values.

0 votes
Ivan Sadych July 6, 2014

java script works fine in cases create and edit action (buttons create and edit). But how to be in a case when I'd like to change field value during transition (transition screen)? Script is not applicable and field has a standard view.

Any suggestions?

0 votes
kumnar Pudi December 15, 2013

Hi after adding this code the field is have first value as default value How to remove this??

Please help

0 votes
Stephen Kervin August 13, 2013

Hi
I am using the ondemand instance, can anyone verify if this works on the ondemand version.
I am pasting the JS into the description field of the custom field but it simply comes out as the description and is not interpretted as HTML or JS.
Is there something I am missing here?
JamieA
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.
August 13, 2013

It doesn't work in AOD... you are not allowed to make any js/css customisations to AOD.

0 votes
Javier Portillo
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.
March 22, 2012

It is my own instance, im going to add the text and try

EDIT: Now it works perfect when I include a text description before the script

Thanks a lot!!

JamieA
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.
March 22, 2012

No worries, feel free to vote up my helpful comments!

Javier Portillo
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.
March 25, 2012

Just a last question. How can a change the text "customfield_18300" by a variable with the dinamic value.

I mean something as follows:

<script type="text/javascript">
var name;
(function($){
new AJS.MultiSelect({
element: $(name),
itemAttrDisplayed: "label",
errorMessage: AJS.params.multiselectComponentsError
});
})(AJS.$);
</script>
Is it possible?

0 votes
Javier Portillo
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.
March 22, 2012

I get the following error in teh console:

[11:46:25.630] SyntaxError: missing } in XML expression

0 votes
Javier Portillo
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.
March 22, 2012

Can sombody write the complete javascript to add this function to a multiselect field. Im trying to make it by using this:

<script type="text/javascript">

this.onload=(function($){
new AJS.MultiSelect({
element: $("#customfield_18300"),
itemAttrDisplayed: "label",
errorMessage: AJS.params.multiselectComponentsError
});
})(AJS.$);

</script>

Im new in JavaScript so sorry wheter Im including big mistakes

JamieA
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.
March 22, 2012

Should just be:

&lt;script type="text/javascript"&gt;

(function($){
    new AJS.MultiSelect({
        element: $("#customfield_18300"),
        itemAttrDisplayed: "label",
        errorMessage: AJS.params.multiselectComponentsError
    });
})(AJS.$);

&lt;/script&gt;

Javier Portillo
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.
March 22, 2012

It doesnt work to me. Should I change "label" by my field label name?

JamieA
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.
March 22, 2012

No. What version of jira? Is that definitely the correct custom field ID? Does it work in F12 console of your browser?

Javier Portillo
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.
March 22, 2012

The Jira version is 4.4.1 adnd the ID is correct

I get the following error in teh console:

[11:46:25.630] SyntaxError: missing } in XML expression

Javier Portillo
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.
March 22, 2012

By using in the console the following it works:

(function($){
new AJS.MultiSelect({
element: $("#customfield_18300"),
itemAttrDisplayed: "label",
errorMessage: AJS.params.multiselectComponentsError
});
})(AJS.$);
JamieA
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.
March 22, 2012

You're not pasting the <script> tags into the console right? Look at the view source and verify that you see your javascript..

Javier Portillo
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.
March 22, 2012

I use the following tags in the description but the script is not inserted in the html code.

<script type="text/javascript">

(function($){
new AJS.MultiSelect({
element: $("#customfield_18300"),
itemAttrDisplayed: "label",
errorMessage: AJS.params.multiselectComponentsError
});
})(AJS.$);

</script>

JamieA
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.
March 22, 2012

Are you using ondemand or is it your own instance?

Add some text outside the script tags like "JAVASCRIPT SHOULD BE HERE" and verify that you can see that under the field.

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

TAGS
AUG Leaders

Atlassian Community Events