Chat...

Experimenting with touch devices like the iPad

We enjoy working on research projects at FinancialForce.com. When we were offered the chance to experiment on a mobile app, we were keen to take part.

We decided early on that our development strategy could go a couple of ways. We could either write a native iOS application, or we could write a web-app using our expertise of web and Salesforce technologies (VisualForce, Apex, CSS and Javascript). We decided to take the web-app route.

At the kick off meeting, we decided to start with a viewer application for the billing side of our application, and more specifically, sales invoices.

Screen mockups were generated using Adobe Fireworks, and as Chatter Mobile had already been released, we decided to have a mix of the iOS UX guidelines and the great-looking Chatter Mobile screens for iPad.

As we wanted the web-app to resemble the native Chatter Mobile iPad app, we looked into the new functionality that webkit brings, such as transitions and box layouts. After a few days of VisualForce development, we came up with an easy and quick way to develop a layout framework.

So... how far did we get? We included four objects, Accounts, Tasks, Opportunities and Sales Invoices, each with a limited view of the data.

We hope you have as much fun as we did.

Download the application code here: https://code.google.com/p/ffdcmobile/


Architecture Overview

VisualForce pages can exist in 1 of a possible 3 boxes within the application.

The placement of the pages is currently:

  • Box 1 - Object LIST pages
  • Box 2 - Object VIEW pages
  • Box 3 - Object EDIT pages

Events within these pages will scroll the corresponding page into view using CSS transitions.

 

Adding a new Object to the Navigation

Using the following code examples you can see how easy it is to add further objects (Contract in this case) to use within the iPad application.

1: Create an Apex class called 'ContractsClass'

public with sharing class ContractsClass { public List<Contract> getContracts() { List<Contract> contracts; contracts = [Select c.Id, c.ContractNumber From Contract c limit 251]; return contracts; } }

2: Create a VisualForce page called 'contractview'

<apex:page sidebar="false" showHeader="false" standardStylesheets="false" standardController="Contract"> <h2> <span class="button back left"> <span class="right">List</span> </span> Contract View </h2> <div class="content stretchBox" style="position:relative;top:0px;"> <div id="viewScroller"> <div id="contractDetail" class="section"> <h3>Contract Detail</h3> <div class="headerArrow"></div> <div class="fields"> <div class="row"> <div class="label">Contract Number</div> <div class="field"> <apex:outputField value=”{!Contract.ContractNumber}”/> </div> </div> <div class="row"> <div class="label">Term</div> <div class="field"> <apex:outputField value=”{!Contract.ContractTerm}”/> </div> </div> </div> </div> </div> </div> </apex:page>

3: Create a VisualForce page called 'contractist'

<apex:page sidebar="false" showHeader="false" standardStylesheets="false" controller="ContractsClass"> <h2>Contracts</h2> <table class="list fixed"> <colgroup> <col width=""></col> <col width="70px"></col> </colgroup> <thead> <tr> <th class="alignLeft">Name</th> <th class="alignCenter"> </th> </tr> </thead> </table> <div class="content stretchBox"> <div id="tableScroller" class="stretchBox"> <table class="list fixed"> <colgroup> <col width=""></col> <col width="70px"></col> </colgroup> <tbody> <apex:repeat id="contractList" value="{!contracts}" var="c"> <tr> <td class="alignLeft">{!c.ContractNumber}</td> <td class="alignCenter"> <span class="link"></span> <a href="{!$Page.contractview}?id={!c.Id}" class="link hidden"></a> </td> </tr> </apex:repeat> </tbody> </table> </div> </div> </apex:page>

4: Add a link from within the Navigation of the home VisualForce page.

Within the tag:-

<ul class="navigationList">

Add a list item with the following markup:-

<li> <span class="link"> Contracts </span> <span class="indicator"> </span> </li>

Simply navigate to the Home page on your iPad and you will be presented with your extra Object.

Technologies and Tools used

The following tools and technologies were used during development.

A few tips and tricks