Cordova Plugins update, and new Contacts demo

Yesterday the Cordova team released updated plugins. You can read the details here: Plugins Release: July 8, 2014. Of particular interest to me was the update to the Contacts plugin, specifically the addition of a new API, pickContact.

Previously, you could search the device's contact database, but there was no way to provide a list of all the contacts so the user could easily select one. Third-party plugins existed to provide that functionality, but now it is provided directly with the core plugin itself via pickContact. Here is a simple example:

document.addEventListener("deviceready", init, false);

function init() {	
	document.querySelector("#pickContact").addEventListener("touchend", doContactPicker, false);
}

function doContactPicker() {
	navigator.contacts.pickContact(function(contact){
		console.log('The following contact has been selected:' + JSON.stringify(contact));
		//Build a simple string to display the Contact - would be better in Handlebars
		var s = "";
		s += "<h2>"+getName(contact)+"</h2>";

		if(contact.emails && contact.emails.length) {
			s+= "Email: "+contact.emails[0].value+"<br/>";
		}

		if(contact.phoneNumbers && contact.phoneNumbers.length) {
			s+= "Phone: "+contact.phoneNumbers[0].value+"<br/>";
		}

		if(contact.photos && contact.photos.length) {
			s+= "<p><img src='"+contact.photos[0].value+"'></p>";
		}

		document.querySelector("#selectedContact").innerHTML=s;
	},function(err){
		console.log('Error: ' + err);
	});
}

/*
Handles iOS not returning displayName or returning null/""
*/
function getName(c) {
	var name = c.displayName;
	if(!name || name === "") {
		if(c.name.formatted) return c.name.formatted;
		if(c.name.givenName && c.name.familyName) return c.name.givenName +" "+c.name.familyName;
		return "Nameless";
	}
	return name;
}

The actual API is relatively simple, just navigator.contacts.pickContact. The first argument is a success callback while the second is for errors. This fires the native contact picker UI for the device. For example, here it is in iOS:

For the most part, the Contact API is a bit simple, but you do run into a few quirks. I strongly recommend reading the full docs for the plugin. You can see in my code above where I do a bit of work for iOS to handle how it does names.

Finally, my sample code displays the contact you selected.

I've added this demo to my Cordova-Examples repository on GitHub.

Archived Comments

Comment 1 by Justin Noel posted on 7/10/2014 at 3:45 AM

I was very excited to see this. It's so nice not to have to display a contact list in the app itself. Unfortunately, this seems really buggy to me.

If you select a contact that doesn't have email or mobile number, the app spits out this exception:

2014-07-09 18:41:08.441 HelloCordova[5180:60b] Exception - Name: NSRangeException Reason: *** -[__NSArrayM objectAtIndex:]: index 0 beyond bounds for empty array

Also got output like :

2014-07-09 18:39:06.914 HelloCordova[5180:60b] Exception - Name: NSRangeException Reason: *** -[__NSArrayM objectAtIndex:]: index 0 beyond bounds for empty array
AB: Could not compile statement for query (ABCCopyArrayOfAllInstancesOfClassInSourceMatchingProperties):
SELECT ROWID, Name, ExternalIdentifier, Type, ConstraintsPath, ExternalModificationTag, ExternalSyncTag, AccountID, Enabled, SyncData, MeIdentifier, Capabilities FROM ABStore WHERE Enabled = ?;
AB: Could not compile statement for query (ABCCopyArrayOfAllInstancesOfClassInSourceMatchingProperties):
SELECT ROWID, Name, ExternalIdentifier, Type, ConstraintsPath, ExternalModificationTag, ExternalSyncTag, AccountID, Enabled, SyncData, MeIdentifier, Capabilities FROM ABStore WHERE Enabled = ?;

I also had problems with an iPhone 4S (ios 6) even running with this plugin installed.

Comment 2 by Raymond Camden posted on 7/10/2014 at 3:55 AM

Can you file a bug report for it? Sounds like an easy thing to fix.

Comment 3 by Justin Noel posted on 7/17/2014 at 8:25 PM

Oops. I had other issues with my own code sample. The problem doesn't really exist.

Comment 4 by miche.atucha posted on 7/23/2014 at 9:17 PM

i used it in an ionic app, and gets an alert when try to use " navigator.contacts.pickContact", the alert contains: "index.html", "null", nothing else, not the confirm popup,

Comment 5 by Raymond Camden posted on 7/23/2014 at 9:27 PM

Ensure you have the latest version of the plugin. Outside of that, I don't know. If you send me a zip of your www, I can take a quick look. I only make that offer because I love Ionic and want to see more examples. ;)

Comment 6 by miche.atucha posted on 7/23/2014 at 10:55 PM

the problem seems to be that is not loading the Contacts plugin, i place an alert on app.js in the onready event: alert(navigator.contacts), and is displaying undefined

