Force.com Contact Apex HTML5 Tutorial

Below is how to create an HTML 5 and Iphone App of the Contact object using Force.com

This tutorial is 2 parts, Part 1: Contact HTML5 App, Part 2: Contact Iphone App

Step 1. Login into your Force.com account

Step 2. Make sure there is some contacts loaded into your contact object.

Step 3. Load the following css and js files into Status->Developer->Static Resources

jquery.mobile-1.0rc2.min.css
jquery.min.js
jquery.mobile-1.0rc2.min.js
style.css

Step 4: Create the following file – Resource.sales file:

var currentContactDetails = new Array();
var currentContact = new Array();

var $j = jQuery.noConflict(); 

$j(document).ready(function() {
    if(window.location.href.indexOf('#') > 0) {
            window.location.href = window.location.href.split("#")[0];
        }
    addPageListeners();
    $j.mobile.showPageLoadingMsg();
    getContacts(function(){
                $j.mobile.hidePageLoadingMsg();
            });
});

function addPageListeners() {
    $j('#addcontact').live('pagebeforeshow', function () {
                    $j("#contactNameTxt").val('');
                });

    $j('#addcontactdetails').live('pagebeforeshow', function () {
                    $j("#contactNameTxt").val('');
                    $j("#contactDepartment").val('');
                    $j("#contactTitle").val('');
                    $j("#contactNumber").val(0);
                    $j("#contactHomeNumber").val(0);
                    $j("#contactEmail").val('');
                    $j("#contactFax").val(0);

                });
}

function getContact(callback) {
    $j('#contactlist').empty();
    SalesKingController.queryContact(function(records, e) { showContact(records, callback) }, {escape:true});
}

function showContact(records, callback) {
    currentContact.length = 0;
    for(var i = 0; i < records.length; i++) { currentContact[records[i].Id] = records[i]; }
    var x = 0;
    $j.each(records,
        function() {
        $j(<li></li>) 
        .attr('id',this.Id)
        .hide()
        .append(this.Name)
        .click(function(e)
        {
           e.preventDefault();
           $j.mobile.showPageLoadingMsg();
           $j('#ContactName').html(currentContact[this.id].Name);                  $j('#ContactDepartment').html(currentContact[this.id].Department);   $j('#ContactTitle').html(currentContact[this.id].Title); $j('#ContactNumber').html('$'+currentContact[this.id].MobilePhone); $j('#ContactHomeNumber').html('$'+currentContact[this.id].HomePhone); $j('#ContactEmail').html('$'+currentContact[this.id].Email); $j('#ContactFax').html('$'+currentContact[this.id].Fax); var onLoadComplete = function() { $j.mobile.hidePageLoadingMsg(); $j.mobile.changePage('#detailpage', {changeHash: true}); } setTimeout(onLoadComplete, 10); }) .appendTo('#contactlist') .show(); x++; }); $j('#contactlist').listview('refresh'); if(callback != null) { callback();} }

Step 3. Create a new Apex application by entering the following URL in your browser window:

https://c.na10.visual.force.com/apex/applicationName

applicationName can be any name eg. ContactApp

Step 4. Copy and paste this code:

<apex:page showHeader=”false” standardStylesheets=”false” cache=”true” controller=”SalesKingController” >
<apex:outputText escape=”false” value=”{!'<!DOCTYPE html>’}”/>
<html>
<head>
<title>SalesKing – Sales Kings HTML5 App</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0;” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />

</head>
<body>
<div style=”height:24px;display:block !important;visibility:visible !important; width:24px”></div>
<!– /IClista –>
<div data-role=”page” id=”home” data-theme=”b”>
<!– /Header –>
<div data-role=”header”>
<a href=’#’ id=”logout” class=’ui-btn-left’ data-icon=’home’ >Home</a>
<h1>Salesforce Sales King App</h1>
</div>
<div data-role=”content”>
<ul id=”contactlist” data-inset=”true” data-role=”listview”
data-theme=”c” data-dividertheme=”b”>
</ul>
</div>
</div>
<div data-role=”page” data-theme=”b” id=”detailpage”>
<div data-role=”header”>
<a href=’#mainpage’ id=”backAlbums” class=’ui-btn-left’ data-icon=’arrow-l’ data-direction=”reverse”>Contacts</a>
<h1>Contacts</h1>
</div>
<div data-role=”content”>
<h1 id=”ContactName”></h1>
<table>
<tr><td>Department:</td><td id=”ContactDepartment”></td></tr>
<tr><td>Title:</td><td id=”ContactTitle”></td></tr>
<tr><td>Mobile Number:</td><td id=”ContactNumber” type=”number”></td></tr>
<tr><td>Home Number:</td><td id=”ContactHomeNumber”></td></tr>
<tr><td>Email:</td><td id=”ContactEmail”></td></tr>
<tr><td>Fax:</td><td id=”ContactFax”></td></tr>
</table>
</div>
</div>

</body>
</html>
</apex:page>

Step 5. Apex will ask if you want to create the new ‘ContactController’. Click Yes to create the Controller. Paste the controller code:

public with sharing class SalesKingController
{

@RemoteAction
public static List<Contact> queryContact()
{
return [SELECT Id, Name, Department, Title, HomePhone, MobilePhone, Fax, Email FROM Contact ORDER BY Name LIMIT 50];
}

}

Will look like below:

Click on a Contact to get the details

Rate this:

Share this:

Like this: