Application for Adding new Contacts to a Mobile Device

Let us learn to add new contacts to the Contacts database of the device. The application will display a form prompting the user to enter information like name, address, e-mail address, and phone number of the contact. After entering the information for the new contact, when the user selects the Submit button, a new contact will be created in the Contacts database with the supplied information.

Let us create a new Android project called AddingContactsApp. To add a new contact, write the code shown in Listing 1 in the index.html file.

Listing 1 Code Written in the index.html File

<title>PhoneGap Application</title>
<script type = “text/javascript” charset = “utf-8” src = “cordova.js”>
<script type = “text/javascript”>
function onBodyLoad() {
document.addEventListener(“deviceready”, PhonegapLoaded, false);
function PhonegapLoaded(){
document.getElementById(“submitButton”).addEventListener(“click”, addContact);
function addContact(){
var FullName = document.getElementById(“name”).value;
var Address = document.getElementById(“add”).value;
var emailID = document.getElementById(“email”).value;
var phoneNo = document.getElementById(“phone”).value;
var newContact = navigator.contacts.create();       #1
newContact.displayName = FullName;                  #2
var phoneNums = [1];                                #3
phoneNums[0] = new ContactField(‘work’, phoneNo, true); #4
newContact.phoneNumbers = phoneNums;                  #5
var emailAddresses = [1];
emailAddresses[0] = new ContactField(‘home’, emailID, true);
newContact.emails = emailAddresses;                   #6
var addresses = [];
addresses[0] = new ContactAddress();
addresses[0].type = ‘home’;
addresses[0].streetAddress = Address;
newContact.addresses = addresses;, onError);                  #7
function onSuccess(contact) {
alert(“New contact successfully created”);
document.getElementById(“addresponse”).innerHTML = “Contact successfully added”;
function onError(contactError) {
alert(“Error in creating a new contact ” + contactError.code);
<body onload = “onBodyLoad()”>
<h2> Enter information of the new contact </h2> <br/>
<tr><td>Name </td><td> <input type = “text” id = “name”></td></tr>
<tr><td>Address </td><td> <input type = “text” id = “add”></td></tr>
<tr><td>Email Address </td><td> <input type = “text” id = “email”></td></tr>
<tr><td>Phone Number </td><td> <input type = “text” id = “phone”></td></tr>
<input type = “button” id = “submitButton” value = “Submit”>
<div id = “addresponse”></div>

In the code above, we see that four input text fields are defined with the IDs name, add, email, and phone, respectively. The input fields will prompt users to enter the name, address, e-mail address, and phone number of the new contact. After entering information of the new contact, when the Submit button is clicked, the respective JavaScript function will be invoked to save the entered information in the Contacts database of the device. A few statements used in Listing 1 need explanation.

Statement 1 creates a Contact object by name, newContact. Statement 2 assigns the name entered by the user to the displayName property of the newContact object. Multiple information like phone numbers, addresses, e-mail addresses, and so on, are initially kept in arrays, and thereafter the information in arrays is stored in the Contact object with the help of the ContactField object. The ContactField object is a general purpose wrapper that enables us to create a data field and then add it to a contact.

Statement 3 creates an array of one element size, phoneNums. In this array, the work phone number of the contact is kept after wrapping it in the ContactField object (statement 4). Also, the work phone number is declared as the preferred phone number of the contact. By increasing the size of the PhoneNums array, we can store the home phone number of the contact too. The phone number(s) wrapped in the ContactField object is then assigned to the phoneNumbers property of the newContact object (statement 5).

Similarly, statement 5 assigns the home e-mail address of the contact (wrapped inside the ContactField object) to the emails property of the newContact object. After defining the name, phone number, e-mail address, and address of the contact, the contact is saved in the Contacts database through statement 7. To load the index.html file, write the code as shown in Listing 2 in the Java activity file,

Listing 2 Code Written in the Java Activity File:

package com.harwani.addingcontactsapp;
import android.os.Bundle;
import org.apache.cordova.DroidGap;
public class AddingContactsAppActivity extends DroidGap {
public void onCreate(Bundle savedInstanceState) {

To access, read, and write contacts in the Contacts database of the device, we need to add the following permissions in the AndroidManifest.xml file:

<uses-permission android:name = “android.permission.ACCESS_NETWORK_STATE”/>
<uses-permission android:name = “android.permission.READ_CONTACTS”/>
<uses-permission android:name = “android.permission.WRITE_CONTACTS”/>
<uses-permission android:name = “android.permission.GET_ACCOUNTS”/>

Our application is complete and ready to run. Upon running the application, a form prompting us to enter information of the new contact will be displayed (see Figure 1).


Information like name, address, e-mail address, and phone number of the contact has to be entered in the form, followed by clicking the Submit button. If no error occurs while saving the information of the new contact in the Contacts database, the message “Contact successfully added” will be displayed, as shown in Figure 2.


Above application currently appears as an Android application. Using PhoneGap, this application can be converted to an application that can run on different mobile platforms including iOS, Windows Phone, BlackBerry etc. To know more, and to create cross mobile platform applications, read my book, PhoneGap Build: Developing Cross Platform Mobile Applications in the Cloud that is available at


Foundations of Joomla!

Foundations of Joomla!                                             Foundations of Joomla is a step by step practical guide that explains building web sites and blogs using Joomla – a very popular and powerful content … Continue Reading →