Category Archives: PivotViewer

Using SalesForce and Dynamics CRM with Visual Studio LightSwitch

“Integrate the local/on-premise/cloud islands of data into low-cost, agile modern data mashup applications and can they be ready tomorrow, please!”

We received a request to see if salesforce CRM data could be made available for application integration soon followed by a similar request for Microsoft Dynamics CRM Online data.

LightSwitch Mashup Application

LightSwitch Mashup Application with added Bing, custom visualisations, OpenXML document generation, PivotViewer etc.

Microsoft Visual Studio LightSwitch was released in 2011 and provides a code-free application building experience designed to appeal to business power users. Since then we have been using it mostly as a RAD prototyping tool.

A characteristic of LightSwitch is its focus on business utility. It presents business-savvy native data types like e-mail and money, including automated validation, input masks and formatting. Although it is a really good platform, it needs extending to reach beyond being a niche product for small developments. Fortunately, it is customizable and extensible and the real power is unleashed when put in the hands of skilled .NET developers.

SalesForce Data Source in LightSwitch Dynamics CRM Data Source in LightSwitch
SalesForce and Dynamics CRM Data Sources in LightSwitch provided by Xpert360 custom adapters

Most samples and articles concentrate on extending LightSwitch using custom controls, few cover custom data extensions. We will be doing the same in some upcoming posts about data visualisation, Bing maps amd PivotViewer in LightSwitch. Going beyond this and enabling the myriad sources of business data to be consumed by LightSwitch brings new possibilities.

Rather than ‘reinventing the wheel’ we attempted to use other third-party tools but they proved to be inadequate, slow and not designed to fully unlock the potential of LightSwitch. Any commercial custom data adapter needs to be designed to support LightSwitch and other .NET technologies such as MVC3. A LightSwitch data extension that does not natively support data contract metadata, relationships and foreign keys is not really much of a LightSwitch data extension.

CRM Entities in LightSwitch designer with defaults, validation and relationships 'out-of-the-box'

CRM Entities in LightSwitch designer with defaults, validation and relationships 'out-of-the-box'

XML underpins the integration of all these application layers and services from XAML screen definitions, LightSwitch metadata, configuration settings, SOAP WDSL’s through to data serialisation and storage.

Full support for SalesForce extended metadata in LightSwitch

Full support for SalesForce extended metadata in LightSwitch

So, we designed and built our own and having to use our own software is a good driver for quality. We are currently running a private beta program for the Xpert360 Lightning Series data adapters for salesforce and Microsoft Dynamics CRM Online and are in the final stages of preparing them for general release.

The adapters support most CRUD operations subject to the security context of the connected user. They include efficient caching to speed your applications along and reduce the Web API calls.

Field-level validation inherited automatically from CRM

Field-level validation inherited automatically from CRM

Using the Web API’s requires a salesforce Enterprise Edition subscription or a developerforce account. To access the Dynamics CRM Online services requires Windows Identity Foundation for the security.

Windows Azure Demonstration accessing SalesForce data

Windows Azure Demonstration accessing SalesForce data

We also have versions of the adapters in testing for Windows Azure, other Dynamics CRM versions (security models and on-premise) and proof of concept projects for HTML5, Windows 8 WinRT and Windows Phone. The availability of support for these variations will be subject to customer demand and platform releases, not least our own application development and custom development service projects.

SalesForce Opportunity in LightSwitch Screen Designer

SalesForce Opportunity in LightSwitch Screen Designer is just a few clicks away

We have already trialled an offline support model that can provide a partial or total mirror of the CRM data. Our initial thoughts are that this will be provided as a part of an ‘Enterprise’ version and custom solutions. This feature has turned out to be an essential aid to internal product testing against a developerforce account. We will be seeking early adopters in this area later in 2012.

SalesForce data replication for offline support in MSMS

We have custom tools to enable rapid building of custom data adapters. This is useful for customers that have installed third-party extensions or modified the CRM schema. You may wish to have a custom adapter that only implements access to a small subset of CRM entities. We may offer lightweight adapters if that is an option that looks viable based upon feedback.

Data update collision detection and resolution features are scheduled for a subsequent release. There are also more features surrounding caching, paging, metadata and custom queries to come as well as non-English versions.

Any feedback or enquiries welcome at mailto:info@xpert360.com

Other useful links:

Silverlight 5 RC – Getting started with PivotViewer

[Updated 06-SEP-2011 - NEW SAMPLES]

Lovely jubbly! Silverlight 5 RC is here

Documentation

Do download the offline help CHM or use the matching online MSDN documentation which is now available – MSDN PivotViewer class

Next step: I need some sort of “Hello world” PivotViewer application, please…

Hello New World!

Look in the “PivotViewer class” help at the bottom, and/or download my sample. I have uploaded this very basic sample for DOWNLOAD as some people seem to be experiencing problems. If this simple sample doesn’t work then likely there is something wrong with your environment. My environment is W7 64-bit Ultimate, VS2010 Sp1, Sl5 Beta (not uninstalled; I know, bad boy, but I was in a rush ;) and then Sl5 RC. Also quad-core 8GB memory, here is very simple stress test SAMPLE too, feel free to modify it. This simple works when not served from a web server.

It isn’t pretty but that is not the point. If you are having problems then get back to check out why. Happy PivotViewing! I’ll post some better samples in the next few days.

Hello world from SL5 RC PivotViewer!

Hello world from SL5 RC PivotViewer!

Hello OLD World!

Here is a sample mixing some legacy CXML collections from Xpert360 with some Silverlight 5 RC PivotViewer and some styling for you to play with. Again feel free to modify.

DOWNLOAD SOURCECODE

And some screen shots…

PivotViewer sample Silverlight 5 RC CXML style

PivotViewer sample Silverlight 5 RC CXML style

PivotViewer sample Silverlight 5 RC CXML style

PivotViewer sample Silverlight 5 RC CXML style

PivotViewer Shorts Part 5: Invert Facet Category Selections

Silverlight PivotViewer Invert Facet Category Selections

Silverlight PivotViewer Invert Facet Category Selections

Introduction
By default the Silverlight PivotViewer control does not support inversion of a facet category’s selections, even though internally the control has the functionality.
Some people have expressed a wish to improve the UX with a custom button to implement ‘invert selection‘.
This short post shows how to locate the UI elements for the facet manager and the view model in order to access this feature.
Locating the UI Elements

The flow of the code goes something like this:

  • Locate the “PART_Container” in the tree. This is a Grid control.
  • Locate the CollectionViewerView control.
  • Locate the CollectionViewContainer control.
  • Locate the CollectionViewerViewModel control.
Grid partContainer = (Grid)this.GetTemplateChild("PART_Container");
CollectionViewerView cvv =
    ((CollectionViewerView)(partContainer).Children[0]);
Grid container = cvv.Content as Grid;
Grid viewerGrid = container.Children[1] as Grid;
CollectionViewContainer cvc =
    (CollectionViewContainer)viewerGrid.Children[0];
CollectionViewerViewModel cvvm =
    (CollectionViewerViewModel)ViewBehaviors.GetViewModel(cvv);

The FacetManager contains a method to invert a facet category's selection:

cvvm.FacetManager.InvertSelectionInCategory(cvc.SortCategory);
FAQ
The easiest way of accessing this feature is with a custom button though no doubt a keyboard shortcut could be conjured up.
You will need some internal Microsoft Pivot references and usings too. Depending upon the extent of your other customizations you will need these:
+
using System.Windows.Pivot;
using Microsoft.Pivot.Internal.Controls;
using Microsoft.Pivot.Internal.Model;
using Microsoft.Pivot.Internal.ViewModels;
using Microsoft.Pivot.Internal.Views;
+
Further things to do
Conclusion
This article is a brief guide to locating some visual elements of the Silverlight PivotViewer control in order to access the internal functionality that inverts the selections of a facet category. It targets the developer who has already started customizing the Silverlight PivotViewer control beyond the public API and alter the UX.
Any comments or request for future topics are welcome.

PivotViewer Shorts Part 4: Restyle the ZoomSlider child controls

Introduction
By default the SL4 PivotViewer control displays a custom control for controling the zoom-level of the tile views. A few people have expressed a wish to totally reskin the control and this is a step along that path that hints at the technique needed to dig deeper into the PivotViewer visual tree.
 
This short post shows how to locate the UI element for the control bar, the ZoomSlider, all its visual elements and then alter their background.
 
PivotViewer ZoomSlider Re-Styling

PivotViewer ZoomSlider Re-Styling

 

Locating the UI Elements

The flow of the code goes something like this:

  • Locate the “PART_Container” in the tree. This is a Grid control.
  • Or… go direct to the “PART_ControlBar” element.
  • Locate the ControlBarView to access the child controls.
  • Build a list of child controls using VisualTreeHelper.
// Locate UI Elements
    ControlBarView ControlBar = (ControlBarView)this.GetTemplateChild(“PART_ControlBar”);
    Grid ctrlBarContent = (Grid)ControlBar.Content;
    DockPanel ctrlBarDockPanel = (DockPanel)ctrlBarContent.Children[2];
    ContentControl ZoomSlider = (ContentControl)ctrlBarDockPanel.Children[2];
    ContentControl cc1 = (ContentControl)ZoomSlider.Content;
//

// Build a list of the child controls
    var ctrls = GetChildsRecursive(cc1);
//

// Pick out controls and re-style as you wish 
    foreach (UIElement ctrl in ctrls)
    {
        string s = ctrl.GetType().ToString();
        switch (s)
        {
            case “System.Windows.Controls.Button”:
            Button b = (Button)ctrl;
            b.Background = new SolidColorBrush(Colors.Orange);
            break;
        case “Microsoft.Pivot.Internal.Controls.ClickDragSlider”:
            ClickDragSlider cds3 = (ClickDragSlider)ctrl;
            cds3.Background = new SolidColorBrush(Colors.Green);
            break;
        default:
            break;
        }
    }
;

// Helper function for child controls
IEnumerable<DependencyObject> GetChildsRecursive(DependencyObject root)
{
    List<DependencyObject> elts = new List<DependencyObject>();
    elts.Add(root);
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(root); i++)
        elts.AddRange(GetChildsRecursive(VisualTreeHelper.GetChild(root, i)));
    return elts;
}
+
FAQ
If you want to try out the code there are a few things to watch out for.
+
You will need some internal Microsoft Pivot references and usings too. Depending upon the extent of your other customizations you will need these:
+
using System.Windows.Pivot;
using Microsoft.Pivot.Internal.Controls;
using Microsoft.Pivot.Internal.Model;
using Microsoft.Pivot.Internal.ViewModels;
using Microsoft.Pivot.Internal.Views;
+
Further things to do
Conclusion
This article is a brief guide to locating some visual elements of the Silverlight PivotViewer control in order to customize the styling of the ZoomSlider control. It targets the developer who has already started customizing the Silverlight PivotViewer control beyond the public API.
 
Any comments or request for future topics are welcome.
 

PivotViewer Shorts Part 2: Hide View and SortBy Buttons

Introduction
By default the Silverlight PivotViewer control displays two view selection buttons and a sortby dropdown list of facet names.
Some people have expressed a wish to hide these usually because they want to replace them and control the UX with custom elements.
 
This short post shows how to locate the UI element for the control bar and the child elements in order to alter their visibility.
 
Locating the UI Elements

The flow of the code goes something like this:

  • Locate the “PART_Container” in the tree. This is a Grid control.
  • Locate the CollectionViewerView control.
  • Locate the ControlBarView control.
  • Locate the DockPanel containing the buttons.
