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

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

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

23 votes
Answer accepted

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.

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
});

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!!

Can you look at this question ?

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.

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

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

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?

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

I got it :)

Using below script in the behaviors initializer helps!

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

Like # people like this

thank you, this one really help me

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.

 

 

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

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

Thanks @Stefan Egli !

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

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

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

This is great! Thanks..

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

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?

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.

Removing the none option can be done using this js code: AJS.$("#customfield_12345 option[value='None']").remove();

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.

it works!

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

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

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

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.$);

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>

Thanks. It works for me too.

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

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 ¯\_(ツ)_/¯

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

Having the same issue here.

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

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.

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

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?

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

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

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;

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

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

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

By using in the console the following it works:

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

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

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>

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.

I get the following error in teh console:

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

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!!

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

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?

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?

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

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

Please help

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?

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

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?

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

s@ii, did you ever get this resolved?

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

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

0 votes
Olga Videc Community Leader Apr 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

Use the dark feature that I mention in my answer.

Olga Videc Community Leader Apr 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.

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

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

dark-features.png

Olga Videc Community Leader Apr 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?

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

Like Olga Videc likes this

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

I think there is none.

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

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

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

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted in Jira

We want to hear from you! How do you use Slack and Atlassian together?

Hi Everyone! My name is Mina and I am on Atlassian’s Ecosystems Marketing team. Our team is focused on our technology partnerships and marketplace apps. One of Atlassian’s partners is Slack, who ...

75 views 0 4
Join discussion

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