Module 13: Using the Contacts API

In this section, you use the Cordova Contacts API to provide the user with the ability to add an employee to the device's contact list.

The code below only works when running the application on your device as a Cordova app. In other words, you can't test it in a browser on your computer.

Add the contacts plugin to your project

cordova plugin add org.apache.cordova.contacts

In index.html, add the following list item to the employee template:

<li class="table-view-cell media">
    <a hre="#" class="push-right add-contact-btn">
        <span class="media-object pull-left"></span>
        <div class="media-body">
            Add to contacts
        </div>
    </a>
</li>

In the initialize() function of EmployeeView, register an event listener for the click event of the Add to Contacts list item:
```
this.$el.on('click', '.add-contact-btn', this.addToContacts);
```

In EmployeeView, define the addToContacts event handler as follows:

this.addToContacts = function(event) {
    event.preventDefault();
    console.log('addToContacts');
    if (!navigator.contacts) {
        alert("Contacts API not supported", "Error");
        return;
    }
    var contact = navigator.contacts.create();
    contact.name = {givenName: employee.firstName, familyName: employee.lastName};
    var phoneNumbers = [];
    phoneNumbers[0] = new ContactField('work', employee.officePhone, false);
    phoneNumbers[1] = new ContactField('mobile', employee.cellPhone, true);
    contact.phoneNumbers = phoneNumbers;
    contact.save();
    return false;
};