Looking for something that's not here? Let us know: support@tiggzi.com

Building Clickable List Mobile App with HTML5 Local Storage

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. If this is your first time creating a mobile app in Tiggr, we recommend first to try the Building Twitter Search App, Building Weather App or Building Hello World HTML5 Mobile App With Local Storage tutorials.

The app will look like this (first page): 

Second page (route details):



We are going to be using REST services from San Francisco MUNI (About SF Muni). On the first screen we will display a list of all lines. Clicking on a parituclar line will open up a second screen showing all stops for the selected line. 

Creating new mobile app

  1. To start, we are going to create a new app. From Apps tab, click Start Now button
  2. Under App Builder, click Go
  3. Under Mobile App, click Start Now 
  4. Select Blank Mobile App app and click Next Step button
  5. Enter name for the app and click Create. 

Building the first screen

Once the editor loads, you will see a blank screen in the middle of the screen. 
  1. Let's rename the page. Head to Properties (right-hand side) and under Common rename the page to: Routes. 
  2. Staying in Properties, uncheck Show Footer property. 
  3. Next, double click on Caption label in phone header and change the label to Routes. The result should look like this:


    We are ready to build the UI.

  4. We are going to use List component to display the list of all routes. From Palette > Mobile, drag and drop the List component.
  5. The List component has 3 items show by default. As we are going to load the values from a service, we only need one list entry. In Properties, set the number of Items to 1. 
  6. Then also uncheck Numbered
  7. One more thing to do is delete the default label (Item 1). The result should look like this: 



  8. Let's test the UI, to get an idea how it's going to look in browser. Click the Test button to open the app in browser. If you make the app public (Test > Public), you can also test the app on your mobile device. 
  9. Let's now insert two Label component inside the list entry. One label will be used to display the route name, the other label will contain the station id. Drag and drop two Label components inside the list entry. The result should look like this: 


  10. Select the first label and in properties delete its default text. Then, rename the component to stationName. 
  11. For the second label, delete its default text, rename the component to tag. And also uncheck Visible property. This component will hold the id we will be passing to the next page and doesn't need to be visible on the page. 
Now that we are done with first page UI, let's work on creating the REST service. 

Defining REST service

  1. Open Palette > Services. Drag and drop REST Service component into the screen. 
  2. You will be asked to select a service. As we don't have a service yet, click Add new to load the service editor. The service editor should look like this: 


  3. First, rename the service to RoutesService. 
  4. Enter the following service URL: http://webservices.nextbus.com/service/publicXMLFeed
  5. For Data Type, select xml. 
  6. Check Tiggr Proxy. This is needed to that the app can be invoked from any domain. Learn more about Tiggr Proxy. 
  7. Now let's work on defining service input parameters. Open Input Parameters panel. 
  8. We are going to create two input parameters and set default values. Enter command into the input field and click Add button. Input parameter will be added. Now set its default value to routeList. This parameter tells the service which action we want to invoke. 
  9. Create a second input parameter called a (for agency) and set its default value to sf-muni. This parameters tells the service to load information for SF Muni. The result should look like this: 


  10. Let's now test the service. Click Test Connection button. Then click Test button.  The result should look like this:

  11. The next step is to define service response parameters and we can it automatically. Click Populate Response Structure button on the same screen. This will automatically create the service response. 
  12. Click Close, the editor will switch to Response Parameters panel that looks like this (after expanding): 


  13. We are done with this service. Click Save and Close. Next we need to map the service to the UI. 

Mapping service to UI

  1. We should be back at the screen editor. With the service selected (on the left-hand side), head to properties and click Change... button for Input Parameters. Input mapping will be shown:


    We are using default values here so we don't need to map anything from the UI to the service. 
  2. Click on Response Mapping button 
  3. Expand body > route and set the following mappings:
    1. route - mobilelistitemX (Attribute should be set to none)
    2. @tag - tag/Text
    3. @title - routeName/Text
      The result should look like this:



  4. Click Save to close output mapping. 
We are done with service. One last step on this screen is to invoke the service on page load and define a click event to go to another page (not created yet). 