// Locate UI Elements
Grid partContainer = (Grid)this.GetTemplateChild(“PART_Container”);
CollectionViewerView CVV = (CollectionViewerView)(partContainer).Children[0]);
Grid container = CVV.Content as Grid;
//
// For exposing the top control bar (title,views,sortby,slider)
ControlBarView ControlBar = ((UIElement)container.Children[2]) as ControlBarView;
DockPanel barDockPanel = (((Grid)ControlBar.Content).Children[2]) as DockPanel;
//
// Hide the controls
barDockPanel.Children[0].Visibility = Visibility.Collapsed; // sortby list
barDockPanel.Children[1].Visibility = Visibility.Collapsed; // view buttons
+
FAQ
If you want to try out the code there are a few things to watch out for. You will probably want to hide the controls when the collection event CollectionLoadingCompleted fires.
+
You will need some internal Microsoft Pivot references and usings too. Depending upon the extent of your other customizations you will need these:
+
using System.Windows.Pivot;
using Microsoft.Pivot.Internal.Controls;
using Microsoft.Pivot.Internal.Model;
using Microsoft.Pivot.Internal.ViewModels;
using Microsoft.Pivot.Internal.Views;
+
Further things to do
Conclusion
This article is a brief guide to locating some visual elements of the Silverlight PivotViewer control in order to hide the view buttons and sortby facet list. It targets the developer who has already started customizing the Silverlight PivotViewer control beyond the public API and alter the UX.
 
Any comments or request for future topics are welcome.
 

PivotViewer Shorts Part 1: Hide Filter Pane Search Box

Introduction
By default the Silverlight PivotViewer control automatically adds a search facet and displays a search box at the top of the filter pane. Some people have expressed a wish to modify the UX and remove this to prevent users performing free text search for some collections.
 
This short post shows how to locate the UI element for the search facet and then alter its visibility.
 
Locating the UI Elements

The flow of the code goes something like this:

  • Locate the “PART_Container” in the tree. This is a Grid control.
  • Locate the CollectionViewerView control.
  • Locate the FilterPaneView to access the child controls.
// Locate UI Elements
Grid partContainer = (Grid)this.GetTemplateChild(“PART_Container”);
CollectionViewerView CVV = (CollectionViewerView)(partContainer).Children[0]);
FilterPaneView FPV = (FilterPaneView)CVV.FindName(“PART_FilterPane”);
//
// For exposing the grid containing the search facet UI elements
ContentControl searchFacetGrid = (ContentControl)FPV.FindName(“m_searchFacetGrid”);
//
// Hide search facet
searchFacetGrid.Visibility = Visibility.Collapsed;
+
FAQ
You will need some internal Microsoft Pivot references and using’s too. Depending upon the extent of your other customizations you will need these:
+
using System.Windows.Pivot;
using Microsoft.Pivot.Internal.Controls;
using Microsoft.Pivot.Internal.Model;
using Microsoft.Pivot.Internal.ViewModels;
using Microsoft.Pivot.Internal.Views;
+
Further things to do
Conclusion
This article is a brief guide to locating some visual elements of the Silverlight PivotViewer control in order to hide the automatically generated search facet. It targets the developer who has already started customizing the Silverlight PivotViewer control beyond the public API.
 
Any comments or request for future topics are welcome.
 

PivotViewer Shorts Part 3: Hide Collection path

Introduction
By default the SL4 PivotViewer control displays the path to the collection CXML file whilst it is being loaded. Many people have expressed a wish to hide the path.
 
This short post shows how to locate the UI element for the collection title and then alter its visibility.
 
Locating the UI Elements

The flow of the code goes something like this:

  • Locate the “PART_Container” in the tree. This is a Grid control.
  • Locate the CollectionViewerView control.
  • Locate the ControlBarView to access the child controls.
// Locate UI Elements
Grid partContainer = (Grid)this.GetTemplateChild(“PART_Container”);
CollectionViewerView CVV = (CollectionViewerView)(partContainer).Children[0]);
Grid container = CVV.Content as Grid;
//
// For exposing the top control bar (title,views,sortby,slider)
ControlBarView ControlBar = ((UIElement)container.Children[2]) as ControlBarView;
//
// Hide collection name
((Grid)ControlBar.Content).Children[1].Visibility = Visibility.Collapsed;
+
FAQ
If you want to try out the code there are a few things to watch out for. You will probably want to make the title visible again when the collection event CollectionLoadingCompleted fires.
+
You will need some internal Microsoft Pivot references and usings too. Depending upon the extent of your other customizations you will need these:
+
using System.Windows.Pivot;
using Microsoft.Pivot.Internal.Controls;
using Microsoft.Pivot.Internal.Model;
using Microsoft.Pivot.Internal.ViewModels;
using Microsoft.Pivot.Internal.Views;
+
Further things to do
Conclusion
This article is a brief guide to locating some visual elements of the Silverlight PivotViewer control in order to hide the CXML path during collection loading. It targets the developer who has already started customizing the Silverlight PivotViewer control beyond the public API.
 
