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

Managing a MongoDB deployment? Take a load off and live migrate to MongoDB Atlas, the official automated service, with little to no downtime.

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.


MongoDB Atlas is the easiest way to run the fastest-growing database for modern applications — no installation, setup, or configuration required. Easily live migrate an existing workload or start with 512MB of storage for free.

Topics:

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}