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 Appery.io 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!

2 thoughts on “Try New Mobile App Example: Clickable List (Master-detail)

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s