Phonegap Contacts Plugin : Contact Management App

PhoneGap Contacts Plugin lets the user to manage contacts stored in the device through a mobile app.

Things a user can do using this plugin are –

Create a contact
Delete a contact
Update a contact
Search/Find a contact

We’re going to build this Contact Management App by using PhoneGap & jQuery Mobile Interface.

Now,

Let’s take a look at the methods, arguments, and objects offered by PhoneGap Contacts Plugin.

Methods, Arguments and Objects of Contacts Plugin

Methods

contacts.create : Creates contact.

var contact = navigator.contacts.create(properties);

contacts.find : Search all contacts.

navigator.contacts.find(contactFields, contactSuccess, contactError, contactFindOptions);

Arguments

contactFields: It is mandatory for find() method, it specifies the fields find is going to return.
```
["name", "phoneNumbers", "emails"]
```
contactSuccess: Success callback function.
contactError: Error callback function.
contactFindOptions: Optional fields used to filter the return fields.
```
{ filter: "", multiple: true, };
```

Objects

Contact: It contain all the properties which are necessary to describe a contact.
ContactName: It contacts all the fields related to the contact’s name.
ContactField: It contains generic fields like email address, phone numbers, and URLs.
ContactAddress: It contacts all the fields related to the contact’s address.
ContactOrganization: It contacts all the fields related to the contact’s organization.
ContactFindOptions: These are the properties, with the help of which data returned by find() gets filtered.
ContactError: ContactError Object which gets passed to ContactError callback function.

Idea Of The App

Features

Creates a new contact in the device.
Get all contacts stored in the device.
Find/search a particular contact from stored contacts.

Technologies Used

jQuery Mobile : For Interface / UI Designing

We’re going to use jQuery Mobile for designing interface.

Files:

HTML File : Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Contact</title>

<!--Stylesheet Files : jQuery Mobile CSS File, Customized CSS File and Font Awesome for icons -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="css/my.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

<!--jQuery File : Library, Mobile Library, Cordova JS and Customized JS File -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/my.js"></script>
</head>

<!--Beginning of the Body-->
<body>
<div data-role="page">

<!--Header Bar-->
<div data-role="header" data-position="fixed" class="ui-header ui-bar-a ui-header-fixed slidedown" role="banner">
<h1>Contact Me</h1>
</div>
<div data-role="main" class="ui-content ui-corner-all" id="main">
<center><p id="heading">PhoneGap Contacts Plugin</p></center>
<div data-role="tabs">

<!--Beginning of the Navbar Tabs-->
<div data-role="navbar">
<ul>

<!--Tab Buttons : Create Contact, Get All Contacts & Find A Contact-->
<li><a href="#one" data-theme="a" data-ajax="false">Create Contact</a></li>
<li><a id="getContact" href="#two" data-theme="a" data-ajax="false">Get All Contacts</a></li>
<li><a href="#three" data-theme="a" data-ajax="false">Find A Contact</a></li>
</ul>
</div>