Invoking the service

  1. We want to invoke the service on screen load. Select the screen (you may click outside the phone frame). Open Events tab. 
  2. Select Add Event, add Load event
  3. Select Add Action > Invoke Service
  4. Select rest service 1
  5. Click OK.
  6. We are ready to test this screen. Click Test button. A browser window will open and should look like this: 


Making the list clickable, saving route id in Local Storage

  1. Let's quickly create a second mobile screen as we are going to need it in these steps. We won't build the UI just yet, just create the screen. 
  2. To create another mobile page, open Project > Create new > Screen
  3. For screen name, enter: Details. Click OK
  4. In screen properties, uncheck Show Footer
  5. Also update screen header label to say Details
  6. Let's go back, open Routes screen. 
  7. Select the List component. If you are not sure whether it was selected, you can use the Outline view to select. Also, in Properties, the component id should be mobilelistitemX
  8. Open Events tab
  9. Select Add Event > Click
  10. Then select Add Action > Set Local Storage Variable
    1. For Variable Name enter: locTag 
    2. Check Bind to component
    3. Target component select tag
    4. Property name select Text
      On each item list click, we are going to save the route tag id in Local Storage
    5. Click OK
  11. We need to add one more event to the same component, to navigate to the second page. 
  12. Select Add Action > Navigate to Page
  13. From the list select Details and click OK. 
We are now ready to design the second screen. 

Designing the second screen to display route details

  1. Open Details screen
  2. Open Palette > Mobile and drag and drop a Grid component into the screen. The Grid component has two columns by default. In Properties, set the number of Columns to 1. 
  3. Inside the single grid column, insert a Label component. 
  4. Delete its default text
  5. In Properties, rename the component to stationName.
  6. Let's also quickly add a back button, so we can easily go to our first page. 
  7. Drag and drop a Button inside the header. 
  8. Set the label to Back.  
  9. With the button selected, open Events tab.
  10. Select Add Event > Click. 
  11. Select Add Action > Navigate To Page
  12. Select Routes screen and click OK. The result should look like this:


Adding a service to the screen for fetching route details

  1. Open Palette > Services, drag and drop REST Services component into the screen. 
  2. Click Add new to open the service editor.
  3. For service name enter DetailsService.
  4. For URL enter: http://webservices.nextbus.com/service/publicXMLFeed
  5. Set Data Type to xml
  6. Check Tiggr Proxy. 
  7. Now we are ready to define service request parameters. Add the following request parameters and default values:
    1. command, default value: routeConfig
    2. a, default value: sf-muni
    3. r, keep the default value blank. This is the route id which is going to be passed from the first page. 
  8. Let's test the service. Click Test button
  9. A window will open where two values will be already set to their default values (command and a). The only value we need to provide is r (station tag). To get a test value, you can always open the other service, run a test and pick any value from the result. Let's enter the value of 14. 
  10. Click Test, the result should look like this:



  11. For quickly creating the service response structure, click Populate Response Structure button. 
  12. Click Close. You will see the service response structure. We are now ready to map the service to UI. 

Mapping service to UI

When we closed the service editor, we are back at the screen editor. 
  1. Select the service (left-hand side) and click on Change... button for Input Parameters in Properties. 
  2. command and a are set to default values. The only value we need to set is r and it has to come from Local Storage. 
  3. To read the value from Local Storage, map locTag to r value. The result should look like this: 


  4. Now lets map the output. Click Response Mapping button
  5. Expand body > route > stop
    1. Map stop to mobilegrid1 (Attribute should be set to none)
    2. Map @title to stationName (Attribute will be set to Text)
      The result should look like this: 


  6. Click Save.
One last step is to invoke the service. 

Invoking the service

  1. Select the screen (you may click outside the phone frame)
  2. Open Events tab
  3. Select Add Event > Page Show
  4. From Load event, select Add Action > Invoke Service. 
  5. Select rest service2. 
  6. Click OK

We are ready to test the service. Click the Test button, the route list will be loaded. You can now click on any item in the list to load route details. 

The result should look like this: 

First page:

Second page:

Summary

Although a simple example, it demonstrates how to create clickable lists where a dynamic id associated with each record is passed to the service that's invoked on the next screen. This approach can be applied to any other app where data from one screen needs to be passed to another and used to invoke a service. 

What's next?