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).

image

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!

33 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Hello Mikael. Finally I managed to enable the feature but now is showing this error in the same Control_GraphItem.js it having appeared for the conversion.
    '~sitecollection/_catalogs/masterpage/Display Templates/mAdcOWGraph/Control_GraphItem.js'

    ReplyDelete
    Replies
    1. If you reupload control_graphitem... do you still get a conversion error? If so I will have to retry this. Are you using a team site?

      Delete
    2. Yes I am using a team site. And as much as I return the file he keeps giving this error.

      Delete
    3. Could you be missing a jquery reference in your masterpage?

      Delete
  3. I'm getting the same error.

    The display templates included in the folder are named mAdcOW_Control_Graph.html & mAdcOW_GraphItem.html, so their corresponding .js files are mAdcOW_Control_Graph.js & mAdcOW_GraphItem.js , leaving me with no Control_GraphItem.js.

    Am I missing something?

    ReplyDelete
    Replies
    1. The files should be correct now..was a reference error.

      Delete
  4. I keep getting this error. Do you know what i'm doing wrong?

    Display Error: The display template had an error. You can correct it by fixing the template or by changing the display template used in either the Web Part properties or Result Types.

    Cannot read property 'toString' of null (CoreRender: ~sitecollection/_catalogs/masterpage/Display Templates/mAdcOWGraph/mAdcOW_GraphItem.js)

    ReplyDelete
    Replies
    1. It can probably fail if the item is missing a secondaryfileextension, thus line 64 fails. I'm on holiday so don't have time to fix it, but should be fairly easy.

      Delete
  5. Added all the files and published them, when I add web part nothing displays. Any ideas?

    Thank you.

    ReplyDelete
    Replies
    1. Hi, a bit hard to troubleshoot based on that.

      Any errors if you open javascript console in your browser? Do you have Delve working? Does it show the filter links on top?

      Delete
  6. I am also running this on a web app page not a wiki page, will this make a difference? I am trying to embed delve as a web app onto a team site.

    Thanks.

    ReplyDelete
    Replies
    1. What do you mean by web app page (in o365)? You can also use REST/JSOM and render office graph results yourself, not using search web parts.

      As for the other delve clone, that was more a POC as it has some small referencing issues, but show that Delve is just a script app running on a page.

      Delete
    2. I'm not much of a developer, so you mean you can utilize REST/JSOM to render delve onto a sharepoint site?

      Delete
    3. If you are a developer and know how to do REST calls you can query for office graph data like Delve does, yes :) You would have to create the UI yourself, much like I did for the CSWP,

      Delete
  7. I used your guide
    http://techmikael.blogspot.com/2015/09/creating-another-delve-clonea-real-one.html

    and imputed the link via page viewer, where as last time I tried imputing delve link it would not work.

    This is a nice work around.

    ReplyDelete
  8. Thanks Mikael for providing this solution.
    When I upload the HTML files to Master Page Gallery/Display Template/mAdcOWGraph folder it's not generating corresponding js files, Am I missing out anything.
    Please let me know.

    ReplyDelete
    Replies
    1. You need to have publishing enabled on the site to have the conversion from .html to .js happen.

      Delete
    2. Thanks for you quick response, I could solve this issue.
      Now I'm getting the below error.
      Display Error: The display template had an error. You can correct it by fixing the template or by changing the display template used in either the Web Part properties or Result Types.
      'jQuery' is undefined (OnPostRender: )

      Delete
    3. Solution also requires jQuery to be present on the page :)

      Delete
    4. hi,
      I'm not from sharepoint background, can you please elaborate little more on this.
      Thanks

      Delete
    5. You need to talk to a web developer to help you out. It's sample code, not a product :)

      Delete
  9. Mikael-- this is incredible! I'm going to play with it this weekend. The concept of showing "cards" in search display templates is something I've been wanting to implement for a while now. Even if not hooked to the graph, it could be used to curate a variety of sources. Great work.

    ReplyDelete
  10. Hey Mikael,

    I am getting below error. Do you have any idea why?

    The file you imported is not valid. Verify that the file is a Web Part description file (*.webpart or *.dwp) and that it contains well-formed XML.


    I am trying to upload a web part in web part gallery via mentioned in above video.

    ReplyDelete
    Replies
    1. Not sure..and you are importing it into an SPO tenant?

      Delete
  11. Hey Mikael,

    Great solution... I've uploaded the HTML files and they created the JS files as defined in your demo. I'm running this on an O365 Tenant in a Team Site with Publishing turned on at the Site Collection and Site level. I've uploaded the JS file and named it as in your demo. I'm running into the following Error:

    Display Error: The display template had an error. You can correct it by fixing the template or by changing the display template used in either the Web Part properties or Result Types.

    jQuery is not defined (OnPostRender: )

    Any help would be appreciated.

    Cheers,

    Bill Ryan

    ReplyDelete
    Replies
    1. You need to add a reference to load jQuery, as it's being used. Could be done in the control template file, or via a script editor webpart.

      Delete
    2. Hey Mikael,

      I solved my own issue by adding a Script Editor Web Part to the Site that made an html call to an offsite JQuery library. This loaded JQuery prior to loading your WebPart. I'm going to add this script to the MasterPage to make it more permanent.

      Your WebPart is working great.

      Cheers,

      Bill Ryan

      Delete
  12. Hi Mikael - Just tried this on my site and generally its looking very nice - My only observation is that whilst the content being displayed is relevant to me, it is not the same as my Delve view. Is there a reason for this?

    ReplyDelete
    Replies
    1. Delve has changed what calls it makes, and it's now hidden behind a protocol handler so no way of knowing exactly the parameters they are using - so this is most likely the reason. You could play around with the GQL, but it would be a guessing game.

      Delete
  13. Hi Mikale, i followed all the steps but getting error"Display Error: The display template had an error. You can correct it by fixing the template or by changing the display template used in either the Web Part properties or Result Types.


    Object doesn't support property or method 'masonry' (OnPostRender: )

    ReplyDelete
    Replies
    1. Ensure you have added the masonry .js file the same place as https://github.com/SPCSR/DisplayTemplates/blob/master/Search%20Display%20Templates/mAdcOW%20Search%20Center%20Templates/mAdcOWGraph/mAdcOW_Control_Graph.html refer to.

      Delete