Mobile Dashboard Server Application Patterns and Interactive Features

Prepared by The ComponentArt R&D Team Last Update: April 5, 2012 Version 1.1

ComponentArt White Paper

Table of Contents
OVERVIEW ...................................................................................................................................................... 3 APPLICATION PATTERNS .................................................................................................................................. 4 SCREEN DRIVERS ............................................................................................................................................................4 TimeNavigator ......................................................................................................................................................4 Dropdown .............................................................................................................................................................4 TreeView, DropdownTree .....................................................................................................................................5 Cascading Dropdowns...........................................................................................................................................5 Button, Checkbox, Radio .......................................................................................................................................5 MULTI-SCREEN NAVIGATION ............................................................................................................................................6 Independent Screen View Models ......................................................................................................................... 6 Shared Screen View Models ..................................................................................................................................6 INTERACTIVE FEATURES................................................................................................................................... 7 POPUPS........................................................................................................................................................................7 XyChart x-coordinate Popup .................................................................................................................................7 XyChart Data Point Popup ....................................................................................................................................7 DRILL-DOWNS ...............................................................................................................................................................8 GridView Item Drill-down ......................................................................................................................................8 PieChart Label Drill-down .....................................................................................................................................8 Legend Item Drill-down .........................................................................................................................................8 Map Item Template Drill-down .............................................................................................................................9 XyChart Annotation Drill-down .............................................................................................................................9 SCROLLING ....................................................................................................................................................................9 GridView Horizontal and Vertical Scrolling ...........................................................................................................9 General Scrollability With ScrollViewer ...............................................................................................................10

ComponentArt MDS Application Patterns and Interactive Features Prepared by the ComponentArt R&D Team, Version 1.1

Page 2

ComponentArt White Paper

Overview
ComponentArt Mobile Dashboard Server (MDS) enables the development of XAML-based MVVM applications which can convert their presentation to HTML5 at runtime. While this technology supports a wide variety of application scenarios, its primary purpose is to deliver rich Business Intelligence dashboards to any mobile device. The goal of this document is to outline the exact list of application patterns and interactive features that should be easy to implement based on ComponentArts source code examples and product documentation. All of these scenarios will be supported by ComponentArts technical support team. If your application requirements fall outside of the scope of standard supported features, please note that the MDS technology might still be capable of covering your desired feature set with some involvement by ComponentArts Professional Services group. Please contact us for further information. Summary of all supported application patterns and interactive features is included in the table below: Application Patterns Screen Drivers TimeNavigator Dropdown TreeView, DropdownTree Cascading Dropdowns Simple Controls (Button, Checkbox, Radio) Multi-screen Navigation Independent screen view models Shared screen view models Interactive Features Popups XYChart x-coordinate popup XYChart data point popup Drill-downs GridView Item Drill-down PieChart Label Drill-down Legend Item Drill-down Map Item Template Drill-down XyChart Annotation Drill-down Scrolling GridView horizontal and vertical scrolling General scrollability with ScrollViewer

ComponentArt MDS Application Patterns and Interactive Features Prepared by the ComponentArt R&D Team, Version 1.1

Page 3

ComponentArt White Paper

Application Patterns
Our goal in providing the list of supported application patterns is to be able to guarantee reliable conversion of screen logic from XAML-based MVVM applications to their HTML5 equivalents. As mentioned previously, this is not the definite list of all patterns that can possibly be implemented through ComponentArt MDS, rather it is the list of patterns that should be easy to implement and that will be fully supported by ComponentArts Technical Support team.

Screen Drivers
The following list enumerates standard supported scenarios for screen drivers: UI controls that can change the state of a single screen. Any combination of these drivers on a single screen is supported.

TimeNavigator
TimeNavigator enables the user to make a date range selection through an easy-to-use touch interface. When a selection is made, state of the dashboard screen is changed and dynamic portions of the screen are reloaded with new data.

Dropdown
Dropdown control is a standard UI element that allows the user to select one option from the list of available options. The Mobile Dashboard Server runtime generates HTML5 output that invokes the native option selection UI from the mobile device. Once the user makes the selection, the state of the screen changes and the dynamic portions of the dashboard are reloaded with new data.

ComponentArt MDS Application Patterns and Interactive Features Prepared by the ComponentArt R&D Team, Version 1.1

Page 4

ComponentArt White Paper

TreeView, DropdownTree
TreeView control is appropriate for navigating hierarchical data structures and making single or multiple node selections. When a selection is made, the state of the screen changes and the dynamic portions of the dashboard are reloaded with new data. DropdownTree can be used to save screen real estate rather than always keeping a visible TreeView. TreeView and DropdownTree controls are recommended for hierarchical data with relatively small number of nodes (up to 200). For hierarchical structures that have a very large number of nodes, we recommend the cascading dropdown pattern.

Cascading Dropdowns
The cascading dropdown pattern is appropriate for handling hierarchical data structures with a large number of nodes. Making a selection in the first dropdown filters the list of options in the next dropdown and so forth. The pattern allows making selections in any order. For example, the user can make a selection directly in the 3rd dropdown and the values of the first two dropdowns will be populated automatically.

Button, Checkbox, Radio

Simple user interface controls like Button, Checkbox or Radio button group are fully supported by the ComponentArt MDS runtime. Checkboxes and radio buttons are able to change the state of the screen and force a refresh of the affected portions of the dashboard. Buttons are able to issue commands that perform a certain task (for example, generate a PDF export of the dashboard screen). In addition, buttons are able to initiate commands to navigate to another screen.

