Bridging the Old to the New: Get Satisfaction Data in PivotViewer

As soon as I had a free Hackathon day at my new job, I couldn’t help but do a project that spanned from old interests to new. Let’s dig into how to build a PivotViewer view of Get Satisfaction data.

For those of you who want code right now, please see my GitHub page with the Silverlight code. I am using C#, the Silverlight 5 toolkit, and the PivotViewer v2 control that is found in the Silverlight 5 SDK.

For those of you who want pretty and dynamic infographics right now, I have a hosted version of this PivotViewer app. That link goes to:

https://sfn-hosted-customizations.s3.amazonaws.com/GSinPV.html?q=get%20satisfaction

Note that the “q=” is a query parameter and can be set to whatever you want.

Now that the intro is over, what is this Silverlight page anyway? PivotViewer is a project that originated in Live Labs and explored how to use the concept of both visually and data-wise zooming and filtering through data in a way that is easy to explore. The initial view of the data on this page is a set of Get Satisfaction communities that are returned when you do the keyword search based on the parameter you pass in the URL. (UX peeps avert your eyes, passing a search query in the URL is not a piece I am proud of.)

There are buttons on each of the communities that do three things:

• Open the Community
• Look at Community Topics in PivotViewer
• Look at Community People in PivotViewer

If you look at the Topic or People data in PivotViewer, you can sort through that data using the graph view (the button at the top right to make it into a histogram of the data points). You can also filter it using the filter panel on the left hand side.

Here is a snapshot of Topics from Coffee for Less:

And here is a People snapshot from Pampers:

Here are some technical implementation details:

• JSON Requests are made from Javascript

I found it too constricting to work within the Silverlight framework to make JSON requests across domains. Javascript handles this much more gracefully. I created handlers for the JSON replies in Javascript and then passed the data to the C# code to actually add it to the Silverlight viewer. to pass data back to Silverlight, I mark functions as scriptable members.

• Classes model the whole JSON reply, even when I don’t use the fields.

I created full classes of all the data that was returned in the JSON. This is handy if you want to copy my code to use C# for your own project. I just didn’t use all the fields.

• The code is complex because I am reusing the same Silverlight app

I think this would look much simpler if I wasn’t reusing the same Silverlight app to host three different data schemas. This meant I had to think through three different layouts for the items, three different sets of properties, and three different sets of adorners. To simplify, these could have been on distinct pages, but I liked the flow all on one page from a UX perspective.

• Templates for objects and adorners are in XAML

I tend to like to define as much of the layout and adorner logic as possible in XAML. These can also be managed in the code behind, and this is a stylistic choice I made. The meat of the project is in MainPage.xaml and MainPage.xaml.cs

I hope this is helpful both in getting started with the Get Satisfaction API and with Silverlight 5 and the PivotViewer control.