Twitter: raymondcamden


Address: Lafayette, LA, USA

Cordova Plugins update, and new Contacts demo

07-09-2014 4,315 views Mobile 7 Comments

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.

7 Comments

  • Commented on 07-09-2014 at 6:45 PM
    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.
  • Commented on 07-09-2014 at 6:55 PM
    Can you file a bug report for it? Sounds like an easy thing to fix.
  • Commented on 07-17-2014 at 11:25 AM
    Oops. I had other issues with my own code sample. The problem doesn't really exist.
  • miche.atucha #
    Commented on 07-23-2014 at 12: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,
  • Commented on 07-23-2014 at 12: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. ;)
  • miche.atucha #
    Commented on 07-23-2014 at 1: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
  • Commented on 07-23-2014 at 8:35 PM
    Did you add the plugin? Remember you have to do that.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty