Pivot is a unique graphical query interface released by Microsoft Live Labs in 2010. Microsoft certainly seems to love the word – this follows in the wake of PowerPivot and PivotTables, two very different business intelligence subsystems.
Pivot is entirely different. At its initial introduction at WPC2010, Microsoft described it as “powerful, informative and fun”. Fun? Yes, I think it is!
Pivot lets you build an interface to items that can be represent with a graphical tag. As you drill into the items, the pictures dynamically fly around the screen to rearrange themselves according to your query. Pivot provides a local client, an Excel design interface, and Silverlight controls to allow you to integrate Pivot into your SharePoint site. I’ve pasted a screenshot below – you can also “play along” with the interactive demos online at http://www.microsoft.com/silverlight/pivotviewer/
Let’s walk through building your first Pivot collection and viewing it through a Silverlight control from your SharePoint site. Since one of my hobbies is digital photography (see www.flickr.com/photos/cmcnulty) I used Pivot to build a simple viewer for some of my favorite pictures.
Step 1: Install the Excel Add-In
The simplest way to start building a Pivot Collection is to install the Excel Add-In from http://www.silverlight.net/learn/pivotviewer/download-excel-tool/ The Excel Add-In add the Ribbon control to allow you to create a New Collection. What’s a collection? A collection is maintained in an Excel spreadsheet, but is exported to Pivot as a .cxml file and related directory that contains all the related support fields and graphic element required by the Pivot interface. You use Excel to maintain the data, and then users can query the data using the Pivot Collection.
Once you’ve installed the add-in, select New Collection from the Pivot Collections tab. The Pivot template gives you two spreadsheets in your workbook:
- Collection Items. This is the main screen where you will add image files and define the principal columns for data exploration.
- Collection Properties The tab allows you to define collection-wide information, such as Collection Title, Icon, Brand Image, Additional Search Text, and Copyright.
Use Import Images to browse for pictures you want to add to the Collection. (You may note that some columns are hidden by default.) Once the photos are imported, you need to start adding data for the existing columns:
- Name – A title for the image
- HRef – A link to follow if the image is clicked
- Description
There is pop-up help to remind you about each of those columns on the header line. Most important, you can add additional columns to the right of the Description Column. Here’s what our sample collection looks like after I imported photos and added several additional columns for State, Time (of day) and Year:

Once the collection is defined, you can play with it by using the Quick Preview option (which actually doesn’t show the images, just the query.
Sept 2: Publish Collection
First, save your Excel file – and it doesn’t need to be in the location where the finished collection will live. Then, choose the Publish Collection item. Pick a new local folder, and give the Collection .CXML file a name. This process can take a few minutes while the engine parses and resizes all the graphical elements. Once it finishes, your collection should open up in a new Pivot Viewer local window. You can explore your data and test to make sure your collection is ready to share.
One of the things you may note is that you’re not limited to “check box” queries – if you define number values the Pivot query interface lets you use a slider control to filter a range of values.
Step 3: Publish to Web
The first thing to do is to copy the entire Collection directory to your SharePoint server – somewhere on the file system, outside of SharePoint. There are a LOT of files, so this process can take a while.
In our example, I created a new C:\Pivot directory. The entire collection goes into C:\Pivot\PivotPix.
You’re also going to need to download the sample Silverlight Pivot viewer and viewer page from Microsoft (see http://www.silverlight.net/learn/pivotviewer/release-notes/) In our example, we put the XAP file (a compiled Silverlight app) and HTML page in C:\Pivot\Viewers. We’re really taking a shortcut here – however, recompiling a hew viewer is pretty simple in the Silverlight 4 Toolkit.
Step 4: IIS Configuration
Now the web server needs to know about the files we just added. In IIS7 manager, I add two virtual directories:
- Pivot – mapped to the location of the viewer files
- PivotPix – mapped to the location of the CXML file and the rest of the collection
To do this:
- Right click on the web site where you want to add the alias
- Select Add Virtual Directory
- Enter the Alias and Directory as needed
Step 5: Edit the HTML File
There’s a lot in the sample HTML file, but the key line is:
<param name="initparams" value="initialCollectionUri=http://msshome2010/PivotPix/FavoritePhotos.cxml" />
Change the value of the initiaCollectionUri to match the “http://website/alias/nameofcollection.cxml” path for your local server. (Substitute your own local server name and alias.)
Step 6: Add links on SharePoint
Test the path to your edited HTML file – it should be http://yoursite/your-alias/PivotViewerSample.HTML [match to your own actual server names etc.] If you’ve set up the aliasing correctly, add a link in SharePoint and you should get your browser to render the Silverlight view to your collection:
What next? There’s a lot more you can do. You may start by adding custom columns to your collection. Also, you’ll want to redesign and recompile the Silverlight viewer to patch your interface requirements but we’ll leave that for another day.
Alternative Approach
Use the Silverlight Pivot Viewer for SharePoint on Codeplex http://pivotviewersp.codeplex.com/ This control is desgined to let you skip the Excel collection generation and IIS process entirely. Instead, this solution consumes its images and data directly from:
- A picture library
- The User Profile List
- Site navigation
The web part is not hard to figure out once you’ve downloaded and deployed the WSP. (Hint – although the documentation tells you how to install it using Stsadm, why not follow through on that New Years’ Resolution and use PowerShell: Add-SPSolution and Install-SPSolution).
Anyway, once you’ve installed the part and added to a page, you can connect to a library, and get almost the same experience as you had using the HTML-hosted XAP file:
Have powerful, informative fun!