Home Carbon Ads Accessing User Phone Contacts using Intel XDK

Accessing User Phone Contacts using Intel XDK

contacts-intel-xdk

This post is a part 31 of Intel XDK Complete Tutorial post series.

Every phone has a native default contact application which maintains phone numbers, address, emails and names. Intel XDK allows applications to access and modify contacts of the contact application

Accessing and manipulating user contacts can be useful in many cases. Suppose you are building an application like whatsapp in this case accessing user contacts is required to add someone to whatsapp account. If you creating a social media website in this case adding friends contact information is required.

In this tutorial I will create a app which allows you to add, remove, modify and list contacts from the native contact application.

Including Intel XDK Contact Plugin

Before we start creating the app we need to make sure we have included the Intel XDK Contact plugin in our app.

Screen Shot 2014-12-03 at 10.13.56 pm

Basic Template

Below is the code for basic template for our app

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <style>
        @-ms-viewport { width: 100vw ; zoom: 100% ; }                          
        @viewport { width: 100vw ; zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; }                                    
        @viewport { user-zoom: fixed ; }
    </style>

    <script src="lib/ft/fastclick.js"></script>

    <link rel="stylesheet" href="css/app.css">
</head>
<body>
   
    <button onclick="add_contact();">Add New Contact</button>
    <button onclick="select_a_contact();">Select a Contact</button>
    <button onclick="import_contacts();">List all Contacts</button>
   
    <ul id="contacts_list"></ul>
   
    <script src="intelxdk.js"></script>        
    <script src="cordova.js"></script>          
    <script src="xhr.js"></script>              

    <script src="js/app.js"></script>
    <script src="js/init-app.js"></script>
    <script src="js/init-dev.js"></script>
</body>
</html>

Adding a New Contact

Here is the code to add a new contact to native contacts app. Every contact gets a unique id.

        function add_contact()
        {
            //this function opens native contacts app and lets user add me new contact. This function fires intel.xdk.contacts.add event after contacts app is closed.
            intel.xdk.contacts.addContact();
        }
       
        document.addEventListener('intel.xdk.contacts.add', function(evt){
            if(evt.success == true)
            {
                alert("Contact "+evt.contactid+" successfully added");
            }
            else
            {
                alert("Add Contact Cancelled");
            }
        });

Selecting a Contact

It’s sometimes necessary to prompt user to select a contact. Applications like whatsapp ask the user to select a contact so that they can fetch phone number and add the contact to user.

        function select_a_contact()
        {
            //this function opens native contacts app and lets user select a contact. This function fires intel.xdk.contacts.choose event after contacts app is closed.
            intel.xdk.contacts.chooseContact();
        }
       
        document.addEventListener('intel.xdk.contacts.choose', function(evt){
            if (evt.success == true)
            {
                var contactID = evt.contactid;
               
                //this function retirves infotmation of a contact based on its id.
                var contactInfo = intel.xdk.contacts.getContactData(contactID);
               
                var firstName = contactInfo.first;
                var lastName = contactInfo.last;
                var phoneNumbers = contactInfo.phones;
                var emails = contactInfo.emails;
                var address = contactInfo.addresses;
               
                alert(firstName + lastName);
            }
            else if (evt.cancelled == true)
            {
                alert("Choose Contact Cancelled");
            }
        });

Importing, Deleting and Editing Contacts

Here is the code to import all contacts, delete a contact and also edit a contact.

        function import_contacts()
        {
            //this functions fires intel.xdk.contacts.get event after list of contacts ids has been imported to application local storage.
            intel.xdk.contacts.getContacts();
        }
       
        document.addEventListener('intel.xdk.contacts.get', display_contacts, false);
                                 
        function display_contacts(evt)
        {
            //this functions retrieves contacts from local storage that were imported by getContacts function.
            var myContacts = intel.xdk.contacts.getContactList();
           
            document.getElementById("contacts_list").innerHTML = "";
           
            for(var i=0; i < myContacts.length; i++)
            {
                //every contact has a unique id
                var contactID = myContacts[i];
               
                var contactInfo = intel.xdk.contacts.getContactData(contactID);
                var firstName = contactInfo.first;
                var lastName = contactInfo.last;
               
                var html = "<li>Name: " + firstName + " " + lastName + " <br> <button onclick='remove_contact(" + contactID + ")'>Remove</button><button onclick='edit_contact(" + contactID + ")'>Edit</button></li>";
                document.getElementById("contacts_list").innerHTML = document.getElementById("contacts_list").innerHTML + html;
            }
        }
       
        function remove_contact(contactID)
        {
            //this function takes a contact id and removes it from native contacts app. After it finishes executing it fires intel.xdk.contacts.remove event.
            intel.xdk.contacts.removeContact(contactID);
        }
       
        document.addEventListener('intel.xdk.contacts.remove', function(evt){
            if (evt.success == true)
            {
                //we have called import_contacts to refresh the contacts list displayed by our app. It has nothing to do with contact deletion.
                import_contacts();
                alert("Contact has been removed");
            }
            else
            {
                alert("Contact couldn't be deleted");
            }
        });  
       
        function edit_contact(contactID)
        {
            //this function takes a contact id and edits it in native contacts app. After it finishes executing it fires intel.xdk.contacts.edit event.
            intel.xdk.contacts.editContact(contactID);
        }
       
        document.addEventListener('intel.xdk.contacts.edit', function(evt){
            if (evt.success == true)
            {
                //we have called import_contacts to refresh the contacts list displayed by our app. It has nothing to do with contact editing.
                import_contacts();
                alert("Contact has been edited");
            }
            else if (evt.cancelled == true)
            {
                alert("Edit Contact Cancelled");
            }
        });

