Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Cordova Plugins Update, and New Contacts Demo

DZone's Guide to

Cordova Plugins Update, and New Contacts Demo

· Java Zone ·
Free Resource

Start coding something amazing with our library of open source Cloud code patterns. Content provided by IBM.

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.


Use this tool to look at the contents of GitHub and classify code based on the programming language used.  Content provided by IBM Developer.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}