<!--First tab button functionality-->
<div id="one" class="ui-content">
<div id="namediv" class="ui-content">
<div class="ui-field-contain">
<label for="textinput-fc">Name:</label>
<input type="text" name="textinput-fc" id="dname" placeholder="Name" value="">
</div>
<div class="ui-field-contain">
<label for="textinput-fc">Middle Name:</label>
<input type="text" name="textinput-fc" id="dmname" placeholder="Middle Name" value="">
</div>
<div class="ui-field-contain">
<label for="textinput-fc">Family Name:</label>
<input type="text" name="textinput-fc" id="dfname" placeholder="Family Name" value="">
</div>
</div>
<div id="numberdiv" class="ui-content">
<div class="ui-field-contain">
<label for="textinput-fc">Mobile:</label>
<input type="text" name="textinput-fc" id="dmob" placeholder="Mobile" value="">
</div>
<div class="ui-field-contain">
<label for="textinput-fc">Other Mobile:</label>
<input type="text" name="textinput-fc" id="dothermob" placeholder="Other Mobile" value="">
</div>
</div>
<div id="emaildiv" class="ui-content">
<div class="ui-field-contain">
<label for="textinput-fc">Email:</label>
<input type="text" name="textinput-fc" id="demail" placeholder="Email" value="">
</div>
</div>
<div id="addressdiv" class="ui-content">
<div class="ui-field-contain">
<label for="textinput-fc">Street Address:</label>
<input type="text" name="textinput-fc" id="dadd" placeholder="Street Address" value="">
</div>
<div class="ui-field-contain">
<label for="textinput-fc">Region:</label>
<input type="text" name="textinput-fc" id="dregion" placeholder="Region" value="">
</div>
<div class="ui-field-contain">
<label for="textinput-fc">Country:</label>
<input type="text" name="textinput-fc" id="dcountry" placeholder="Country" value="">
</div>
</div>
<div id="addressdiv" class="ui-content">
<div class="ui-field-contain">
<label for="textinput-fc">Birthday:</label>
<input type="text" name="textinput-fc" id="dbday" placeholder="Birthday" value="">
</div>
<div class="ui-field-contain">
<label for="textinput-fc">Note:</label>
<input type="text" name="textinput-fc" id="dnote" placeholder="Note" value="">
</div>
<div class="ui-field-contain">
<label for="textinput-fc">URL:</label>
<input type="text" name="textinput-fc" id="durl" placeholder="URL" value="">
</div>
</div>
<a href="#" id="createContact" class="ui-shadow ui-btn ui-corner-all">Save Contact</a>
</div>
<!--End of First tab button-->

<!--Beginning of the second tab button-->
<div id="two" class="ui-content">
<table data-role="table" data-mode="reflow" class="ui-responsive ui-shadow" id="myTable"></table>
</div>
<!--End of second tab button-->

<!--Beginning of the third tab button-->
<div id="three" class="ui-content">
<h1>Find A Contact</h1>
<div class="ui-field-contain">
<label for="textinput-fc">Enter Contact's Name:</label>
<input type="text" name="textinput-fc" id="searchitin" placeholder="Find a contact you want to search" value="">
<a href="#" id="searchit" class="ui-shadow ui-btn ui-corner-all">Search Contact</a>
<table data-role="table" data-mode="reflow" class="ui-responsive ui-shadow" id="searchTable"></table>
</div>
</div>
<!--End of third tab button-->

</div>
</div>
</div>
</body>
<!--End of the Body-->
</html>

JavaScript File : My.js

