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.
Basic Template
Below is the code for basic template for our app
<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.
{
//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.
{
//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.
{
//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
<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>
Building APP Binary
While building app binary for Android make sure you enable user contacts access permission.