A Sample Sales Reporting Application Built Using Silverlight

Many customers are choosing Silverlight for building line of business applications because of the productivity of the platform and the rich interaction it enables. We offer fully-featured products in the Silverlight area, including standard line of business controls such as a grid, menu, ribbon, outlook bar, chart, scheduler, as well as data visualization controls such as a chart, map, pivot grid, among others. Recognizing the interest among developers toward this platform we held the Building Data Access Applications using the Silverlight Data Grid, where I introduced a sample business reporting application, built using our products.

UPDATE: The application is now available here.

This blog post presents how this sample is built, and highlights certain features which you may find valuable in your applications. Please remember to unblock the ZIP archive before extracting it. It is built based on Silverlight and Visual Studio 2010, and uses RIA services for exposing data to the Silverlight application. The downloadable package includes trial versions of the NetAdvantage for Silverlight product libraries it needs to run, so no extra downloads are required to run this sample. Free fully functional trials are available of the line of busines and data visualization products.

Setting up the sample

Even if you do not have the resources to fully setup the data tier of this application, its source code would be valuable to you, because it demonstrates the features, interoperability and styling of key controls in the NetAdvantage for Silverlight Line of Business and Data Visualization products.

Before you run the application, you need to setup a connection the Northwind database on a database server. You most probably have an SQL Express installed together with Visual Studio 2010, which you can use to host the Northwind database, which is freely available. Once the Northwind database is setup in your database server, you need to set the database server setting in the web.config file of the InfragisticsDemoApplication.Web project. Once you open the web.config file, please locate the <connectionStrings> element, and make sure that in the element inside, you set the path to the database server instead of the MYCOMPUTER\SQLEXPRESS text in the string below.

<add name="NorthwindEntities" 

connectionString="metadata=res://*/ClientBin.NorthwindEntities.csdl|res://*/ClientBin.NorthwindEntities.ssdl|res://*/ClientBin.NorthwindEntities.msl;provider=System.Data.SqlClient;provider connection string="data source=MYCOMPUTER\SQLEXPRESS;initial catalog=Northwind;integrated security=True;multipleactiveresultsets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />

Using XamRibbon

The XamRibbon is setup using two tabs, with three button groups, each containing button tools. This is fairly easy to setup using the code below, setting up a single tab with one button group, containing two buttons:

<ig:XamRibbon Name="XamRibbon1" Grid.Row="0">             
  <ig:XamRibbon.Tabs>                 
     <ig:XamRibbonTabItem Header="Home" >                     
        <ig:XamRibbonGroup Caption="Customers" x:Name="customersGroup">                         
          <ig:ButtonTool x:Name="btnAddUser" Caption="Add Customer" LargeImage="../Images/UsersAdd.png" 
              Click="btnAddUser_Click" />                         
          <ig:ButtonTool x:Name="btnRemoveUser" LargeImage="../Images/UsersDelete.png" Caption="Delete Customer" 
              Click="btnRemoveUser_Click" />                     
        </ig:XamRibbonGroup>
     </ig:XamRibbonTabItem>
  </ig:XamRibbon.Tabs>
</ig:XamRibbon>

Setting up XamGrid and implementing CRUD

The UI is built using a TabControl which hosts a number of XamGrids and a XamPivotGrid. An Entity Data Model was generated for the tables in the Northwind table, together with a DomainService which exposes this data and handles committing any changes made by the Silverlight application. Once a DomainService is setup, code is automatically generated on the client to communicate with the service. This causes the entities exposed by the DomainService to appear in the Data Sources snap-in in Visual Studio. Within the Silverlight application, the XamGrids were setup by dragging the corresponding table from the Data Sources snap-in into the design surface of the form. This sets up a XamGrid (a more detailed walkthrough of this scenario is available) in the form, bound to data from the corresponding entity in the model.

In addition to hierarchical data and CRUD, the XamGrids in the sample also demonstrate filtering, selection, summaries and conditional formatting behaviors. Please take a look at the code for implementation details.

Binding to Hierachical Data

Binding to Hierarchical data is implemented in the Customers grid, which also shows the Order items for each customer. The approach uses a separate operation in the DomainService class, which retrieves customers together with associated Order objects. A detailed walkthrough of how to implement this is available.

Implementing CRUD

Once the XamGrids have been bound and record adding, editing and deleting has been enabled using row-based editing by setting the EditingSettings AllowEditing property to Row, we implement CRUD operations by handling the RowDeleted and RowExitedEditMode (called when a row was edited, as well as added) events. A detailed walkthrough of data editing in the XamGrid is available.The code in the handlers of these events calls the SubmitChanges method of the customerDomainDataSuurce, which commits changes made in the UI down to the database:

private void customerXamGrid_RowExitedEditMode(object sender, EditingRowEventArgs e)
{     
               //commit to the database changes made during a row add or row edit     
               customerDomainDataSource.SubmitChanges();
}
 
private void customerXamGrid_RowDeleted(object sender, RowEventArgs e)
{
               //commit to the database deleted rows     
               customerDomainDataSource.SubmitChanges();
}

 

Charting

The sample uses two of the charts we’re offering – XamWebChart and XamDataChart. They present sales data in dialog windows, which can be opened using the buttons in the ribbon. The charts have been bound to data from DomainService, including a breakdown of sales by product using an animated pie chart (using the XamWebChart), and a timeline of sales over more than two years (using the XamDataChart). The XamDataChart also has a trendline added, as well as a tooltip, allowing the user to easily see the values and dates when spikes in sales occur. The XamDataChart also has enabled horizontal zooming, allowing a business user to easily narrow down their analysis of the sales data. Please see how these charts are declared for details on how these features are implemented. Here's a screenshot of the daily sales chart:

Data Pivoting

The sample includes a pivot grid component, which is included in our NetAdvantage for Silverlight Data Visualization product. Using a data selector component, showing all the available dimensions and measures, the user can easily setup their own view of the data, using the familiar Excel-type of pivot table interface. In this case, the pivot grid is used to interactively slice and dice Invoice data from the Northwind database. Here's a screenshot of the pivot grid view:

Theming

All the Infragistics controls in the sample have been styled using the Office 2010 Blue theme using resource dictionaries, included in the sample. These resource dictionaries are added in the App.xaml file which makes these styles available across the application. The Office 2010 Blue theme is available for all our controls in all our products.

Printing

Printing is implemented using the standard Silverlight 4 printing. Pressing the print button prints the grid control in the currently active tab, including the pivot grid.

Excel Export

Excel export is provided for the grid control in the currently active tab. Excel export is implemented for both XamGrid and XamPivotGrid in a separate ExcelExporter class.

Summary

This blogpost describes a sample business reporting system built upon Silverlight. It presents how grids, charts and a pivot grid are used to deliver a rich user experience, offering interactive data browsing (XamPivotGrid and XamDataChart), CRUD operations and hierarchical data in a XamGrid, printing, excel export in an application themed using the Office 2010 blue theme. This sample gives you a basic scenario of how you can use Silverlight and NetAdvantage for Silverlight suite of products to quickly build a functional and visually-appealing business application.