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.

iPhone_app_1

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,  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 labels and 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.

iPhone_app_2

3.  Upload the iPhone style into Caspio Bridge

  1. Navigate to the main menu bar, click Tools, and click Import.
  2. Browse for the iPhone kit and locate the xml style file. Click Next.
  3. Click the checkbox to the left of the iPhone style to select it. Click Import.

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

4.  Apply the Style to your iPhone DataPages

  1. Navigate to the Styles listing in the All Assets app and find the iPhone style you’ve just downloaded. Select it and click Edit.
  2. Go to the Apply Style to DataPages section. You will see a list of all of the DataPages currently in your account. You can apply this iPhone style to as many DataPages as needed simultaneously. In this example, apply it to the three DataPages in the Task Management app TM – Members folder.
  3. You can sort the DataPages by name, folder, style, or used in app by clicking on the column header. Locate the three DataPages and select them using the checkbox column at the far left. Click Save 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.

  1. Navigate to the DataPages listing in the Task Management app. Select the Add New Task DataPage and click Edit to open the DataPage wizard.
  2. Proceed to the Configure Fields screen. On the left side of the screen, select the DataPage element, Section 1.
  3. Under Layout Options, choose Top as the default Label position. Click Finish.
  4. Repeat this process for two other DataPages in the app: the search and details pages of Search All Tasks, as well as the details page of My Open Tasks.

Using_the_iphone_kit_1

By default, all of the Deadline fields include a calendar picker tool.  This tool causes an error in the current Safari browser.  In this section, you configure this field in the DataPages to bypass the error.

Open the Add New Tasks DataPage by clicking Edit. Proceed to the Configure Fields Page. In the Field options section, select the Deadline field and uncheck the calendar popup checkbox. Perform this step for the Deadline fields in the details pages of My Open Tasks and Search All Tasks.

Using_the_iphone_kit_3

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 Edit.  On the DataPage Type 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.

iPhone_app_3

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.