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

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

</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

Advertisements

2 Comments on “Force.com Contact Apex HTML5 Tutorial

  1. Pingback: Force.com Contact Apex HTML5 Iphone App « Thys Michels IBM WebSphere & Salesforce Blog

  2. 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 Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: