Building Master Detail Mobile Applications Using the List, FormView and ControlBar Controls
Description
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.
Important Notice for Community Edition Users
This tutorial was built using the full Alpha Anywhere Development Environment. Portions of this tutorial may not apply due to features that are not available in Community Edition. Community Edition users may encounter screens that don't match their environment due to differences between the two development environments.
We strongly recommend starting with the tutorials in the Alpha Software Learning Center to start learning Alpha Anywhere.
Overview
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:
Tutorial
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
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.
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.
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.
Repeat the previous 2 steps to create a connection string named mysql_northwind.
See Also