In Action: Using the iPhone Kit

Creating a web based app for an iPhone or iPad has never been easier.  This article will walk you through the entire process.  This article explains how to deploy the Task Management System ready-made application as an iPhone or iPad web app.  The iPhone interface will allow agents to view their tasks, search tasks, and submit new tasks on the go.  You can request the Task Management ready-made app and customize it to fit your needs.  After reading this article you should be able to deploy any of your own apps using the iPhone kit.

Steps to deploying apps using the iPhone kit:

1.  Download the iPhone kit

First download the iPhone kit.  This kit contains a sample mobile web site that we will customize to hold the ready-made app.  For this example we are going to use only two of the sample web pages included in the kit, all of the others can be deleted:

• index.html – because it contains a menu
• form.html – because it is basic and easy to format for our needs.

2.  Edit the web pages to fit your site

Form.html contains multiple elements that you may want to edit to match your website.  Here is a short list of items to edit:

• The leftnav div tag link address (index.html is fine in this example)
• The rightnav div tag link address (we don't have an "About" page, so we might want to delete this button)
• Empty the content under the textbox list item tag (li class=”textbox”)

Now that Form.html has been formatted to suit our needs we can make three copies and rename each for use in the task management system:

• newtask.html
• mytasks.html
• searchtasks.html

Now we can edit each page and update the information tags to indicate the purpose of each page.  Here is a list of the page information tags.

• The Title Tag
• The description Meta tag
• The graytitle span tag

Open index.html and find the menu items located in the page item unordered list (ul tag, class pageitem).  In the original sample, each menu item contains:

• A hyperlink
• An icon image
• A label
• An arrow image

You can keep all of these items, or change the formatting as needed.  Note that the label must be contained in a span tag with the class name “name” to provide the toggling appearance.

Now we can change the hyperlink addresses to match the pages we created.  Also in this index page is a link to the PC version of this mobile site.  If you have a PC version of this site you can update the address in the left button hyperlink.

Test these HTML pages to make sure the navigation works correctly.

3.  Upload the iPhone style into Caspio Bridge

Another item in the iPhone kit is a Caspio Bridge style saved in xml format.  In the Caspio Bridge Explorer window go to the Styles view.  In the toolbar of the main window click on the Import Style button.

Browse to the iPhone kit and locate the xml style file.  Click Next.  Click the Checkbox to the left of the iPhone style to select it.  Click Finish.  Click Close.

Now you have the iPhone style available to apply to any of your apps.

4.  Apply the Style to your iPhone DataPages

Still in the Styles view of Caspio Bridge find the iPhone style you’ve just downloaded.  Select it and click the Edit button.  Click next and you will see a list of all of the DataPages currently in your account.  We can apply this iPhone style to as many DataPages as needed simultaneously.   In this example we are only going to apply it to the three DataPages in the Task Management – Team Apps folder.

You can sort the DataPages by folder by clicking on the folder column header.  Locate the three DataPages and select them using the checkbox column at the far left.  Click Next, Click Finish and Click Close to apply the Style to all three DataPages.

5.  Adjust the format of the DataPages for the iPhone

There is one other piece of formatting that will help improve the look of your apps on an iPhone or iPad.  Go to the DataPages view and open the Task Management – Team Apps folder.  Select the Add New Task DataPage and click the Edit button to open the DataPage wizard.

Proceed to the Configure Fields screen.  Select the New Section DataPage element located immediately after the Header.  Under Layout Options choose Top as the default Label position.  Click Finish and Click Close.  Repeat this process for the search and details pages of Search All Tasks, as well as the details page of My Tasks.

By default, all of the Deadline fields include a calendar picker tool.  This tool causes an error in the current Safari browser.  Open the Add New Tasks DataPage by clicking the Edit Button.  Proceed to the Configure Fields Page.  In the Field options section, uncheck the calendar popup checkbox.  Do the same for the Deadline fields in the details pages of My Tasks and Search All Tasks.

Also for the two Search and Report DataPages you may want to change the Results Page layout to either List or Grid, as these layouts have separated details links making them easier to accurately select with a touch screen.  Select one of the Search and Report DataPages.  Open the DataPage wizard by clicking the Edit button.  Proceed to the Results Page Layout screen.  List and Grid are the two layouts in the center.  With a Grid layout you can also adjust the number of columns.

6.  Deploy the DataPages

Now that the DataPages have been formatted for the iPhone and iPad you can deploy each and embed it into the corresponding HTML page.  Paste the embed code where the original sample form’s embed code was, between the textbox list item tags (li class=”textbox”).

Testing and Formatting

If you haven’t already, publish your HTML pages to your web server.  You should be able to navigate back and forth between the menu and your various pages.  Log-in to your DataPages and make sure they work as expected.  You can also go back and customize your style.

The Caspio iPhone kit is a quick and cost-effective way to create a web app for the iPhone and iPad.  As you can see, you can set-up a complex system in practically no time at all with only basic knowledge of HTML.