How to get multi-select dropdown in connect app?

Hi everyone,

I’m working on a connect app. I need to provide the ability for the user to select multiple users from a list of users in the instance.
Likewise, I also need this option for groups and projects.

I’ve tried using the REST API to get a list of users to populate the HTML before rendering it, but that is not efficient. Is there a way to implement a multi-select like this using HTML or hooking into Atlassian-provided JavaScript?

I’ll appreciate it if someone can help.

As an example, I’ve included screenshots from [Timesheet tracking for Jira], an application that has the selections that I need. (Atlassian Marketplace).

Thanks.

Hi Yusuf,
You can use Atlasskit’s User Picker. For group and user pickers, you can use Atlaskit’s Select component.

I’m not currently using Atlaskit or React for my app.
Is there a way to simply use these components individually without re-writing the entire app in React.

They are React components, you can’t use them without React. You can use https://select2.org to implement the same functionality. You just need to implement a function to fetch users/projects/groups using Atlassian’s user/group picker REST API and format the returned response to the format expected by Select2.

Note that Service Management does not play nice with select2:
https://jira.atlassian.com/browse/JSDSERVER-5777?_ga=2.145746876.942874784.1661736993-714270868.1651595929

You will have to disable an event listener added by Service Management if you want select2 to work. See my comment in that issue.