Building Master Detail Mobile Applications Using the List, FormView and ControlBar Controls


Learn how to build a Master Detail using the List and FormView Controls in a UX Component. The List and FormView controls allow you to create a light-weight application that can be deployed in either the web or mobile environment. In this tutorial, we demonstrate creating a Master-Detail mobile application that takes advantage of several features, including Editors and the ControlBar, to create an easy-to-use responsive interface.


In this video tutorial, we show how implement a Master-Detail application using the FormView control. The app allows users to edit data from the Customers and Orders table in the sample Northwind database. This is a classic Master-Detail form: Each customer has multiple orders. The UX component uses two Lists joined in a parent-child relationship. The parent List displays data from the Customer table and the child List display the related orders from the Orders table.

Each List has a Detail View, but in both cases, the Detail View is implemented using the FormView control.

Once we are done building the basic functionality, we 'mobilize' the app by wrapping sections of the component in PanelCards and add a ControlBar to provide the ability to navigate the application.

To follow along with this tutorial, you will need a connection string to the Northwind database. Alpha Anywhere ships with a pre-defined connection string to the Northwind database called 'AADemo-Northwind'.

If the 'AADemo-Northwind' connection string is not listed in the Connection Strings dialog, you can create one by clicking the Create 'AADemo-Northwind' demo connection string link at the bottom of the connection string dialog:

This tutorial was built for Alpha Anywhere v4.3 or newer.


Building a Mobile Master-Detail Form using The List, FormView and ControlBar Controls

To learn how to build a Master-Detail mobile application using the List, FormView, and ControlBar controls, watch the video below.


Download the Components Used in the Tutorial 

If you'd prefer to follow along, you can Download the Components used in the videos. These components can be used to follow along with the tutorial or as a starting point for your own Master-Detail application.

When you run the components in Working or Live Preview, you may see the following error:

The components in the download require two connection strings, one named "northwind" and the other named "mysql_northwind". The easiest way to create these connection strings is to copy the 'AADemo-Northwind' connection string. The 'AADemo-Northwind' connection is a connection string that connects to the Northwind MS Access database that ships with Alpha Anywhere.

  • Creating the 'Northwind' and 'mysql_northwind' Connection Strings for the Downloaded Components 

    1. Open the AlphaDAO Connections dialog. This can be done from the Web Projects Control Panel. Under the Edit menu, select Manage connection strings > AlphaDAO Connection strings.

    2. Select the AADemo-Northwind connection string. If the connection string is not listed, click the Create 'AADemo-Northwind' demo connection string to create it. With the AADemo-Northwind connection string selected, click the Copy button.

    3. Next, click the New button to create a new connection string. Name the connection string Northwind and paste the copied 'AADemo-Northwind' connection string in the Connection String text box. Click OK to save the connection string.

    4. Repeat the previous 2 steps to create a connection string named mysql_northwind.

See Also