Any comments or request for future topics are welcome.
 

Xpert360 PivotViewer Blog Article Index

[Last updated: 2011-06-22]
Introduction
This post is intended to be a landing place to bring together links to our growing collection of PivotViewer articles in one place. We will update this article to reflect new blog posts and other useful links.
If you are not familiar with overriding the Silverlight PivotViewer control’s OnApplyTemplate() method then I recommend taking the time to work through the posts in the ‘Adventures with PivotViewer’ series and build up your portfolio of customization skills.
These articles are based on the version of the control shipped separately from the Silverlight 4 SDK. We will update and extend articles with information relevant to Silverlight 5 SDK as they become available. If you are already customizing your PivotViewer experience then dive right in:
Adventures with PivotViewer
PivotViewer Shorts
PivotViewer Miscellaneous
Examples on the Internet
Further things to do and resources
Conclusion
This article is an anchor page to our blog articles concerning the Silverlight PivotViewer control. There are a range of articles topics and technical levels. Some target the developer who is ready to start customizing the Silverlight PivotViewer control beyond the documented public API, whilst others show examples of what can be achieved.
Any comments or request for future topics are welcome.

Adventures with PivotViewer Part 10: Let’s do the Timelapse Warp

Introduction
Some data sets that have a datetime facet lend themselves nicely to data play back using time lapse. Sometimes playing back data like this can lead to insights that may have been missed through other visualization representations. Finding good examples is hard especially when you can argue that various trends or anomolies would also show up just as easily in more basic graph plots.
 
It would be nice if the PivotViewer filter panel was bound to data so that a timer could fire and animate the selected datetime range so automatically animating the selected PivotViewer items view in a time lapse. For now we can simulate this by manipulating the control’s ViewState and progressing the range for a target datetime facet.
 
Sample Collection Data
We decide to choose a large data set from the FAA (Federal Aviation Administration) in association with the NTSB (National Transportation Safety Board) . The sample collection covers aviation accident data from 2008 and 2009.
 
NTSB 2008 - 2009 Aviation Incidents by Severity

NTSB 2008 - 2009 Aviation Incidents by Severity

 FAA data for aviation incidents by severity for 2008 and 2009 to give you an overview. Incidents resulting in one or more fatalities are colored red.

NTSB 2008 - 2009 Aviation Incidents by Month

NTSB 2008 - 2009 Aviation Incidents by Month

FAA data for aviation incidents by month for 2008 and 2009 which shows the seasonal variation that peaks in August. Be careful not to misinterpret this as the overall volume of flights is not represented.

NTSB 2008 - 2009 Aviation Incidents by Day-of-Week

NTSB 2008 - 2009 Aviation Incidents by Day-of-Week

FAA data for aviation incidents by day-of-week for 2008 and 2009 which shows a modest peak on saturdays.

NTSB 2008 - 2009 Aviation Incidents for top States

NTSB 2008 - 2009 Aviation Incidents for top States

FAA data for aviation incidents by state for 2008 and 2009 which shows the states with most incidents: California, Texas, Florida, Arkansas, …

Timelapse of Incidents by State
I don’t know the real reasons for the observed trends though some are likely to be seasonal and others definitely related to holiday periods and holiday destinations resulting in increased traffic.
 
NTSB Aviation Incidents by State - Jan 1, 2008

NTSB Aviation Incidents by State - Jan 1, 2008

Starting in January 2008 the incidents are relatively light with the most in California and Florida.
NTSB Aviation Incidents by State - Jan 15, 2008

NTSB Aviation Incidents by State - Jan 15, 2008

