Use aui-select2 in gadget's configuration screen

Michael Kornatzki

Hi,

i have created a gadget with a multiselect list in the gadget's configuration screen.
Now I want to use aui-select2, but I can't find the right place to specify it.
When I click on the button to edit the gadget-configuration, there is no event (or i can't find it).
In Javascript simply use

AJS.$(document).ready(function() { 
  AJS.$(“#dashboards”).auiSelect2();
} 

does not work.
Probably because the configuration page is not displayed when loading (display: none) 

Thanks in advance
Michael

Tuncay Senturk _Snapbytes_

Hi @Michael Kornatzki 

I know gadgets and JavaScript in XML can be a pain in the neck. I usually use the following approach to dynamically retrieve select options via REST and fill the select component accordingly. I hope that helps.

 

{
    userpref: "mySelect",
    id: "mySelectDiv",
    label: "Label",
    type: "callbackBuilder",
    callback: function (parentDiv) {
        var componentSelect = AJS.$("<select/>").attr({
            id: "mySelect",
            name: "mySelect",
            class: "select"
        });
        // call your rest and fill select component with options
        AJS.$.get("__ATLASSIAN_BASE_URL__/rest_service", function (data) {
            AJS.$(data).each(function () {
                var option = AJS.$("<option>").attr('value', this.value).text(this.label);
                if (gadget.getPref("mySelect") == this.value) {
                    option.attr("selected", "true");
                }
                componentSelect.append(option);
            });
        });
        parentDiv.append(componentSelect);
    }
},

I also used select2(), but I can't say it is the best approach.

Best