Contact Apex HTML5 Tutorial

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

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

Step 1. Login into your 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.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];

function addPageListeners() {
    $j('#addcontact').live('pagebeforeshow', function () {

    $j('#addcontactdetails').live('pagebeforeshow', function () {


function getContact(callback) {
    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;
        function() {
           $j('#ContactName').html(currentContact[].Name);                  $j('#ContactDepartment').html(currentContact[].Department);   $j('#ContactTitle').html(currentContact[].Title); $j('#ContactNumber').html('$'+currentContact[].MobilePhone); $j('#ContactHomeNumber').html('$'+currentContact[].HomePhone); $j('#ContactEmail').html('$'+currentContact[].Email); $j('#ContactFax').html('$'+currentContact[].Fax); var onLoadComplete = function() { $; $'#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:

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>’}”/>
<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” />

<link rel=”stylesheet” href=”{!URLFOR($Resource.cloudtunes_jQuery, ‘’)}” />
<script type=”text/javascript” src=”{!URLFOR($Resource.cloudtunes_jQuery, ‘jquery.min.js’)}” />
<script type=”text/javascript” src=”{!URLFOR($Resource.cloudtunes_jQuery, ‘’)}” />
<script type=”text/javascript” src=”{!URLFOR($Resource.sales)}” />
<link rel=”stylesheet” href=”{!URLFOR($, ‘style.css’)}” />
<link rel=”stylesheet” href=”{!URLFOR($Resource.darkblue, ‘dark_blue.css’)}” />
<script type=”text/javascript” src=”{!URLFOR($Resource.inmobile, ‘in-mobile.js’)}” />

<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 data-role=”content”>
<ul id=”contactlist” data-inset=”true” data-role=”listview”
data-theme=”c” data-dividertheme=”b”>
<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>
<div data-role=”content”>
<h1 id=”ContactName”></h1>
<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>


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

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