SHARE

Accessing User’s Address book using Contacts Intent in HTML5

Written By

Aug 30, 2013

Introduction

The Contacts Intent section in HTML5 specification http://www.w3.org/TR/contacts-api/ was an attempt to a uniform view to the contacts; an implementation which varied across multiple operating systems and web applications. Users had to maintain multiple sets of same address book information since there was nothing available to tie it together, resulting in redundant and often stale information.

The Contacts Intent specifies that a web application can access a subset of a user’s address book. This subset can be obtained from sources unknown to the web application, and supports user’s security and privacy settings.

The sources of the address book data need to be registered as Intent services, which allows web application to access the data in a consistent manner.

The support for accessing Contacts initially came in as JavaScript APIs in the initial version of HTML5 specification, but as the specification matured, it morphed into a web intent. The intent version still attempts to stay true to the API behavior it replaced.

The Contact dictionary in defined as:

dictionary Contact {

  DOMString       id;

  DOMString?      displayName;

  ContactName?     name;

  DOMString?      nickname;

  ContactField[]?    phoneNumbers;

  ContactField[]?    emails;

  ContactAddress[]?   addresses;

  ContactField[]?    ims;

  ContactOrganization[]? organizations;

  Date?         birthday;

  DOMString?      note;

  ContactField[]?    photos;

  DOMString[]?     categories;

  ContactField[]?    urls;

};

The syntax for intent is simple. You declare the action you want to perform and the type on which you want to perform the intent on. In the extras, you specify the fields you need access to.

For example,

var contactIntent = new Intent({ action: “http://webintents.org/pick”,

type: “http://w3.org/type/contact”,

extras: { fields: [“displayName”, “phoneNumbers”] }});

Next, you specify your success and failure callback methods in your intent invocation call.

navigator.startActivity(contactIntent, contactsSuccess, contactsFail);

When the address book data is retrieved successfully, the contactsSuccess method will be called, if the retrieval is a failures, contactsFail callback will be called.

The complete HTML source will look as under:

<!DOCTYPE html>

<html>

<title>Contacts Javascript sample</title>

<body>

<button id=”button1″ type=”button” onclick=”button1_click()”>Click Me!</button>

function contactsSuccess (contacts)

{

// iterate over the array of contacts to do something useful with them

alert(‘ContactsSuccess API called!’);

}

function contactsFail (err)

{

// display an error to the user

alert(‘ContactsFail API called!’);

}

function button1_click()

{

alert(‘Button clicked! Registering contact intent’);

var contactIntent = new Intent({ action: “http://webintents.org/pick”,

type: “http://w3.org/type/contact”,

extras: { fields: [“displayName”, “phoneNumbers”] }});

navigator.startActivity(contactIntent, contactsSuccess, contactsFail);

}

</script>

</body>

</html>

The sample HTML file containing this code is available for download at <link>.

Today, the browsers (like Google Chrome) do not support registering the Intent. You can work-around it by registering an extension (see http://www.chromium.org/developers/web-intents-in-chrome for details).

Once you have registered the Contacts Intent successfully, you can view our page in a HTML5 compatible browser and see that only restricted access to the address book is granted to the web application. Upon loading the webpage, you will be asked to select from an address book. (by opening the service page, which will allow to select contacts.

Summary

In this article, we learned about the Contacts Intent and how to build a web application which can request access to address book contacts. I hope you have found this information useful.

Accessing User’s Address book using Contacts Intent in HTML5

Vipul Patel

Recommended for you...

Company

Categories