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.