Tuesday, October 7, 2014

Creating a Delve clone using Content Search Web Part

While adding support for Office Graph queries in the SharePoint 2013 Query Tool I had to figure out how to send the query in as POST and not just GET. This led me into the Properties property of a search query. Basically a key value store which Microsoft can use to extend the search API’s over time without breaking anything. And this is what the Graph queries use.

There has been some great posts recently from Richard Dizerega, Elio Struyf and Waldek Mastykarz about the Office Graph. Both Richard and Waldek have used the REST API, while Elio did some nifty JavaScript in order to run queries. What’s missing in Elio’s approach is to get Graph data on the initial loading of results, as the web part will first perform a regular query before you can graph it up and re-trigger it. But, as long as you manage to encode it just right, it’s all about editing a web part definition in your favorite text editor.

See demo

Note: Using CSWP with the Office Graph has to be done in SPO, and is not available on-premises (except perhaps using hybrid which I haven't tested)
If you have ever looked into the web part definition of a content search web part you might have noticed the DataProviderJSON property, and inside of that property you can find the Properties and PropertiesJSON properties (that’s almost inception for you).


I have highlighted the important sections in yellow and green and pay attention to the double escaping in the PropertiesJSON property. I have also set the Office Graph rank model GUID which is required when specifying values in GraphRankingModel.

My code is up at the github.com/SPCSR project, and you can access it directly from pzl.no/delveclone.

The project consists of a control template which has logic to change the query to mimic the My work and Shared with me pages, and it includes an item display template to replicate most of the Delve card functionality. I have also use the Masonry javascript library for the card stacking.
The code should be easy to understand and modify for your needs. Happy graphing!