A Complete Guide to cordova-plugin-contacts

This lesson, I’m going to teach you how to access your device contacts using http://github.com/apache/cordova-plugin-contacts by using this plugin you can create a new contact, or search contact or even you can pick your contacts (using contact picker), but you can’t edit or delete existing contact using this plugin.

New to PhoneGap (Cordova)? Visit https://codesundar.com/phonegap-tutorial/

Getting Started

Let’s create a new project and add required platforms and plugins

cordova create contactsexample com.codesundar.contactexample contactsexample
cd contactsexample
cordova platform <span class="hljs-keyword">add</span><span class="bash"> android
</span>cordova plugin <span class="hljs-keyword">add</span><span class="bash"> cordova-plugin-contacts</span>

Methods

• navigator.contacts.create
• navigator.contacts.find
• navigator.contacts.pickContact

How to create a new contact?

Let’s create a new contact using this plugin.to create new contact we can use navigator.contacts.create() function.

Syntax

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createContact</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">var</span> myContact = navigator.contacts.create({

    displayName: <span class="hljs-string">'CODESUNDAR'</span>,
    phoneNumbers: [{
        <span class="hljs-string">"type"</span>: <span class="hljs-string">"mobile"</span>,
        <span class="hljs-string">"value"</span>: <span class="hljs-string">"+919876543210"</span>
    }
    ]

}); 
myContact.save(); 
}

navigator.contacts.create used for creating new contacts, you need to pass JSON objects inside the function, .save() used for saving your created contact with the device

Search contact?

<span class="hljs-selector-tag">navigator</span><span class="hljs-selector-class">.contacts</span><span class="hljs-selector-class">.find</span>(<span class="hljs-selector-tag">fields</span>, <span class="hljs-selector-tag">onSuccess</span>, <span class="hljs-selector-tag">onError</span>, <span class="hljs-selector-tag">options</span>);

navigator.contacts.find() used for search contact with given field names

Example

    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">searchContact</span>() </span>{
        <span class="hljs-keyword">var</span> keyword = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'keyword'</span>).value;
        <span class="hljs-built_in">console</span>.log(keyword);

        <span class="hljs-keyword">var</span> options = <span class="hljs-keyword">new</span> ContactFindOptions();
        options.filter = keyword;
        options.multiple = <span class="hljs-literal">true</span>;
        options.desiredFields = [navigator.contacts.fieldType.id];
        options.hasPhoneNumber = <span class="hljs-literal">true</span>;
        <span class="hljs-keyword">var</span> fields = [navigator.contacts.fieldType.displayName, navigator.contacts.fieldType.name];
        navigator.contacts.find(fields, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">res</span>) </span>{
            <span class="hljs-built_in">console</span>.log(res);
            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Found'</span>, res.length);
            alert(<span class="hljs-string">'Found, '</span>)
        }, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">err</span>) </span>{
            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Error'</span>, err);
        }, options);
    }

Pick Contact

navigator.contacts.pickContact used to open a contact picker, where you can pick for particular contact & retrieve information about the contact

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">openContactPicker</span>() </span>{
        navigator.contacts.pickContact(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">contact</span>) </span>{
            alert(<span class="hljs-built_in">JSON</span>.stringify(contact))
        }, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">err</span>) </span>{
            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Error: '</span> + err);
        });
}