Select2 prepopulate options and pillbox options on dialog load

Jira Development Jira Server
1

Is there a trick to getting the single select options and multi-select pill box options to pre-populate in Atlassian forms using select2 fields that I am missing or am I doing something inherently wrong with my attempt?

I am trying to implement two different select2 fields. One is a multi-select and the other is a single select. They are both using soy templates to provide the HTML and a Javascript controller that allows for a type-ahead option finder via a rest query (AKA remotely sourced AJAX). I have been able to make this part work and can select values from my remote source.

Now I want to provide an edit option that will display the dialog again with the current values pre-selected in the select2 form fields.

I started with this tutorial : https://comsysto.github.io/kitchen-duty-plugin-for-atlassian-jira/tutorial/06-step-03-planning-page–user-search-js-controller/

I have read over the documentation on select2 here: https://select2.org/programmatic-control/add-select-clear-items , but it doesn’t seem to work as defined or I am missing something in the Atlassian implementation. I fully admit that JavaScript is not my strong suit, but I’ve had several of my teammates with JavaScript skills look this over, and we couldn’t figure it out.

This is the relevant section of the soy template

{namespace JIRA.Templates.CUSTOMPLUGIN}
/**
* CustomPlugin Configuration Page - Update Item Template
* @param customplugindata
*/
{template .itemUpdate}
<form id="customplugin-item-update-form-data" class="aui" action="#" method="POST">
    <div class="field-group">
        <label for="custompluginOwner">
            Primary Owner
            <span class="aui-icon icon-required"></span>
            <span class="content">required</span>
        </label>
        <div id="custompluginOwner"
             name="rcustompluginOwner"
             class="customplugin-aui-select"
             placeholder="Currently {$customplugindata.owner}"
        >
    
        </div>
    </div>
    <div class="field-group">
        <aui-label for="custompluginCards">
            Auditor Interest
        </aui-label>
        <div id="custompluginCards"
             name="custompluginCards"
             class="customplugin-aui-select"
             placeholder="Currently {foreach $card in keys($customplugindata['cards'])}
                                      {$customplugindata['cards'][$card]['name']}{if not isLast($card)},&nbsp;{/if}
                                      {/foreach}"
        >
        </div>
    </div>
</form>
{/template}

This is the section of JavaScript Controller with the code that should prepopulate the select2 fields:

var auiUserSelectOptions = {
    ajax: {
        url: function () {
            return AJS.params.baseURL + '/rest/customplugin/1.0/user/search';
        },
        dataType: 'json',
        type: 'GET',
        delay: 250,
        data: function (searchTerm) {
            return {
                query: searchTerm
            };
        },
        results: function (data) {
            return {
                results: data
            };
        },
        cache: true
    },
    minimumInputLength: 1,
    maximumSelectionLength: 1,
};

var auiCardsSelectOptions = {
    ajax: {
        url: function () {
            return AJS.params.baseURL + '/rest/customplugin/1.0/card/';
        },
        dataType: 'json',
        type: 'GET',
        delay: 250,
        data: function (searchTerm) {
            return {
                name: searchTerm,
                activeOnly: 'true'
            };
        },
        results: function (data) {
            var dataTransformed = $.map(data, function (obj) {
                obj.text = obj.text || obj.name;
                return obj;
            });
            return {
                results: dataTransformed
            };
        },
        cache: true
    },
    minimumInputLength: 1,
    tags: true,
    placeholder: "start typing a Card ..."
};

//hard-code value for brevity in explanation. This var is really populated from a REST call
var templateParameters = {item: {id: 1, name: "itemName", owner: "userAccount" cards: {0: {id: 1, name: "card1"}, 1: {id: 2, name: "card2"}, 3: {id: 3, name: "card4"}}}}
var templateItemUpdate = JIRA.Templates.CUSTOMPLUGIN.itemUpdate(templateParameters);

AJS.$.when(AJS.$('#item-configuration-page-container').append(templateItemUpdate)).done(function () {
    var itemUpdateDialog = AJS.dialog2("#item-update-dialog");
    itemUpdateDialog.show();
});

AJS.$('#custompluginOwner').auiSelect2(auiUserSelectOptions);
AJS.$('#custompluginCard').auiSelect2(auiCardSelectOptions);
var ownerSelector = AJS.$('#custompluginOwner');
newOption = new Option(data.owner, data.owner, true, true);
ownerSelector.append(newOption).trigger('change');
ownerSelector.trigger({
        type: 'select2:select',
        params: {
            data: {text: data.owner, id: data.owner}
        }
    });

var cardSelector = AJS.$('#custompluginCard');
for (var x = 0, len = data.cards.length; x < len; x++) {
    var rowInfo = data.cards[x],
        newOption = new Option(rowInfo.name, rowInfo.id, true, true);
    cardSelector.append(newOption).trigger('change');
    cardSelector.trigger({
        type: 'select2:select',
        params: {
            data: rowInfo
        }
    });
}

AJS.$('.item-button').click(function () {
    var itemUpdateDialog = AJS.dialog2("#item-update-dialog");
    itemUpdateDialog.remove();
}

Any insight into how this select2 field is pre-populated would be greatly appreciated.

1 Like
2

You would use the initSelection: property within the select2 definition. I found this question on Stackoverflow helpful: