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. (Timesheet Tracking for Jira | 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.

If anyone is looking at this, I did try the Select2 suggestion but both XHR and fetch requests cannot be made from within the iframe of a connect app due to cross origin access controls enforced by the browser.

I’m working to recreate the frontend with React and make use of the components. I’m still not sure how the components are able to make those requests from inside the iframe. I’d appreciate any help with this.
Thanks.

https://developer.atlassian.com/platform/forge/manifest-reference/permissions/

Take a look at external permissions.

@KCWong
I took a look, and it appears that those permissions only apply to forge apps.

I’m not sure how I would apply that to my connect app.