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


  1. henry says:

    I am exicited about HTML5 but Flash can do all these things html5 can do in a better way.Creating slideshow in HTML5! wow! what, flash did that 10 years ago! It is very easy to create a flash animation, for example a ball bouncing in flash professional in less than am minute. Javascript is a mess when compared to AS3.

Leave a Comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s