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>AMP Hybrid Client <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>