For whatever reason the number of incidents pick up sharply for Texas as we move into early February 2008.
NTSB Aviation Incidents by State - Feb 5, 2008

NTSB Aviation Incidents by State - Feb 5, 2008

Throughout February 2008, the number of incidents increases overall but most markedly in Florida. Meanwhile the incident rate reduced in California.
NTSB Aviation Incidents by State - April 1, 2008
NTSB Aviation Incidents by State – April 1, 2008

Moving forward to April 2008 the distribution of incidents changes again with Texas ahead and Arkansas suffering more.

NTSB Aviation Incidents by State - Jun 24, 2008
NTSB Aviation Incidents by State – Jun 24, 2008

Moving forward to June 2008 the number of incidents across the states builds up and California is tops again but now followed by a peak in Illinois for what reason I do not know.

Here is a short video screen capture of a segment of the timelapsed playback.

FAA / NTSB Video Timelapse

Click to play clip of PivotViewer Timelapse

 There are a lot of additional facets to the full collections of FAA / NTSB data and many more trends and interesting visualization opportunities. Stay tuned to our blog…
 
Links 
Conclusion
This article is just a brief introduction to the possibility of playing PivotViewer collection data back as a timelapsed visualization opportunity. It is arguable whether or not this somewhat fashionable approach to visualization really gives a better insight than more traditional visualization paradigms. It all depends on whether there is really any trends in your data sets that are obscured when viewed as simple charts and graphs. Any comments or request for future topics are welcome.

Adventures with PivotViewer Part 9: Multi-Layered Trading Cards

Silverlight PivotViewer Layered Trading Cards

Silverlight PivotViewer Layered Trading Cards - click to view video

Introduction
Adding multi-layered trading cards is a feature enabled by the XAML data template trading card support for the version of the Silverlight PivotViewer control that will be distributed in the Silverlight 5 SDK. This article shows you how to implement a similar effect in the previous version of the control.

If you are new to our blog then you may care to take the time to work through the other posts in this series and build up you portfolio of PivotViewer customization skills.

Deep Zoom Collections and Images

Silverlight PivotViewer Product Catalogue collection

Silverlight PivotViewer Product Catalogue basic collection images

The easiest way to achieve this effect is to generate a full set of deep zoom collection imagery for each desired layer. Also generate full sets of deep zoom images for the desired layers of the trading cards.
 
Simply merge together the folders of the image layers according to your trading cards layer designs. By default the layers 0 to 7, equating to deep zoom folders 0 to 7, are used for the deep zoom collection imagery for the lower resolutions. Only the layers 8 and above are used at runtime by PivotViewer for the individual deep zoom images: folders 7 and below can be deleted and do not need deploying.
 
PivotViewer Low-Res Trading Card Images

PivotViewer Low-Res Trading Card Image transition

 
It is important that all source images for a trading card are the same height and width. The PivotViewer Excel tool is useful for trying this as you can simply copy the Excel spreadsheet and replace the trading card images.
 
I would suggest that you use common low resolution images for the zoomed out top layers of the deep zoom pyramid. For the primary theme choose a facet category with fewest values that can be represented by color. Choose images that represent a secondary attribute such as a category-type facet. By following this approach the users can quickly and easily work with the collection trading cards at low resolutions by visual association of color and category icon.
 

PivotViewer Hi-Res Trading Card Images

PivotViewer Hi-Res Trading Card Image Transitions

 
At the other end of the scale with the highest resolution images you probably will want more information, mini-graphs, etc. These images can be captured from a simple custom tool that uses a XAML data template bound to the collection data. If you do this you ought to be able to reuse your code with the vNext version of PivotViewer.
 
PivotViewer Trading Card

PivotViewer Trading Card Hi-Res from XAML

 
Further things to do
Conclusion
This article is just a brief run through that introduces multi-layered visualization of Silverlight PivotViewer control trading cards. It targets the developer who has already started customizing the Silverlight PivotViewer control in preparation for the next version scheduled to be distributed with the Silverlight 5 SDK. Any comments or request for future topics are welcome.