The index.html file containing JavaScript that makes use of the
Contact Database API functionality is listed below.
<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<title>Contact example</title>
<link rel="x-antenna-managed-webapp-descriptor" href="webapp-descriptor.xml" />
<script type="text/javascript">
function printText(str) {
var d = document.getElementById('text-box');
d.appendChild(document.createTextNode(str));
d.appendChild(document.createElement('br'));
d.scrollTop = d.scrollHeight;
};
function saveContact() {
var name = document.getElementById('name2').value;
var Fname = document.getElementById('Fname').value;
var email = document.getElementById('email').value;
var telH = document.getElementById('telH').value;
var telW = document.getElementById('telW').value;
var newContact = {
readOnly: true,
name: [name],
honorificPrefix: ["honorificPrefix"],
givenName: [name],
// {String[]} Only the first item is supported on Android/iOS.
additionalName: ["additionalName"],
// {String[]} Only the first item is supported on Android/iOS.
familyName: [Fname],
// {String[]} Only the first item is supported on Android/iOS.
honorificSuffix: ["honorificSuffix"],
nickname: ["nickname"],
// {String[]} Only the first item is supported on Android/iOS.
email: [
{value: email, type: "work"},
{value: '[email protected]', type: "home"}
], // {ContactField[]}
//photo,
// {String[]} Data URI, only the first item is supported on Android/iOS.
// Also, on iOS thumbnails are returned for performance reasons.
url: [
{value: 'http/google.com', type: "work"},
{value: 'http://onet.pl', type: "home"}
], // {ContactField[]}
//categories,
// {String[]} Not Supported
adr: [
{type: "work", streetAddress: "streetAddress",
postalCode: "11-222" },
{type: "home", streetAddress: "streetAddress2",
postalCode: "11-333" }
], // {ContactAddress[]}
tel: [
{type: "work", value: telW},
{type: "home", value: telH}
], // {ContactTelField[]} Carrier name is not supported on iOS.
// {String[]} Only the first item is supported on Android/iOS.
org: ["Organization"],
// {String[]} Only the first item is supported on Android/iOS.
jobTitle: ["jobTitle"]
//sex,
// {String} Not supported (no corresponding native field).
//genderIdentity,
// {String} Not supported (no corresponding native field).
};
var callbacks = {
onSuccess: function (contacts) {
printText('Contacts: ');
printText('success!');
},
onFailure: function (err) {
printText("save onFailure called!");
printText(err.code);
printText(err.description);
}
};
var contacts = launchbox.Contacts;
contacts.save(newContact, callbacks);
};
function removeContact() {
var options = {
filterValue: "job",
filterOp: "contains",
filterBy: ["jobTitle"],
sortBy: "givenName",
sortOrder: "ascending",
filterLimit: 100
};
var removeCallbacks = {
onSuccess: function (contact) {
printText("remove onSuccess called!");
},
onFailure: function () {
printText("remove onFailure called!");
}
};
var findCallbacks = {
onSuccess: function (contact) {
window.launchbox.Contacts.remove(contact[0], removeCallbacks);
},
onFailure: function () {
printText("find onFailure called!");
}
};
var contacts = launchbox.Contacts;
contacts.find(options, findCallbacks);
};
function clearText() {
var d = document.getElementById('text-box');
d.innerHTML = "";
d.scrollTop = d.scrollHeight;
};
function clearOutput() {
var d = document.getElementById("text-box");
d.innerHTML = "";
};
function printContacts(contacts) {
printText('--------------------');
for (i = 0; i < contacts.length; i++) {
printText('Contact #' + i);
printText('Name ');
if (contacts[i].name) {
printText(contacts[i].name);
} else {
printText(' - name not defined');
}
printText('Phone numbers ');
if (contacts[i].tel) {
for (k = 0; k < contacts[i].tel.length; k++) {
printText(contacts[i].tel[k].type + ' - ' +
contacts[i].tel[k].value);
document.createElement('br');
}
} else {
printText(' - no phone numbers');
}
printText('E-mails ');
if (contacts[i].email) {
for (k = 0; k < contacts[i].email.length; k++) {
printText(contacts[i].email[k].type + ' - ' +
contacts[i].email[k].value);
}
} else {
printText(' - no emails');
}
}
};
function findContact() {
var options = {
filterValue: "jobTitle",
filterOp: "contains",
filterBy: ["jobTitle"],
sortBy: "givenName",
sortOrder: "ascending",
filterLimit: 100
};
var callbacks = {
onSuccess: function (contact) {
printText("find onSuccess called!");
printContacts(contact);
},
onFailure: function () {
printText("find onFailure called!");
}
};
var contacts = launchbox.Contacts;
contacts.find(options, callbacks);
};
</script>
</head>
<body>
<header>
<h3><span>Contacts API usage example</span>
</h3>
</header>
<p>
<table border="0">
<tr>
<td>Name:</td>
<td><input type="text" name="name2" id="name2" size="38"
maxlength="100" value="testName"></td>
</tr>
<tr>
<td>Family Name:</td>
<td><input type="text" name="Fname" id="Fname" size="38"
maxlength="100" value="FamilyName"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" id="email" size="38"
maxlength="100" value="[email protected]"></td>
</tr>
<tr>
<td>Home Tel:</td>
<td><input type="text" name="telH" id="telH" size="38"
maxlength="100" value="123456789"></td>
</tr>
<tr>
<td>Work Tel:</td>
<td><input type="text" name="telW" id="telW" size="38"
maxlength="100" value="987654321"></td>
</tr>
</table>
</p>
<input type="button" onclick="saveContact();" value="Add new Contact"/>
<input type="button" onclick="findContact();" value="Find Contact"/>
<input type="button" onclick="removeContact();" value="Remove Contact"/>
<input type="button" onclick="clearText();" value="Clear text"/>
<div id="text-box"></div>
</body>
</html>The contents of the cache manifest file called manifest.appcache for
this application are listed below:
CACHE MANIFEST CACHE: index.html NETWORK: *
The webapp-descriptor.xml file for this application is defined in the
following way:
<?xml version="1.0" encoding="UTF-8"?>
<webapp-descriptor xmlns="http://www.pega.com/application-hosting/
web-app-descriptor/2.0">
<id>com.pega.sample.Contacts</id>
<version>1.0.0</version>
<name>Contacts API usage example</name>
</webapp-descriptor>