Building an interactive dashboard with SharePoint 2010 RESTful Services

REST (or Representational State Transfer) is an easy way to easily get or post items to a server-side web service.  It is used in situations where you would use a web service but do not want the overhead and tightly-coupled nature of SOAP.   Technically, REST is not a protocol, but an architectural style. It complies to Open Data Protocol (OData), a Web protocol for querying and updating data that provides a way to unlock your data and free it from silos that exist in applications today.

SharePoint 2010, being based on WCF in the .NET 3.5 Framework, has built-in RESTful web services which allow us to take advantage of this simplicity in custom applications we write..

The RESTful service can be accessed via  http://<site collection url>_vti_bin/ListData.svc

This blog post is based on my Demo #2 last week at MOSSIG user group meeting in Melbourne.

 

uuo

 

The Data for this dashboard is sourced from 2 custom lists “Products” and “Sales”  The two lists has parent-child relationship.

aas

 

Sales List

aas2

Edit Sale Item.

aas5

 

Any given list can be accessed via the RESTFul service. This demo application is using  WCF Data Services to read/write to sharepoint  list Data, then, WCF Data Services  was the first Microsoft technology to support the Open Data Protocol. It provides developers with client libraries for .NET, Silverlight, AJAX etc..

image

Once the service proxy is created from ListData.svc you will have typed access to all the list data with LINQ support.  The following code segment in the ViewModel  shows how sales data is obtained from the service along with corresponding product details and register for Unit of Work tracking when property change.

 

private void GetSalesData() { // Set up the data context if it hasn't been done already if (_dataContext ==null) { _dataContext = new HomeDataContext( new Uri("http://spdemo/_vti_bin/ListData.svc")); } Sales = new ObservableCollection<SalesItem>(); //Prepare REST service request var query = (from s in _dataContext.Sales.Expand("ProductCode") select s ) as DataServiceQuery<SalesItem>; query.BeginExecute( (ar) => { IEnumerable<SalesItem> _salesItems = query.EndExecute(ar); foreach (SalesItem item in _salesItems) { item.PropertyChanged += ((sender, e) => { var entity = (SalesItem)sender; //track changes to entities _dataContext.UpdateObject(entity); }); Sales.Add(item); } NotifyPropertyChanged("LineValue"); }, null) ; }

The viewModel implements INotifyPropertyChanged event for the purpose of Notifying the view of Data changes and visa versa. The ViewModel exposes two properties LineValue (bound to the slider) and ObservableCollection of SalesItems. These 2 properties are declaratively bound to both chart types (bar and pie). I am using few charting controls  from Silverlight Toolkit (http://silverlight.codeplex.com/)  with XAML Declarative bindings as shown below.  

 

            <TextBlock x:Name="ScoreTextBlock" Text="{Binding LineValue}" />
            <chart:Chart Height="200" LegendTitle="Item" Title="No of Units Sold By Product" 
                         x:Name="MyBarChart" Width="562" DataContext="{Binding}">
            <chart:ColumnSeries x:Name="MySalesChartData" Title="Sales of Products" 
                    ItemsSource="{Binding Sales}"
                    IndependentValueBinding="{Binding ProductCode.ProductName}"
                    DependentValueBinding="{Binding NoofUnits}"/>
            </chart:Chart>
            <chart:Chart Height="230" Title="Sales Distribution" x:Name="MyPieChart" Width="562" Margin="4,0">
                <chart:PieSeries ItemsSource="{Binding Sales}" 
                    IndependentValueBinding="{Binding ProductCode.ProductName}"
                    DependentValueBinding="{Binding NoofUnits}" Background="#FF2B1515" />
            </chart:Chart>

The VS2010  solution that contains source code for this demo is uploaded here.

Enjoy!