It is sometimes essential to use the contacts through the mobile app. You have to search for the contacts in the Contacts database. Apache Cordova has a plugin to get this task completed. This plugin is used for accessing the device contacts database.
In this article you will be able to know how to create, search and delete contacts through the app.
Step 1 - Installing Contacts Plugin
To install the contact plugin, open command prompt window and execute the following code.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-contacts
Step 2 - Add Buttons
The button will be added and used for calling createContact method. You should the following code inside div class = "app" in index.html file.
<button id = "addContact">CREATE CONTACT</button>
<button id = "searchContact">SEARCH CONTACT</button>
<button id = "deleteContact">DELETE CONTACT</button>
Step 2 - Add Event Listeners
Open index.js and copy the following code snippet into onDeviceReady function.
document.getElementById("addContact").addEventListener("click", addContact);
document.getElementById("searchContact ").addEventListener("click", searchContact);
document.getElementById("deleteContact").addEventListener("click", deleteContact);
Step 3A - Callback Function (navigator.contacts.create)
Currently there are no contacts stored on the device.
The first callback function will call navigator.contacts.create method where we can assign new contact data. This will create a new contact and assign it to myContact variable but it will not be stored on device. To store it you must call save method and create success and error callback functions.
function addContact() {
var newContact = navigator.contacts.create({"displayName": "Test User"});
newContact.save(contactSuccess, contactError);
function contactSuccess() {
alert("Contact is saved!")
}
function contactError(message) {
alert('Failed because: ' + message);
}
}
When you click on ADD CONTACT button, new contact will be created and saved to device’s contact list.
Step 3B - Callback Function (navigator.contacts.find)
The second callback function will search all saved contacts in the device. You should use navigator.contacts.find method.
You can specify search filter using the options object that has filter parameter.
multiple = true is used when you want to return all contacts from device.
You can also use field key to search contacts by displayName as used it when saving contact.
After the options are set, you should use find method to search for contacts. The alert message will be displayed for every contact that is found.
function searchContacts() {
var options = new ContactFindOptions();
options.filter = "";
options.multiple = true;
fields = ["displayName"];
navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);
function contactfindSuccess(contacts) {
for (var i = 0; i < contacts.length; i++) {
alert("Display Name = " + contacts[i].displayName);
}
}
function contactfindError(message) {
alert('Failed because: ' + message);
}
}
When we press SEARCH CONTACT button one alert popup will be displayed as only one contact is saved at present.
Leave Comment