Cordova Contacts - Cordova

What is Cordova Contacts?

This plugin is used for accessing the device contacts database. In this tutorial we will show you how to create, query and delete contacts.

Step 1 - Install Contacts Plugin

Step 2 - Adding Buttons

The button will be used for calling CreateContact function. We will place it in div class = "app" in index.html file.

Step 2 - Add Event Listeners

Open index.js and copy the following code snippet into OnDeviceReady function.

Step 3A - Callback Function


At the moment we don't have any contacts stored on the device.
Cordova - Contacts
Our first callback function will call navigator.contacts.Create method where we can specify new contact data. This will create contact and assign it to MyContact variable but it will not be stored on device. To store it we need to call save method and create success and error callback functions.

When we click ADD CONTACT button, new contact will be stored to device contact list.
Cordova - Contacts

Step 3B - Callback Function (navigator.contacts.find)

Our second callback function will query all contacts. we will use navigator.contacts.find method. The options object has filter parameter which is used to specify search filter. multiple = true is used since we want to return all contacts from device. We also are using field key to search contacts through DisplayName since we used it when saving contact.

After the options are set, we are using find method to query contacts. The alert message will be triggered for every contact that is found.

When we press FIND CONTACT button one alert popup will be triggered since we only have one contact saved.
Cordova - Contacts

Step 3C - Callback function (delete)

In this step we are using find method again but this time we will set different options. options.filter is set to search for Test User since we want to delete it. After ContactfindSuccess callback has returned the contact we want, we are deleting it by using remove method that requires its own success and error callbacks.

At the moment we only have one contact stored on the device. We will manually add one more to show you the deleting process.
Cordova - Contacts
Now we can click DELETE CONTACT button to delete Test User. If we check the contact list again, we will see that there is no Test User anymore.
Cordova - Contacts

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Cordova Topics