<!--Call to document ready function-->
$(document).ready(function() {

<!--Definition of onlick function on the button with the id="searchit" -->
$(document).on('click', '#searchit', function() {
navigator.contacts.find(
[navigator.contacts.fieldType.name],
searchContacts,
errorHandler);
});

<!--Definition of searchContacts method -->
function searchContacts(c) {
var name = $("#searchitin").val();
console.log("searchContacts, number of results "+c.length);
var i=0;
for(var i=0, len=c.length; i<len; i++) {
if (c[i].name.givenName == name) {
var firstname = c[i].name.givenName;
var fname = c[i].name.familyName;
var email = c[i].emails[0].value;
var phone = c[i].phoneNumbers[1].value;
alert("f =" + firstname + "l =" + fname + "email =" + email + "phone =" + phone);
pair = "<tr><th data-priority=\"1\"><center>Name</center></th><td><center>"+c[i].name.givenName+"</center></td></tr><tr><th data-priority=\"1\"><center>Surname</center></th><td><center>"+c[i].name.familyName+"</center></td></tr><tr><th data-priority=\"1\"><center>Email</center></th><td><center>"+ c[i].emails[0].value +"</center></td></tr><tr><th data-priority=\"1\"><center>Mobile No</center></th><td>"+ c[i].phoneNumbers[1].value +"></td></tr>";
$("#searchTable").html(pair);
};
}
}

<!--Definition of onlick function on the button with the id="createContact" -->
$("#createContact").click(function(){

<!--Fetching values of all the fields-->
var name = $("#dname").val();
var mname = $("#dmname").val();
var fname = $("#dfname").val();
var mobile = $("#dmob").val();
var omobile = $("#dothermob").val();
var email = $("#demail").val();
var address = $("#dadd").val();
var region = $("#dregion").val();
var country = $("#dcountry").val();
var bday = $("#dbday").val();
var note = $("#dnote").val();
var durl = $("#durl").val();

<!--Calling the contacts.create method and passing the values to the respective fields-->
var myContact = navigator.contacts.create(
{
"displayName":null,
"name":{
"givenName":name,
"formatted":null,
"middleName":mname,
"familyName":fname,
"honorificPrefix":null,
"honorificSuffix":null
},
"nickname":null,
"phoneNumbers":[
{"type":"mobile","value":mobile,"id":0,"pref":false},
{"type":"other","value":omobile,"id":1,"pref":false}
],
"emails":[
{"type":"home","value":email,"id":0,"pref":false}
],
"addresses":[
{
"postalCode":null,
"type":"work",
"id":0,
"locality":null,
"pref":"false",
"streetAddress":" ",
"region":region,
"country":country
}],
"ims":null,
"organizations":[
{
"name":"",
"title":"",
"type":null,
"pref":"false",
"department":""
}],
"birthday":bday,
"note":note,
"categories":null,
"urls":[
{
"type":"other",
"value":durl,
"id":0,
"pref":false
}]
}
);
myContact.save();
alert("The contact, " + myContact.name.givenName + ", has been created");
});

<!--Definition of onlick function on the button with the id="getContact" -->
$(document).on('click', '#getContact', function() {

<!--Calling the contacts.find method to fetch all contacts-->
navigator.contacts.find(
[navigator.contacts.fieldType.name],
gotContacts,
errorHandler);
});
function errorHandler(e) {
console.log("errorHandler: "+e);
}

<!--Definition of gotContacts -->
function gotContacts(c) {
console.log("gotContacts, number of results "+c.length);
var pair="<tr><th data-priority=\"1\"><center>Name</center></th><th data-priority=\"1\"><center>Family Name</center></th><th data-priority=\"2\"><center>Email</center></th><th><center>Mobile No</center></th></tr>";
var i=0;
for(var i=0, len=c.length; i<len; i++) {
if(c[i].phoneNumbers && c[i].phoneNumbers.length > 0) {
pair += "<tr><td><center>"+c[i].name.givenName+"</center></td><td><center>"+c[i].name.familyName+"</center></td><td><center>"+ c[i].emails[0].value +"</center></td><td>"+ c[i].phoneNumbers[1].value +"></td></tr>";
}
}
alert(pair);
$("#myTable").html(pair);
}
});

CSS File : My.css

.ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit {
border: 1px solid #005994 !important;
background: #0093EA !important;
color: #fff !important;
font-weight: bold !important;
text-shadow: 0 0 #eee !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #0093EA), to( #007dcd ));
background-image: -webkit-linear-gradient( #0093EA , #007dcd );
background-image: -moz-linear-gradient( #0093EA, #007dcd );
background-image: -ms-linear-gradient( #0093EA , #007dcd );
background-image: -o-linear-gradient( #0093EA , #007dcd );
background-image: linear-gradient( #0093EA , #007dcd );
}
.ui-page-theme-a .ui-btn:hover, html .ui-bar-a .ui-btn:hover, html .ui-body-a .ui-btn:hover, html body .ui-group-theme-a .ui-btn:hover, html head + body .ui-btn.ui-btn-a:hover{
border: 1px solid #007dcd;
background: #333 ;
font-weight: bold;
text-shadow: 0 0 #eee !important;
color: #fff !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #0093EA ), to( #0093EA ));
background-image: -webkit-linear-gradient( #0093EA , #0093EA );
background-image: -moz-linear-gradient( #0093EA , #0093EA );
background-image: -ms-linear-gradient( #0093EA , #0093EA );
background-image: -o-linear-gradient( #0093EA , #0093EA );
background-image: linear-gradient( #0093EA , #0093EA );
}
.ui-page-theme-a .ui-btn.ui-btn-active, html .ui-bar-a .ui-btn.ui-btn-active, html .ui-body-a .ui-btn.ui-btn-active, html body .ui-group-theme-a .ui-btn.ui-btn-active, html head + body .ui-btn.ui-btn-a.ui-btn-active, .ui-page-theme-a .ui-checkbox-on:after, html .ui-bar-a .ui-checkbox-on:after, html .ui-body-a .ui-checkbox-on:after, html body .ui-group-theme-a .ui-checkbox-on:after, .ui-btn.ui-checkbox-on.ui-btn-a:after, .ui-page-theme-a .ui-flipswitch-active, html .ui-bar-a .ui-flipswitch-active, html .ui-body-a .ui-flipswitch-active, html body .ui-group-theme-a .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active, .ui-page-theme-a .ui-slider-track .ui-btn-active, html .ui-bar-a .ui-slider-track .ui-btn-active, html .ui-body-a .ui-slider-track .ui-btn-active, html body .ui-group-theme-a .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-a .ui-btn-active {
background-color: #0093EA !important ;
border-color:#0093EA !important;
color: #fff ;
text-shadow: 0 1px 0 #005599 ;
}
img{
//padding: 25px;
padding-bottom: 25px;
//width: 20%;
}
button.ui-btn, .ui-controlgroup-controls button.ui-btn-icon-notext {
border-radius: 5px !important;
}
#searchbutton{
margin-bottom: 25px;
}
#main{
margin-top: -1% !important ;
}
.ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content
{
background-color: #ddd;
color: #111;
}
.ui-collapsible-content {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
//height: 2em;
overflow: hidden;
}
.ui-collapsible-content-collapsed {
display: block;
height: 0;
padding: 0 16px;
}
#bt i{
font-weight: bold;
}
th {
border-bottom: 1px solid #d6d6d6 !important;
}
tr:nth-child(even) {
background: #e9e9e9 !important;
}
.ui-table {
margin-top: 3% !important;
border: 1px solid grey !important;
border-radius: 5px !important;
border-collapse: initial !important;
}
label{
font-weight: bold !important;
}
#label{
border: 1px solid #0093EA !important;
background: #fff !important;
color: #005994 !important;
font-weight: bold !important;
text-shadow: 0 0 #eee !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #0093EA), to( #007dcd ));
background-image: -webkit-linear-gradient( #0093EA , #007dcd );
background-image: -moz-linear-gradient( #0093EA, #007dcd );
background-image: -ms-linear-gradient( #0093EA , #007dcd );
background-image: -o-linear-gradient( #0093EA , #007dcd );
background-image: linear-gradient( #0093EA , #007dcd );
}
#utable tr:nth-child(even){
background: inherit !important;
}
#heading{
font-weight: bold;
font-size: 30px;
}
#btndiv{
margin-top: 3%;
}
@media ( max-width: 35em ) {
.ui-table-reflow.ui-responsive td,
.ui-table-reflow.ui-responsive th {
width: auto;
float: none;
clear: none;
display: table-cell;
margin: 0;
padding:0;
}
}
#btndiv .ui-bar-a{
width: 50% !important;
margin: auto !important;
}
#namediv,#numberdiv,#emaildiv,#addressdiv{
border: 1px solid #ddd;
margin-top: 15px;
border-radius: 5px;
background-color: #f6f6f6;
}
.ui-navbar li .ui-btn {
font-size: 16px !important;
}

Conclusion:

So you see, with the help of contacts plugin, we can build a streak of useful apps and that too with so much of ease. I hope it will help you.

Check out the following blogs to get more related updates –

PhoneGap : How Push Notifications Work?

PhoneGap Inappbrowser

Phonegap Contacts Plugin : Contact Management App

Idea Of The App

Files:

HTML File : Index.html

JavaScript File : My.js

CSS File : My.css

Conclusion:

One Reply to “Phonegap Contacts Plugin : Contact Management App”

Leave a Reply Cancel reply

Take Your Email Marketing To The Next Level!

Start using MailGet and experience world class email builder, create email newsletters in a snap and send great
emails to your audience. Do amazing email marketing at an affordable price.

Phonegap Contacts Plugin : Contact Management App

Idea Of The App

Files:

HTML File : Index.html

JavaScript File : My.js

CSS File : My.css

Conclusion:

Related Posts:

One Reply to “Phonegap Contacts Plugin : Contact Management App”

Leave a Reply Cancel reply

Take Your Email Marketing To The Next Level!

Start using MailGet and experience world class email builder, create email newsletters in a snap and send great emails to your audience. Do amazing email marketing at an affordable price.

Start using MailGet and experience world class email builder, create email newsletters in a snap and send great
emails to your audience. Do amazing email marketing at an affordable price.