With the new SharePoint 2013 (preview) and Office Web Apps (OWA) there are beautiful previews of PowerPoint (and Word) documents. The requirement is that the documents are stored in SharePoint 2013 as well. There are rumors that you should get previews of content stored in SharePoint 2010, but until now I haven’t seen this happen. The reason has to do with oauth and the fact that SharePoint 2010 doesn’t support that. Someone will probably solve it at some point, but until then I’ll show you how to use the SP2010 OWA to show previews for SP2010 powerpoints.
To do this you need to familiar with the Display Templates in SP2013. Steve Peschka has written some good articles about this in his blog.
I’ll start by explaining how SP2010 implements previews:
- During crawling, the crawler detects if a document has a preview available, and populates the managed property ServerRedirectedURL. Fortunately, it does exactly the same in SP2013.
- If the ServerRedirectedURL managed property is available during result rendering, a JSONP call against a the wacproxy.ashx will be performed. The wacproxy.ash returns a list of thumbnails which can be showed to the user.
So, now we can simply do the same with SP2013. I’ll do this in the existing PowerPoint display templates.
The Item_PowerPoint.html (you find all the Display Templates under Site Settings –> Master pages and page layouts) is used by all ppt’s, regardless of where they are stored. As it turns out, SP2013 content has a couple of more managed properties called ServerRedirectedPreviewURL and ServerRedirectedEmbedURL which means we can differentiate the content types without creating another Result type for SP2010 content.
In the file I add the following to detect SP2010 ppts:
For the item view in the main result set we only show a small thumbnail. To make sure the rest of the page has finished rendered prior to we start our work, we utilize a function to add a callback that is run post rendering of the page. The method called “AddPostRenderCallback”. The post render function is run after all results has been rendered, so we don’t have access to the current result unless we store it:
Then we add the post render function:
In the code we create the wacproxy URL based on ServerRedirectedURL. We create a delegate function will be called by the JSONP callback. The delegate function call the processImageThumbnail which does actual rendering of the thumbnail into the page:
The html is very similar to how it looks when a SP2013 thumbnail is shown, by reusing most of the CSS classes.
When it comes to the hover panel is very similar. We change the Item_PowerPoint_HoverPanel.html by adding a section that handles SP2010.
First some code to display the black loading box:
It looks like this:
The rest of the code is very similar to the normal item, expect for the HTML generated.
I’m not explaining it here, this is an exercise for the reader. Or download the attached code.
The full result looks like this:
Installing the sample code
The zip file contains
- Code fragments which should be inserted into Item_PowerPoint.html and Item_PowerPoint_HoverPanel.html
- screen.css (modifed from the ootb easyslider css)
The zip does NOT contain the follow required files.
- prt.png from Office Web Apps 2013
- Edit Item_PowerPoint.html, and insert the contents of Item_PowerPoint_code.txt at line 36 (delete the })
- Edit Item_PowerPoint_HovelPanel.html, and insert the contents of Item_PowerPoint_HoverPanel_code.txt at line 49 (delete the })
- Upload screen.css to Pages folder of your search site (same folder as results.aspx)
- Download easyslider1.7.js and place in the same folder.
- Download jquery.1.7.2.js and place in the same folder (or use a CDN)
- Get prt.png from your Office Web Apps 2013 server and place in the same folder. On your OWA you can get file from
3: var jq = jQuery.noConflict();
2: <link href="screen.css" rel="stylesheet" type="text/css" media="screen" />