Rich PDF Preview in Office 365: SharePoint Online Search

One of the more powerful features in SharePoint 2013 is the preview that you see when hovering over a search result. For Office documents, you not only see a preview, but you can actually navigate through the Word file, Excel spreadsheet, or PowerPoint presentation using embedded controls and links.

Unfortunately, the out of the box preview for PDF files is not as exciting, and provides only a rudimentary view of the file. While there are several approaches to modifying the PDF hover panel, some require programming knowledge beyond what a typical SharePoint user may have. An excellent blog post for creating a PDF preview quickly with minimal programming experience can be found here. That blog shows how the PDF preview can be accomplished in SharePoint Server 2013 by using an iFrame to display the content in a PDF reader. The solution works just like Office document previews, which open in an iFrame containing the Office Web Apps.

In this tutorial, we show how to extend the iFrame solution for PDF previews to SharePoint Online in Office 365. The instructions were developed in the following environment:

Operating System: Windows 7 (64-bit)

Browser:  Internet Explorer 9 (see notes at the end of this blog for information on other browsers)

PDF Viewer: This solution requires that a PDF viewer exists on your local machine. The instructions were developed using the latest version Foxit Reader, a powerful and free PDF viewer available here. I really like Foxit, but if your system already has Adobe Reader or another PDF viewer installed, I encourage you try it before changing your viewer.

Content: You will need several PDF files that contain searchable text. Make a note of what search terms you might use to return these documents in search results.

SharePoint Online: You will need to log into an Office 365 Enterprise tenant. If you do not have a tenant, first navigate to the Microsoft Office 365 Enterprise Preview site, click Try it, and follow the instructions.

SETUP INSTRUCTIONS

  1. Once the tenant has been created, log in using the credentials sent to you.
  2. Start at the top level site (for example, https://TenantName.sharepoint.com).
  3. Upload several PDF files to the Shared Documents library of the top-level site.
  4. Navigate to the default search center (for example, .
  5. Conduct a search, using a query that will return one or more of the PDF files you uploaded previously. Note: it may take 5-10 minutes for the search crawler to index the new files; repeat the search until you see PDF results.
  6. Display the out of the box PDF preview by hovering over a result. Note the hover panel displays very little information.

1-25-2013 1-06-47 PM

MODIFY THE DEFAULT DISPLAY TEMPLATE FOR PDF FILES

  1. In the search center site, at the upper right, click the gear icon and select Site Settings.
  2. Under Web Designer Galleries, click Master pages and page layouts.
  3. In the Master Page Gallery, click Display Templates, and in the page that opens, click Search.
  4. Scroll until you find the file Item_PDF.html.
  5. Using the context menu, download a copy of the file to a convenient location on your local computer.
  6. Open Item_PDF.html in a suitable HTML editor, or in Notepad.
  7. In the line near the top that starts with <head><link, change the line to set the title to “PDF Hover Panel Advanced”. The end of the line will look like this: <title>PDF Hover Panel Advanced</title>
  8. In the line starting with var hoverUrl =, change the template URL assignment by editing the end of the line to read: “~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_Site_HoverPanel.js”;
  9. Save the file as PDF_Default.html.
  10. Close the file.
  11. Upload the modified display template HTML file to the Search display templates library, accepting the default settings in the windows that are displayed.

CREATE A NEW RESULT TYPE FOR PDF

Result types are a convenient way to configure how search results are displayed. Here, we create a simple result type that uses the new PDF display templates we just created.

  1. Return to the search center page.
  2. Click the gear icon and select Site Settings.
  3. Under Search, click Result Types (Note: do not click Search Result Types under Site Collection Administration).
  4. Click New Result Type.
  5. Name the result type PDF with Preview.
  6. Next to Conditions, in the Which source should results match? drop-down menu, ensure that All Sources is selected.
  7. In the What types of content should match? drop-down menu, select PDF.
  8. In the What should these results look like? drop-down menu, select PDF Hover Panel Advanced.
  9. Click Save.

1-25-2013 1-28-30 PM

You will see the new result type in the list. Note that this new result type will take priority over the out of the box result type for PDF files.

SEE THE NEW HOVER PANEL IN ACTION

  1. Navigate back to the default search center (for example, ).
  2. Repeat the search that returns PDF results.
  3. Hover over one of the results. Note the rich preview that appears.
  4. Click anywhere in the preview. Scroll up and down through the document.

1-25-2013 1-31-48 PM

While in the preview, right-click and note you have access to all the PDF reader options and settings.

1-25-2013 1-32-50 PM

In this tutorial, you learned how to create a rich PDF preview in SharePoint Online Search by making minor modifications to the default PDF display template and by using the modified template in a result type.

NOTES FOR OTHER BROWSERS

As stated previously, the above solution was created and tested in Internet Explorer 9 using Foxit Reader. Your experience may differ if you use other environments because other browsers and PDF viewers may handle iFrames and PDF viewing differently than Internet Explorer. For example, Chrome has its own default viewer which must be disabled before Foxit Reader or another viewer will work. Since browsers and viewers are updated frequently, I encourage you to experiment!

4 thoughts on “Rich PDF Preview in Office 365: SharePoint Online Search

  1. I have followed the article a couple of times however cannot get this to work for me.

    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.

    Template ‘~sitecollection/_catalogs/masterpage/Display Templates/Search/PDF_Default.js’ not found or has syntax errors. (LoadTemplate: ~sitecollection/_catalogs/masterpage/Display Templates/Search/Group_Default.js)

    I do have IE 10 and we are running the Wave 15 version so not sure if this is the reason.

Leave a Reply

Your email address will not be published. Required fields are marked *