Skip to end of metadata
Go to start of metadata

One of the most common requirements for enterprise apps is the ability to display a list of items and display the detail of the item when clicked. As an enterprise-level framework, Crosslight sports this design naturally by incorporating the master-detail navigation pattern. This page discusses the master-detail pattern in greater detail. To learn more about implementing the master-detail navigation pattern in Crosslight apps, see Understanding Crosslight Navigation Services.

On this page:

Typically, master-detail apps in phone devices displays a list of items in one screen and the item detail in the other, when the item is clicked. This is due to the limited screen estate found in phones. As tablet devices have larger screens, developers buliding their apps using Crosslight will be able to take advantage of the master-detail pattern easily. To use the master-detail app, Crosslight has provided a powerful Master-Detail Template in the Crosslight Project Wizard that integrates nicely with Visual Studio 2012 upwards. You can find out more about it here.

Grid / Collection

The Grid / Collection master-detail pattern presents the items in the form of grids, and are currently available on iPads and Windows Store tablets. On iPads, Crosslight has fully optimized this pattern by incorporating the UIPopoverController when the item is clicked. The UIPopoverController is designed smart enough to understand the position in which to show the popups. When the popover controller appears, the background view is dimmed, so as to give a modal impression. When the view outside the popover controller is clicked, it will be dismissed. On Windows Store tablets, the Grid view is very much aligned with the live tiles pattern that Microsoft introduced with the emergence of Windows 8. When the item is clicked, a new page will be shown with the item detail. This allows for a very immersive experience when using the master-detail pattern on Windows Store devices. To learn more, see Creating iOS App with Different View for iPhone and iPad and Inventory Tracker sample. See the following illustrations.

 

Presentation of items in Grid / Collection pattern,

When an item is selected,

Split

Since tablets have greater screen sizes, it makes more sense to split the screen into a third for displaying the item list and two-thirds for displaying the item detail. This pattern is the default implementation found in most apps that run on tablet devices. For example, the Mail app found on iPad, and the Settings app on Android tablets. When the items on the left are clicked, it will be displayed on the right hand side of the screen. See the following illlustration for greater clarity. To learn more, see Designing for Tablets page.

Advanced Master Detail

Aside from the two typical master-detail pattern, Crosslight also provides a more advanced master detail pattern in which, where the left items are clicked, it will navigate to itself to a second-level list, and when further clicked, will display the detail of the item on the right. This is useful for apps with two-level items, and it is only available on Split view. This allows for a more advanced detail view that is bulit right on to the iOS and Android platforms. On a side note, this pattern is only available on tablet devices. When translated on phone devices, the list will simply have three-level navigation, navigating from the first list, then the sub-list, then the item detail. To learn more, see  iOS Advanced Master Detail as well as Android Advanced Master Detail UI view components. The following illustrates this more clearly.

 

To learn more about implementing the master-detail navigation pattern in Crosslight apps, see Understanding Crosslight Navigation Services.

Samples

For samples that demonstrates the Master-Detail pattern in action, check out the Inventory Tracker sample (with Master-Detail support). It is available in our Git Repository here: http://git.intersoftsolutions.com/projects/CROS/repos/samples/browse/MyInventory_MasterDetail. Run this sample on a tablet device (Android tablet, iPad or Windows Tablet) to see it in action.