Building a Clickable List App with HTML5 Local Storage

What are we going to build

In this tutorial we are going to show you how to build a mobile app with a clickable list (master-detail). Every item in the list has a unique id which on click will be passed to the next page and used in another service. We are going to be using REST services from San Francisco MUNI (about SF Muni). On the first page we will display a list of all lines. Clicking on a partuclar line will open up a second page showing all stops for the selected line. The app will look like this:

First page shows routes list:

Second page shows details for a selected route:

Before you start

Tutorial level: completed at least one app from Beginner tutorial section.

Creating a new app

Create a new app in Tiggzi app builder. From Apps page, enter app name (use any name you want) and click Create. Once the builder loads, you should see the following:

Creating the first page (station list)

On the first page we are going to display the list of all SF Muni stations so it’s going to be pretty simple. We are going to use a List component.

1. Open startScreen
2. Change the Caption in the header to any text you want.
3. Drag and drop the List component.
4. As we are going to bind the list to a service, we just need one time. With the list selected (use breadcrumbs to select it), change the number of Items to: 1 in Properties.
   
5. Instead of using the default label, drag and insert a Label component inside the list
   
6. Change the label name to: routeName. This label will display the station name. We also need to save the route id so that we can pass it to the next page and display the route details.
7. For the route id, drag and drop and insert another Label component inside the list:
   
8. Rename the second label to: tagId. This is the id of the route.
9. As we don’t want to actually display the list to the end user, with the label selected, uncheck Visible in properties. We are basically creating a hidden field.
   
10. If you would like, you can test the page in the browser by clicking the Test button.

Now that we are done with the first page, next we are going to work on the first REST service.

Creating a REST service (to get all routes)

1. From Projects view, Create New > Service. For service name enter: RoutesService.
2. Keep REST Service selected and click Create Service button. The service editor will be loaded.
3. For the URL enter: http://webservices.nextbus.com/service/publicXMLFeed
4. For Data Type, set to: xml
5. Check Use Tiggzi Proxy
   
6. Open Request tab
7. Add two request parameters and their default values:
   1. command = routeList
   2. a = sf-muni
      
8. Let’s now test the service. Open Test tab
9. Click Test button. The service response (in XML format) should be displayed:
   
10. Based on this test XML response, we can create the service response. Click Automatically Create Service Response button
11. Open Response tab. You should see the service response that was created automatically
    
12. Click Save.

Now that we have the service defined, let’s add the service to the page and bind it to the page.

Binding the service to the page

1. Open startScreen
2. Switch to Data view
3. Select Service from the first list. RoutesService will be automatically selected in the second list.
4. Click add. We just added the service to the page. Next is to bind (map) the service to the page.
5. Click Edit Mapping button
6. Request will open first. We don’t need to map anything as all input values are the default values set when we defined the service.
7. Open Response tab
8. Create the following mappings:
   
9. Save

Now we just need to invoke the service.

Invoking the routes service

1. Switch to Design tab
2. Open Events tab
3. For Component list, select startScreen.
4. For Event select Load (should be selected automatically)
5. For Action, select Invoke service, select restservice1
6. Save by clicking Add event button. The result will look like this:
   
7. Go ahead and test the app in the browser. The result will look like this:
   

As you can see, the tagId value is rendered into the page but not visible. We are going to use it very soon.

Creating details page

1. Create a new page, Project view > Create New > Page
2. For page name enter: details. Click Create Page
3. Build UI that looks like this:
   
   Back button was added from header Properties
   There is a Grid component (1 row/cell) with a Label inside it
   Rename the label component to: stationName
4. Save

Adding navigation

Let’s quickly update the first page so that we can navigate to the second page when an item is clicked.

1. Open startScreen
2. Select the list item (not the label):
   
3. Open Events tab
4. You should have mobilelistitemx_x, and Click event selected (if not, select them).
5. For Action, select: Set local storage variable.
   1. Variable name: _tagId
   2. Bind to component: check
   3. Target component: tagId (this is the hidden element in each list item)
   4. Property name: Text
6. Click to add this event.
7. Select the list item again, and on Click event, add Navigate to Page action (going to details page)
   
8. Save.

Creating REST details service

1. Create a new REST service called: RouteDetails
2. For URL enter: http://webservices.nextbus.com/service/publicXMLFeed
3. Set Data Type to: xml
4. Check Use Tiggzi Proxy
5. Open Request tab, and add three parameters:
   1. command = routeConfig
   2. a = sf-muni
   3. r (no default value). This is the route id which is going to be passed from the first page.
      
6. Open Test tab
7. We can still test the service by entering a valid route id. Enter 14 for r and click Test
8. Once the response is shown, click Automatically Create Service Response
9. Go to Response tab to see that response was created:
   
10. Save.

Adding the details service to the page

The details service will be invoked on the second page and it needs to read the id for the route we are interested in from local storage.

1. Open details page, switch to Data view
2. Add the service to the page, select Service > RouteDetails, click Add
3. Open Edit Mappings
4. For input, we want to get the value for r from local storage:
   
5. Save
6. Open Response tab, to map the output
7. Create the following mappings:
   
8. Save.

We are almost done. We just need to invoke the service when we navigate to the second page.

Invoking the details service

1. Open details page
2. Open Events page
3. Add Load event to the page, for Action select Invoke service and select restservice1. Click to save the event:
   
4. Save

Testing the app

Go ahead and test the app. The first page looks like this:

Clicking on M-Ocean View route for example will show the following: