Help Creating AUI Dialog Box - Select2

[scott_boisvert]

I've been trying to get create a dialog box using a ScriptRunner Rest EndPoint and Fragment in Confluence, the fragment just adds the selection to the ellipses on the page and calls the REST Endpoint. This is working. 

I have been able to create a dialog box with the auiSelect2 drop down menu as indicated on this page: https://aui.atlassian.com/aui/7.9/docs/auiselect2.html

Going deeper, I need this drop down to by populated with a list of users, hence it needs to be dynamic, the previous link mentions the the full docs are here: https://select2.org/

Drilling down the Data Sources -> Arrays: https://select2.org/data-sources/arrays

I think is where I need to be, somehow populating an array with the user information. My problem is I can't get the field to display on the dialog using the info found on that page. Looking for some help. 

Below is the script I've been working with. I've tried both select2 and auiSelect2, what messes with me the most is the """ quotes. Knowing when to escape them, etc.

import com.onresolve.scriptrunner.runner.rest.common.CustomEndpointDelegate
import groovy.transform.BaseScript

import javax.ws.rs.core.MediaType
import javax.ws.rs.core.MultivaluedMap
import javax.ws.rs.core.Response

import com.atlassian.confluence.user.UserAccessor
import com.atlassian.sal.api.component.ComponentLocator
import com.atlassian.user.GroupManager
import com.atlassian.user.UserManager

@BaseScript CustomEndpointDelegate delegate
def groupManager = ComponentLocator.getComponent(GroupManager)
def userAccessor = ComponentLocator.getComponent(UserAccessor)
def userManager = ComponentLocator.getComponent(UserManager)
def members = userAccessor.getMembers(groupManager.getGroup("confluence-users"))

showDialog() { MultivaluedMap queryParams ->

def dialog =
"""
<section role="dialog" id="sr-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true">

<header class="aui-dialog2-header">
<h2 class="aui-dialog2-header-main">Add Watchers to Page</h2>
<a class="aui-dialog2-header-close">
<span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
</a>
</header>
<div class="aui-dialog2-content">
<div id="container" style="width:px">
<form class="aui">
<div id="description" style="height:220px;width:280px;float:left;">
<p>Please select the users you would like to watch this page:</p>
<p>Users: 
<script>
var data = [
{
id: 0,
text: \'enhancement\'
},
{
id: 1,
text: \'bug\'
},
{
id: 2,
text: \'duplicate\'
},
{
id: 3,
text: \'invalid\'
},
{
id: 4,
text: \'wontfix\'
}
];

AJS.\$(".js-example-data-array").auiSelect2({data: data})
</script>

</p>
</div>
</form>
</div>
</div>
<footer class="aui-dialog2-footer">
<div class="aui-dialog2-footer-actions">
<button id="submit-button" class="aui-button aui-button-primary">Confirm</button>
<button id="dialog-close-button" class="aui-button aui-button-link">Close</button>
</div>
<div class="aui-dialog2-footer-hint">Some hint here if you like</div>
</footer>
</section> 
"""
Response.ok().type(MediaType.TEXT_HTML).entity(dialog.toString()).build()

}

[PD Sheehan]

I think AUI's select2 is based on the old Select2 version (3.5x). You will find the old doco here: https://select2.github.io/select2/

Here is an example Javascript I have that initializes a select2 with some parameters (including ajax for dynamically loading the data):

AJS.\$("#select2-id").auiSelect2(
    {
        multiple:false,
        placeholder: 'Select something',
        ajax: {
            url: '/rest/scriptrunner/latest/custom/myEndPointForSelect2Data',
            data: function (term, page) {
                return {
                    q: term, // search term typed by user
                };
            },
            results: function(data, page){ return {results: data.items}}
        }
    }
)

Your endpoint needs to either return data in a {"items":[{"id":"value", "text":"value"}]} or else you will need to transform it in the results function