Try New Mobile App Example: Clickable List (Master-detail)

A list is presumably one of the most common UI components used in mobile apps today. Many apps show you a list of items, you click on a particular item and navigate to the details page. In the developer world this example is usually called master-detail. Not surprisingly many developers are building their apps with a clickable list feature. Creating a clickable list is simple but to make it even simpler, we published an example app. The example loads a list of items from a database. Once you click on an item, you navigate to a second page and the details for that item are displayed.

How to get this app? When you create a new app, open the From example tab and select the Clickable List Example:

Screen Shot 2015-06-18 at 3.54.25 PM
Creating new app based example

Your new app now contains the sample app. As the app uses a database, there is a very minimal setup that you need to do. You need to create a sample database and set the database API key in the app. It’s 5 steps that you find here.

This is an example of the database:

Screen Shot 2015-06-16 at 4.21.26 PM
Sample database

This is how the app looks when running. The first page shows the list:

Item list
Item list

the second page shows the details:

Item details
Item details

it’s also very easy to learn how this app is built inside the App Builder:

Screen Shot 2015-06-18 at 4.13.46 PM
Mapping data from local storage to page

Building an app with a clickable list is simple, but with the out-of-the-box example, it’s even simpler. Give it a try!

Published by

2 responses to “Try New Mobile App Example: Clickable List (Master-detail)”

  1. Hello, Can you please explain to me on how to achieve this in using angular and ionic?

    1. We are working on such example for Ionic/AngularJS.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.