The Infragistics Sales Reporting showcase, which is available here illustrates how to build a simple application using Silverlight. It implements the functionality found in a simple reporting system, and is built using Infragistics NetAdvantage for Silverlight Line of Business (download, samples) and Infragistics NetAdvantage for Silverlight Data Visualization (download, samples) suite of controls, showcasing their advantages over toolbox controls. This blogpost takes a look at the use cases we considered when building this showcase, and describes the decisions made in terms of application structure, UI design, and UI controls to meet these requirements. If you’d like to learn more on how these controls are used using code segments from the application, take a look at this blogpost. Here’s a screenshot of the application:
Use Cases and UI component choice
1. In order to better plan production volumes, marketing activities and product discounts, users would like to be able to look at sales figures from a variety of different perspectives, looking for growth opportunities in accounts, sales regions, and products. In order to gain this kind of insight, the user has to browse aggregated views of invoice data, and to easily modify the dimensions along which these aggregations are computed.
In order to meet the requirements of this use case and let users browse multidimensional data, we will use a XamPivotGrid control (samples). The XamPivotGrid control implements pivoting functionality, supporting both flat (sample), or OLAP data sources (sample), and Excel-like interaction allowing users to easily modify the aggregation dimensions and measures. Please see a screenshot of the XamPivotGrid below:
2. The user would like to easily modify customers’ details, and would like to also be able to edit orders placed by each customer within the same UI. The user would like to sort and filter customer records, as well as edit the attributes of a customer or an order with input validation, preventing them from entering invalid data (such as a non-numeric value for an order freight charge).
In order to meet this requirement, we will use a XamGrid control. This control implements sorting (sample), filtering (sample)and supports the on-demand retrieval of hierarchical records and their presentation in tabular form (sample), as well as rich data editing using specialized editors providing value formatting and validation (sample). Please see a screenshot of the XamGrid below:
3. Users process the data they see in the XamPivotGrid and XamGrid, either by printing, exporting it to Excel, or by adding and removing customers. The user would like to easily access these commonly used functions in an accessible location, visible at all times during their work with the application.
We will use the XamRibbon control (samples) to meet this requirement. It allows us to easily group related functionality in tabs and button groups (sample), and if appropriate to highlight relevant contextual functionality (sample). Please see a screenshot of the XamRibbon below:
4. One of the core requirements is to be able to view daily sales in a graphical way in order to see trends. The large volume of data requires an easy way of browsing it using zooming. Also, they would like to be able to easily see the sales value for any specific day, so they can then investigate what’s the product breakdown of that sale figure. Furthermore, they’d like to get a realistic expression of the sales volume over time, which filters out the noise from day to day differences in sales.
Meeting this charting requirement is possible using the XamDataChart control. This control binds quickly to high-volume data (sample), and allows users to zoom in and out using the mouse. The XamDataChart implements tooltips (sample) and trend lines (sample) to enable users to easily see specific values as well as the overall trends and patterns in the data. Please see a screenshot of the XamDataChart below:
As the application does not have strict performance requirements, and users would like to access the application remotely, it was built as a web application. The advanced data browsing capabilities it requires in the form of pivoting and charting led to the decision to use Silverlight, due to its rich interaction model, and its productivity as a development platform. The application uses an entity data model and RIA Services to make data available to the client. This approach was selected because of the ease with which it allows the data layer to be built.
The relative isolation between the interactions required by different use cases allows us to simplify the UI by only presenting a single control at a time – the user either browses invoice data, or edits customers and orders, or views daily sales data in a chart. The user interface of this sample application consists of a single form with a tab control, which contains the different views of the application in different tabs. Above the tab control, a XamRibbon control contains buttons representing the most often performed tasks.
This blogpost summarized the use cases covered by the Sales Reporting showcase, and the rationale behind the choices made as to UI structure and components used. It provides an example of how Infragistics controls can be used to deliver a functional and richly interactive application to meet a certain set of requirements. Now that you’ve seen how easy it is to move from requirements to specific controls, and how to implement this, talk to your users and customers about these capabilities and find out how you can benefit from the advantages they provide.
If you have any questions or comments, you can reach me at email@example.com