How to create and interact with a JIRA user picker?

[Thomas Keller]

I have an administration form where I need to let users assign a JIRA user to a custom model object. How do I create a user picker for this purpose and interact with this picker, e.g. to clear its value or set a predefined one?

[Thomas Keller · Accepted solution]

Let this be your HTML:

<div class="field-group">
    <label for="assignee">Assignee</label>
    <select id="assignee" class="single-user-picker" name="assignee" data-user-type="assignee" ></select></div>

Then, in your Javascript file, create the picker control like this:

var $assigneeComponent;
function createSingleUserPicker(ctx) {
    $assigneeComponent = new AJS.SingleSelect({
        element: $("#assignee"),
        submitInputVal: true,
        showDropdownButton: false,
        errorMessage: AJS.format("There is no such user \'\'{0}\'\'.", "'{0}'"),
        ajaxOptions: {
            url:  AJS.contextPath() + "/rest/api/1.0/users/picker",
            query: true, // keep going back to the sever for each keystroke
            data: {showAvatar: true},
            formatResponse: JIRA.UserPickerUtil.formatResponse
        }
    });
}

JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context, reason) {
    if (reason !== JIRA.CONTENT_ADDED_REASON.panelRefreshed) {
        createSingleUserPicker(context);
    }
});

Now that you have a reference to the picker control ($assigneeComponent), you can call any method on it, like for example clear()to clear the current selection. If you want to set a predefined value, do this:

$assigneeComponent.setSelection(new AJS.ItemDescriptor({
    value: "<value>",
    label: "<Firstname Lastname, whatever>",
    icon: "<http url to image icon>"
}));

[Steven F Behnke]

What is the use case? I am intrigued but confused.

[Frédéric Esnault]

Thanks Thomas, this works perfectly fine. I was looking for this, and your code did juste what I wanted (except that I replaced single-select with multi-select, and included it in a form class="aui" to have the correct CSS applied. By the way, would you know to to tell the multiselect where to send a rest call when a user is selected ?