ContactsManager: select() method
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The select()
method of the
ContactsManager
interface returns a Promise
which, when
resolved, presents the user with a contact picker which allows them to select contact(s)
they wish to share. This method requires a user gesture for the Promise
to
resolve.
Syntax
js
select(properties)
select(properties, options)
Parameters
properties
-
An array of
strings
defining what information to retrieve from a contact. Allowed values are as follows:'name'
: The contact's name.'tel'
: The telephone number(s) of the contact.'email'
: The email address of the contact.'address'
: The contact's postal address.'icon'
: The avatar of the contact.
options
Optional-
Options are as follows:
multiple
-
A Boolean that allows multiple contacts to be selected. The default is
false
.
Return value
Returns a Promise
that resolves with an array of objects containing contact information. Each object represents a single contact may contain the following properties:
address
-
An
Array
ofContactAddress
objects, each containing specifics of a unique physical address. email
-
An array of strings containing email addresses.
icon
-
An array of
Blob
objects containing images of an individual. name
-
An array strings, each a unique name of an individual.
tel
-
An array strings, each a unique phone number of an individual.
Exceptions
InvalidStateError
DOMException
-
Returned if the browsing context is not top-level or the contact picker is showing a flag. A flag denotes an already existing contact picker; only one picker can exist at any time.
SecurityError
DOMException
-
Returned if the method is not triggered by user interaction.
TypeError
-
Returned if
properties
is empty, or if any of the specified properties are not supported.
Examples
Basic Example
The following example sets an array of properties to be retrieved for each contact, as well as setting an options object to allow for multiple contacts to be selected.
An asynchronous function is then defined which uses the select()
method to
present the user with a contact picker interface and handle the chosen results.
handleResults()
is a developer defined function.
js
const props = ["name", "email", "tel", "address", "icon"];
const opts = { multiple: true };
async function getContacts() {
try {
const contacts = await navigator.contacts.select(props, opts);
handleResults(contacts);
} catch (ex) {
// Handle any errors here.
}
}
Select Using Only Supported Properties
The following example uses getProperties()
to ensure that only supported properties are passed. Otherwise, select()
might throw a TypeError
. handleResults()
is a developer defined function.
js
const supportedProperties = await navigator.contacts.getProperties();
async function getContacts() {
try {
const contacts = await navigator.contacts.select(supportedProperties);
handleResults(contacts);
} catch (ex) {
// Handle any errors here.
}
}
Specifications
Specification |
---|
Contact Picker API # contacts-manager-select |
Browser compatibility
BCD tables only load in the browser