Complete Source Code

Here is the complete source code of the app

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <style>
        @-ms-viewport { width: 100vw ; zoom: 100% ; }                          
        @viewport { width: 100vw ; zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; }                                    
        @viewport { user-zoom: fixed ; }
    </style>

    <script src="lib/ft/fastclick.js"></script>

    <link rel="stylesheet" href="css/app.css">
</head>
<body>
   
    <button onclick="add_contact();">Add New Contact</button>
    <button onclick="select_a_contact();">Select a Contact</button>
    <button onclick="import_contacts();">List all Contacts</button>
   
    <ul id="contacts_list">
   
    </ul>
   
    <script src="intelxdk.js"></script>        
    <script src="cordova.js"></script>          
    <script src="xhr.js"></script>              

    <script src="js/app.js"></script>
    <script src="js/init-app.js"></script>
    <script src="js/init-dev.js"></script>
   
    <script>
        function add_contact()
        {
            intel.xdk.contacts.addContact();
        }
       
        document.addEventListener('intel.xdk.contacts.add', function(evt){
            if(evt.success == true)
            {
                alert("Contact "+evt.contactid+" successfully added");
            }
            else
            {
                alert("Add Contact Cancelled");
            }
        });
       
        function select_a_contact()
        {
            intel.xdk.contacts.chooseContact();
        }
       
        document.addEventListener('intel.xdk.contacts.choose', function(evt){
            if (evt.success == true)
            {
                var contactID = evt.contactid;
               
                //this function retirves infotmation of a contact based on its id.
                var contactInfo = intel.xdk.contacts.getContactData(contactID);
               
                var firstName = contactInfo.first;
                var lastName = contactInfo.last;
                var phoneNumbers = contactInfo.phones;
                var emails = contactInfo.emails;
                var address = contactInfo.addresses;
               
                alert(firstName + lastName);
            }
            else if (evt.cancelled == true)
            {
                alert("Choose Contact Cancelled");
            }
        });
       
       
       
        function import_contacts()
        {
            intel.xdk.contacts.getContacts();
        }
       
        document.addEventListener('intel.xdk.contacts.get', display_contacts, false);
                                 
        function display_contacts(evt)
        {
            var myContacts = intel.xdk.contacts.getContactList();
           
            document.getElementById("contacts_list").innerHTML = "";
           
            for(var i=0; i < myContacts.length; i++)
           {
               var contactID = myContacts[i];
               
               var contactInfo = intel.xdk.contacts.getContactData(contactID);
               var firstName = contactInfo.first;
               var lastName = contactInfo.last;
               
               var html = "<li>Name: " + firstName + " " + lastName + " <br> <button onclick='remove_contact(" + contactID + ")'>Remove</button><button onclick='edit_contact(" + contactID + ")'>Edit</button></li>";
                document.getElementById("contacts_list").innerHTML = document.getElementById("contacts_list").innerHTML + html;
            }
        }
       
        function remove_contact(contactID)
        {
            intel.xdk.contacts.removeContact(contactID);
        }
       
        document.addEventListener('intel.xdk.contacts.remove', function(evt){
            if (evt.success == true)
            {  
                import_contacts();
                alert("Contact has been removed");
            }
            else
            {
                alert("Contact couldn't be deleted");
            }
        });  
       
        function edit_contact(contactID)
        {
            intel.xdk.contacts.editContact(contactID);
        }
       
        document.addEventListener('intel.xdk.contacts.edit', function(evt){
            if (evt.success == true)
            {
                import_contacts();
                alert("Contact has been edited");
            }
            else if (evt.cancelled == true)
            {
                alert("Edit Contact Cancelled");
            }
        });
       
    </script>
</body>
</html>

IMG_0539

IMG_0539

IMG_0539

IMG_0539

Building APP Binary

While building app binary for Android make sure you enable user contacts access permission.

Screen Shot 2015-01-01 at 2.51.44 pm

Narayan Prusty
Create a Camera App using Intel XDKGoogle's No CAPTCHA reCAPTCHA PHP Code Example
Comments: 9
  1. 3 years ago

    Hi my good friend Narayan,thanks for helping us develop and learn more may almighty give you more,now i added the cordova contact pluggin and i also pasted the code above on my index as directed.getting following error- uncought module cordova-plugin-contacts.Contact already defined

    ReplyCancel
  2. 4 years ago

    Is it possible to obtain the user e-mail main address. For example if the user has an android phone and is logged in example@gmail.com, how can I obtain that address?

    ReplyCancel
  3. subin
    4 years ago

    can i add contact automatic with a name and no in variable on button click?

    ReplyCancel
  4. Pradeep
    4 years ago

    Is it possible to get contact image

    ReplyCancel
  5. pushkar
    4 years ago

    is it possible to use the call button as event from xdk?

    ReplyCancel
  6. Rafael Franco
    5 years ago

    Great tutorial. Thank you Narayan.
    But I need to change contact’s telephone number inserting a “9” in the first position. Is it possible with Intel XDK?
    Thank you in advance.

    ReplyCancel
  7. Luiz
    5 years ago

    Narayan, you have an example of how to call someone using the intel XDK?

    tks,
    Luiz

    ReplyCancel
  8. Jeannot Ekoundo
    5 years ago

    Thanks!

    Is it possible to access to contact in chip?

    ReplyCancel
    • Narayan Prusty
      5 years ago

      When u are using the contacts api it retrieves contacts from chip also.

      ReplyCancel

Leave a Reply to Ernesto Padilla Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image5 years ago 9 Comments Cordova
Share this
Related Articles