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.

19 answers

1 accepted

23 votes
Accepted answer

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 @Jamie Echlin [Adaptavist],

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 1 person likes this

thank you, this one really help me

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.

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?

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.

 

 

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

Suggest an answer

Log in or Sign up to answer
Community showcase
Published 10 hours ago in Agile

How Scrum works? It starts with training and education

To answer “How scrum works,” most of the teams I've worked with first addressed the question: “where to start?”  That question applies to both implementation and improvements on the Scrum framew...

81 views 2 3
Read article

Atlassian User Groups

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

Find a group

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

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you