ComponentArt MDS Application Patterns and Interactive Features Prepared by the ComponentArt R&D Team, Version 1.1

Page 5

ComponentArt White Paper

Multi-screen Navigation
ComponentArts Mobile Dashboard Server technology enables creation of dashboard systems with any number of dashboard screens. Multi-screen navigation is handled through the use of button & dropdown controls, or simply by specifying navigate URLs. The MDS runtime is capable of automatically displaying the appropriate format (HTML5, Silverlight, PDF, down-level HTML or flat image) as well as picking the most appropriate layout (tablet vs. phone and portrait vs. landscape). Automatic format and layout selection can be overridden by specifying the desired format and layout in the navigate URL or the navigation command.

Independent Screen View Models

The simplest form of a multi-screen dashboard system contains a collection of independent dashboard screens, where no state is shared among the screens. In this scenario, each screen has its own view model and navigation between screens is easily accomplished through simple navigation commands.

Shared Screen View Models

In a more complex multi-screen dashboard system, state properties (filters, selections, etc.) are shared among different screens. In this scenario it is necessary to architect the view model classes for the entire application in a way that reflects the properties that are being shared among multiple screens. The ComponentArt MDS runtime is able to persist state information (view model properties) from one screen to another. Please refer to product documentation and source code examples for detailed instructions on how to enable this feature.

ComponentArt MDS Application Patterns and Interactive Features Prepared by the ComponentArt R&D Team, Version 1.1

Page 6

ComponentArt White Paper

Interactive Features
ComponentArt MDS runtime contains a number of built-in HTML5 renderers that support interactive features like popups, drill-downs or scrolling. All of these features have been implemented with mobile devices in mind and have been optimized for touch-based interactions. No special development effort is required to incorporate these interactive features into dashboard screens; they simply need to be enabled.

Popups
Interactive popups that contain more information about a particular data point are available for XyChart and TreeMap controls. Note that customizing the content of these popups through templates is not currently supported in HTML5. The only supported content consists of an index label (shown at the top) and the name/value pair(s) of the data point itself.

XyChart x-coordinate Popup

XyChart x-coordinate popups are designed to show the data point values from multiple series of the chart at the particular x-coordinate. They are activated when the user touches the chart.

XyChart Data Point Popup

The XyChart data point popup is designed to show the value of a single data point in an XyChart instance, for the bar series type. The popup is activated when the user presses on a bar element.

ComponentArt MDS Application Patterns and Interactive Features Prepared by the ComponentArt R&D Team, Version 1.1

Page 7

ComponentArt White Paper

Drill-downs
The purpose of interactive drill-downs is to show the details associated to a particular item by reloading the existing screen or navigating to another screen. The following drill-down scenarios are supported:

GridView Item Drill-down

By clicking on the Details button of a GridView item, the user effectively selects the desired item. This operation can trigger one of the following: 1. Change the state of the current screen and reload all affected elements with new data or; 2. Navigate to another screen based on the GridView item selection.

PieChart Label Drill-down

The PieChart control supports templated data point annotations, which can contain command buttons. These buttons can be used to trigger drill-down operations, enabling the user to get details associated to a particular slice of the pie.

Legend Item Drill-down

Legend control items can also be templated and support the inclusion of buttons for drill-down purposes. In some occasions when PieChart instances contain too many elements, it is more appropriate to use the Legend control for drilldown operations. Please note that Legends can be associated to any type of chart control or be used standalone.

ComponentArt MDS Application Patterns and Interactive Features Prepared by the ComponentArt R&D Team, Version 1.1

Page 8

ComponentArt White Paper

Map Item Template Drill-down

ComponentArt Map control supports templated map item content, which can be used as a target for drill-down purposes. Clicking on this target can provide additional details associated with the particular map item.

XyChart Annotation Drill-down

Given that tapping on the bar elements of the bar chart control is reserved for initiating popups (see page 7), we need a separate UI element to initiate a drill-down operation of the bar chart. XyChart control supports templated content of X annotation elements, which can be used as a container of drill-down buttons. The example to the left places Details buttons as a part of the custom annotation template.

Scrolling
ComponentArt MDS runtime supports scrolling content out of the box through built-in scrolling features for particular controls (like TimeNavigator or GridView) as well as through a generic ScrollViewer container. All scrolling features have been optimized for mobile scenarios and touch input.

GridView Horizontal and Vertical Scrolling

When the content of the GridView control exceeds the available space, horizontal and/or vertical scrolling is automatically enabled. The user can use the scrollbar UI element, or drag the entire content area of the GridView control.

ComponentArt MDS Application Patterns and Interactive Features Prepared by the ComponentArt R&D Team, Version 1.1

Page 9

ComponentArt White Paper

General Scrollability With ScrollViewer

Even though significant scrollable dashboard content is not recommended for general usability reasons, there are some scenarios where it makes sense to make the dashboard screen (or portions of the dashboard screen) scrollable. This feature is fully supported: simply place any custom dashboard content within the ScrollViewer control. The example screenshot to the left places a collection of rich BulletGraph controls in a ScrollViewer instance.

ComponentArt MDS Application Patterns and Interactive Features Prepared by the ComponentArt R&D Team, Version 1.1

Page 10