Comment 7 by Raymond Camden posted on 7/24/2014 at 5:35 AM

Did you add the plugin? Remember you have to do that.

Comment 8 by GNR posted on 7/10/2015 at 5:22 AM

how to get all phone contact? means onload to get all contact and write in html page.. can you help me?

Comment 9 (In reply to #8) by Raymond Camden posted on 7/10/2015 at 12:33 PM
Comment 10 by Christopher Bastian Campos Sov posted on 9/26/2015 at 10:34 AM

hello, how i can add a add contact function in the header bar of the pickContact (native ui), HELP!!.

Comment 11 by Christopher Bastian Campos Sov posted on 9/26/2015 at 10:35 AM

hello, how i can add a add contact function in the header bar of the pickContact (native ui), HELP!!!!!!

Comment 12 (In reply to #10) by Raymond Camden posted on 9/26/2015 at 2:11 PM

As far as I know, you can't modify the UI for the contact picker. You can, of course, add a contact via the API.

Comment 13 by Christopher Bastian Campos Sov posted on 9/27/2015 at 11:29 AM

hello, how i can add a add contact function in the header bar of the pickContact (native ui), HELP!!.

Comment 14 (In reply to #12) by Christopher Bastian Campos Sov posted on 9/27/2015 at 11:31 AM

i try modify the contact picker via contact.js, but not really working..., how whatsapp can use that ui?, thanks!!.

Comment 15 (In reply to #14) by Raymond Camden posted on 9/27/2015 at 11:34 AM

Sorry I don't know.

Comment 16 by sam posted on 11/13/2015 at 3:07 PM

hello ,
thanks for the help. I finally saw contact picker working....
Thank you so much

Comment 17 by Jafarali Maknojiya posted on 12/5/2015 at 10:53 AM

it is possible to select multiple contact in pickcontact. that meas when i click on contact it will show all pickcontact with chekbox

Comment 18 (In reply to #17) by Raymond Camden posted on 12/5/2015 at 1:00 PM

Did you go to the docs and check?

Comment 19 by Subin Babu posted on 4/26/2016 at 11:32 AM

How to add a contact with name and number in single button click?

Comment 20 (In reply to #19) by Raymond Camden posted on 4/26/2016 at 1:00 PM

Please see the docs. It shows you how to add a contact.

Comment 21 by Abhinanda posted on 8/12/2016 at 9:40 AM

Hi Raymond,

When I am trying to test the contacts plugin in my android then it is not working
getting error on onsucessgetcontacts.

Uncaught typeError : cannot read property "0" of null.

Thanks
Abhinanda

Comment 22 (In reply to #21) by Raymond Camden posted on 8/12/2016 at 1:51 PM

What line?

Comment 23 by Vince posted on 11/10/2016 at 6:36 AM

Hi guys, I'm always getting an error that is stating the navigator.contacts object is undefined.

I have installed the plugin, included ngCordova and $cordovaContacts in my controller.

The navigator object just doesn't seem to have the contacts object.

I am just trying to simply retrieve all contacts.

Comment 24 (In reply to #23) by Raymond Camden posted on 11/10/2016 at 12:27 PM

Are you waiting for deviceready to fire?
What does "cordova plugins ls" tell you?

Comment 25 by Stomata posted on 12/10/2016 at 4:37 PM

Hi Raymond,
I'm using lolipop 5.1.1. I'm filtering with '*' but most data are null, only id and raw id are available.

I'm also testing in emulator and its not null like in real device. Is this a bug? or need special permission?

Comment 26 (In reply to #25) by Raymond Camden posted on 12/11/2016 at 7:49 PM

Not sure. If you can document this enough with code, I'd file a bug report on the plugin repo.

Comment 27 by Ravi Gupta posted on 3/30/2017 at 11:52 AM

Hi

How to select multiple contact at a time?

Comment 28 (In reply to #27) by Raymond Camden posted on 3/30/2017 at 12:47 PM

pickContact only allows for one selection at a time. You can use the find API to get all contacts and build your own UI to browse/select.

Comment 29 (In reply to #28) by Yesha Shah posted on 4/26/2018 at 9:13 AM

Hello, have you worked on that so far? I am also stuck on the same thing, just need your help if you can guide me on that.

Comment 30 (In reply to #29) by Raymond Camden posted on 4/26/2018 at 7:08 PM

In what aspect?

Comment 31 (In reply to #30) by Yesha Shah posted on 4/27/2018 at 7:01 AM

I want to select multiple contacts from the contacts. So , I wanted to know how can I achieve this.

Comment 32 (In reply to #31) by Raymond Camden posted on 4/27/2018 at 1:11 PM

I described how to do that already. You get all the contact. You then render them to the user (using JavaScript) and that's it.