Cordova contact

This plug-in is used to access the device contact database. /b10> In this tutorial, we'll show you how to create, query, and delete contacts.

Step 1 - Install the contact plug-in

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-contacts

Step 2 - Add a button

The button will be used to call the createContact function. /b10> We put it in .html "app" in the index file.

<button id = "createContact">ADD CONTACT</button>
<button id = "findContact">FIND CONTACT</button>
<button id = "deleteContact">DELETE CONTACT</button>

Step 2 - Add an event listener

Open the index .js and copy the following snipper into the onDeviceReady function.

	
document.getElementById("createContact").addEventListener("click", createContact);
document.getElementById("findContact").addEventListener("click", findContact);
document.getElementById("deleteContact").addEventListener("click", deleteContact);

Step 3A - Callback Function (navigator.contacts.create)

Currently, we don't store any contacts on our devices.

Our first callback function will call the navigator.contacts.create method, and we can specify new contact data. /b10> This creates the contact and assigns it to the myContact variable, but it is not stored on the device. /b11> To store it, we need to call the Save method and create a success and error callback function.

function createContact() {
   var myContact = navigator.contacts.create({"displayName": "Test User"});
   myContact.save(contactSuccess, contactError);
    
   function contactSuccess() {
      alert("Contact is saved!")
   }
	
   function contactError(message) {
      alert('Failed because: ' + message);
   }
	
}

When we click the Add Contacts button, the new contact is stored in the device contact list.

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

Our second callback function will query all contacts. /b10> We'll use the navigator.contacts.find method. /b11> Options The object has a filter parameter that specifies a search filter. /b12> multiple is true because we want to return all the contacts on the device. /b13> We also use the field key to search for contacts through displayName because we use it when we save contacts.

After setting the options, we use the find method to query the contacts. /b10> An alert message will be triggered for each contact found.

function findContacts() {
   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 the Find Contacts button, an alert pop-up window is triggered because we save only one contact.

Step 3C - Callback Function (delete)

In this step, we use the find method, but this time we'll set different options. /b10> Options.filter is set to search for test users because we want to delete it. /b11> After the contactfindSuccess callback returns the contact we want, we remove it using the remove method that requires our own successful and incorrect callbacks.

function deleteContact() {

   var options = new ContactFindOptions();
   options.filter = "Test User";
   options.multiple = false;
   fields = ["displayName"];

   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);

   function contactfindSuccess(contacts) {

      var contact = contacts[0];
      contact.remove(contactRemoveSuccess, contactRemoveError);

      function contactRemoveSuccess(contact) {
         alert("Contact Deleted");
      }

      function contactRemoveError(message) {
         alert('Failed because: ' + message);
      }
   }

   function contactfindError(message) {
      alert('Failed because: ' + message);
   }
	
}

Currently, we only have one contact stored on the device. /b10> We'll add one manually to show you the deletion process.

You can now delete the test user by clicking the Delete Contact button. /b10> If we check the contact list again, we'll see that there are no more test users.