Add elements to AJS multiselect by JS

I want to create a multi-user-picker field in custom page (as plugin configuration), my code is:

function initAllUserPickers() {
    $( ".cust_userPicker" ).each(function( index, element ) {
        initOneUserPicker($( this ));
    });
}

function initOneUserPicker(element) {
    var $el = AJS.$(element);
    var x = new AJS.MultiSelect({
        element: element,
        itemAttrDisplayed: "label",
        showDropdownButton: false,
        ajaxOptions:  {
            data: function (query) {
                return {
                    query: query,
                    exclude: $el.val()
                }
            },
            url: AJS.params.baseURL + "/rest/api/2/user/picker",
            query: true,
            formatResponse: JIRA.UserPickerUtil.formatResponse
        }
    });
}

This code works perfectly but I have one more requirement for this field (it is not custom field within the meaning of the Jira, it is just html field). I need to add to the field some users when the page is ready just using javascript, It should look like some users have already been chosen - get the list of ‘already chosen’ users by custom rest api (so have this list in javascript).

I tried to build html elements and append it to page structure but it looks ugly…
Is the any ‘add’ method or something like that (for javascript)?

Does anyone have any idea how to do it?

Hi, I know maybe my answer is a bit late, but I have searched the same and did not succeed.

I have fought with this AJS.MultiSelect for 2 days and finally I did it.

So first of all you can simply trigger your select by this simple steps:

// your select
var currentSelect = AJS.$('#your_select_id') 
// option to select
var optionToSelect = currentSelect.find('option[value={value to be selected}]') 
// if option exists get descriptor of that option
if (optionToSelect.length > 0) {
    optionToSelect.prop("selected", true); // set selected property to 'true'
    var descriptor = optionToSelect.data("descriptor"); // get option descriptor
    currentSelect.trigger("selectOption", descriptor);  // trigger section element
}

If you does not have any option in your select you can create own descriptor object and trigger your select. There will be less code:

// your selection element
var currentSelect = AJS.$('#your_select_id') 
// custom descriptor
var descriptor = {
   label: 'foo',
   value: 'bar',
   model: new Option('foo', 'bar')
}
// trigger
currentSelect.trigger("selectOption", descriptor);

To remove selection use “removeOption” instead of “selectOption”.

Hope this info saves someone time :grinning:

2 Likes

The AJS.Multiselect is actually a Select2. Have a look at the documentation of Select2 https://select2.org/.

Thanks rolyanos, This is really a great help. It worked and I am able to set the option selected . But removeOption did not work for me. Here is my code

if (optionToSelect.length > 0) {
optionToSelect.prop(“selected”, false); // set selected property to ‘false’
var descriptor = optionToSelect.data(“descriptor”); // get option descriptor
currentSelect.trigger(“removeOption”, descriptor); // trigger section element
}
Please help. thanks

Hi @PartibhaRani,
I assume that you want to deselect the option not delete? If yes please use

currentSelect.trigger(“clearSelection”);

I took it from source code:
Screenshot 2022-09-07 at 15.40.12

Best regards,
Ros

2 Likes

Thanks rolyanos, It worked like charm. Wasted 2 days in finding the solution.

Hello rolyanos,
I am still struggling with User fields like Assignee and reporter. The solution does not work for these fields. Any help. would be appreciated. Thanks