JIRA multi select component

srinivasp
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.
October 9, 2012

I am trying to use JIRA multi select component in my VM and i am facing issues with that. Using Inspect Element browser option I copied the HTML code and pasted on my VM. When i execute the plugin, it is not found functioning but it seems CSS was applied. Do I need to add any resources in the plugin descriptor file?

Appreciate your help.

<div class="field-group aui-field-componentspicker frother-control-renderer"><label for="components">Component/s</label>
            <div class="multi-select" id="components-multi-select" data-query="">
                           <textarea autocomplete="off" id="components-textarea" class="aui-field" wrap="off" style="padding-top: 4px; padding-left: 2px; width: 485px; ">
                    </textarea>
                    <div class="ajs-layer-placeholder"><div class="ajs-layer  box-shadow limited" style="display: none; width: 506px; position: absolute; left: 162.98333740234375px; top: 371.33331298828125px; ">
                                 <div class="aui-list" id="components-suggestions" tabindex="-1" style="white-space: nowrap; width: auto; display: block; ">
                                        <ul class="aui-last">
                                               <li class="aui-list-item aui-list-item-li-documentation"><a class="aui-list-item-link" href="#" title="Documentation" style="text-overflow: ellipsis; overflow: hidden; ">Documentation</a></li>
                                               <li class="aui-list-item aui-list-item-li-functional"><a class="aui-list-item-link" href="#" title="Functional" style="text-overflow: ellipsis; overflow: hidden; ">Functional</a></li>
                                               <li class="aui-list-item aui-list-item-li-mytestcomponent"><a class="aui-list-item-link" href="#" title="MyTestComponent" style="text-overflow: ellipsis; overflow: hidden; ">MyTestComponent</a></li>
                                               <li class="aui-list-item aui-list-item-li-requirement active"><a class="aui-list-item-link" href="#" title="Requirement" style="text-overflow: ellipsis; overflow: hidden; ">Requirement</a></li>
                                               <li class="aui-list-item aui-list-item-li-soap"><a class="aui-list-item-link" href="#" title="SOAP" style="text-overflow: ellipsis; overflow: hidden; ">SOAP</a></li>
                                               <li class="aui-list-item aui-list-item-li-testing"><a class="aui-list-item-link" href="#" title="Testing" style="text-overflow: ellipsis; overflow: hidden; ">Testing</a></li>
                                               <li class="aui-list-item aui-list-item-li-ui"><a class="aui-list-item-link" href="#" title="UI" style="text-overflow: ellipsis; overflow: hidden; ">UI</a></li>
                                        </ul>
                                 </div>
                    </div>
                    </div>
                    <span class="icon noloading drop-menu"><span>More</span></span>
                    <div class="representation"><ul class="items">
                    </ul>
                    </div>
                    </div>
             <select class="select hidden" id="components" multiple="multiple" name="components" size="5" data-remove-null-options="true" style="display: none; ">
                          <option title="Documentation " value="12210">
                Documentation
            </option>
                    <option title="Functional " value="12457">
                Functional
            </option>
                    <option title="MyTestComponent " value="14402">
                MyTestComponent
            </option>
                    <option title="Requirement " value="11299">
                Requirement
            </option>
                    <option title="SOAP " value="10559">
                SOAP
            </option>
                    <option title="Testing " value="12940">
                Testing
            </option>
                    <option title="UI " value="11251">
                UI
            </option>
            </select>
    <div class="description">Start typing to get a list of possible matches or press down to select.</div>
                                    </div>

2 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

1 vote
Answer accepted
Dennis Kromhout van der Meer
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.
October 10, 2012

Are you binding any javascript to one of those DOM elements? This might be related: Can I have multi-select custom field behave like components/versions fields

srinivasp
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.
October 10, 2012

Hi Dennis, There is no javascript included. I am trying to include a multiselect component in my vm file and so i copied this piece of code from the UI of Create Issue page and pasted on my vm. I checked the components-edit.vm file existing in location atlassian-jira-4.4.5-standalone\atlassian-jira\WEB-INF\classes\templates\jira\issue\field\components-edit.vm file and tried exactly the same way but it was not worked. so I copied the this piece of code from the view source and pasted on my vm for testing. this way also it does not worked. Can you please suggest a way to include a multiselect component in our vm? I am afraid i did not understand the post you suggested.

srinivasp
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.
October 10, 2012

Hi Dennis, Any update please??

Dennis Kromhout van der Meer
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.
October 11, 2012

Hi Spatruni, this won't work as you're currently only providing the HTML and the styling via CSS, but none of the interactivity that javascript brings. Which is the reason why you should use javascript AJS.MultiSelect on your multiselect -- this will perform the autocomplete when typing. If you do not have the time/skill to make this happen, I'm more than happy to find you an Atlassian 3rd party expert that is able to help you solve this problem :)

srinivasp
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.
October 11, 2012

Hi Denis,

thanks for your reply. I have one question. Is it not possible to use inbuilt JS code for this component? i am actually developing a jira plugin and so i can apply the existing JS rt?

Srinivas

Dennis Kromhout van der Meer
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.
October 11, 2012

You can use JIRA's built-in javascript functions, but you have to call the AJS.MultiSelect for the html element to make it work, as described here: https://answers.atlassian.com/questions/43534/can-i-have-multi-select-custom-field-behave-like-components-versions-fields?page=1#43549

srinivasp
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.
October 11, 2012

Hi Denis, Excellent, It is working. I just added multiple=multiple to my select and added this java script, got something change in the UI. If you observe the below image, the functioning of component is not correct. Can you also suggest

component?

srinivasp
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.
October 15, 2012

Hi Denis, how can i get the handle of the selected objects if the multiselect component in javascript?

srinivasp
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.
October 15, 2012

Hi Denis, Could you please let me know how can get the selected options from this componenets?

srinivasp
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.
October 16, 2012

Hi Denis, I want to use JIRA inbuilt Date picker component. So i copied the code from duedate-edit.vm file and pasted on my vm file and modified the ids.

<input class="text medium-field" id="testdate" name="testdate" type="text"  />
					<a href="#" id="testdate-trigger" title="Select Date">
						<span class="aui-icon icon-date">Select Date</span>
					</a>
I added the javascript required for building the datepicker component also.
Calendar.setup({
firstDay : 1,
inputField : 'testdate',
button : 'testdate-trigger',
align : 'Br',
singleClick : true,
showsTime : true,
useISO8601WeekNumbers : false,
ifFormat : '%d.%m.%Y %H:%M'
});

When i execute i am getting the following exception on my console.

"Uncaught TypeError: Cannot read property 'DEF_DATE_FORMAT' of undefined"

Could you please suggest how i can provide the 'DEF_DATE_FORMAT' value to my component?


0 votes
Deniz Oğuz
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 23, 2013

I have also Uncaught TypeError: Cannot read property 'DEF_DATE_FORMAT' of undefined problem. I have tried to include following lines but it dit not help. Could you find a solution to this problem?

$webResourceManager.requireResource("jira.webresources:calendar") $WebResourceManager.requireResource("jira.webresources:calendar-en");

TAGS
AUG Leaders

Atlassian Community Events