12/24/2011

SharePoint: Displaying PDFs from a Dropdown Menu

Browsing the MSDN SharePoint forums can really bring up some interesting ideas. Recently there was a question about how to display collections of PDF files in a web page. The question included a link to an article on embedding PDFs in SharePoint 2007 by Sharon Richardson. Sharon’s approach used an <embed> tag.

The <embed> tag’s SRC attribute is not updateable by JavaScript and I did not want a hard coded PDF file. I got to playing around with this and worked up a solution that uses an <IFRAME> and borrows some JavaScript from an article I wrote a while back. The JavaScript was used to convert a Links List into an HTML dropdown list (<SELECT>). Here I will use it to convert a library into a dropdown list and a PDF viewer.

Note: Displaying PDFs in SharePoint requires two things:

  • Your users must have a PDF viewer installed that can display PDFs in a browser
  • For SharePoint 2010 your server administrator much change “Browser File Handling” from Strict to Permissive for your web application (see here and here)

Another Note: :-)   This can also display pictures from a library! Just change step 4 below to include the proper file extensions.

 

2010? 2007?

This example was tested in SharePoint 2010, but should work just fine in 2007.

 

The result should look something like this:

   image

 

Steps:

  1. Add a web part part for the document library that contains the PDFs
     
  2. Edit the web part and in the properties panel click “Edit the current view”
     
  3. In the view page select just one column:  Name (linked to document)
  4. Configure the Filter section to select your files (my example just looks for “.PDF”)
     image
     
  5. Save the view
     
  6. Open Notepad and paste the JavaScript from below
     
  7. For initial testing you may want to comment out the line that starts with “x[i].parentNode.” (just add two slashes:  “// x[i].parentNode.”) – this line hides the library web part
     
  8. Edit the “var LibrarySummaryName = ” line to add your web part’s summary name
    To find the Summary name:
    1. Display the page with the web part
    2. Use the browser’s view source option to display the page’s HTML
    3. Search for “source=” and find the title of your web part (Note be sure to include all of the text including any spaces or periods that might be at the end)
       
  9. Edit the height and width attributes of the IFRAME tag to suit your needs (In pixels or percent)
     
  10. Save the file as “PDFdrowdown.html” or similar
     
  11. Upload the Notepad file to a library (Site Pages, Site Assets, or any library you have for miscellaneous site files)
    Note: You can now click the dropdown on this document and edit the file in SharePoint Designer
     
  12. Go to the library with the script file, right-click the filename and click “Copy Shortcut” (you will paste this into the Content Editor Web Part)
     
  13. Add a Content Editor Web Part and move it below the PDF library web part (important!)
     
  14. Edit this web part an paste the URL just copied into the Content Link box
     
  15. You should now be able to test the dropdown and display PDF files in the IFRAME area
     
  16. Final steps are:
    1. if you added them, remove the comment slashed added to the “x[i].parentNode.” line
    2. Edit the Content Editor Web Part and change the “Chrome” to none to hide the web part’s title

 

Hide the Toolbar and the Scrollbars!

To hide the scroll bars, just append options to the end of the URL like this:

Before:

    PDFcontrol1.src=url;

After:

    PDFcontrol1.src=url + "#toolbar=0&navpanes=0&scrollbar=0";

Page 8 of this file has other examples of what you can do with URL parameters for PDF files: http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf#page=8

The results should now look like this:

image

 

 

The JavaScript

<!-- the dropdown list for the libray items -->
<br/>
Select a PDF to view:
<select name="PDFSelect" id="PDFSelect"
  onchange="javascript:LoadPDFtoIFRAME(PDFSelect.options[PDFSelect.selectedIndex].value)">
  <option>Jump to ...</option>
</select>
<br/><br/>

<iframe id="PDFiframe" src=""  height="600" width="400"></iframe>


<script>
// CEWP trick from techtrainingnotes.blogspot.com! 
// techtrainingnotes.blogspot.com/2011/12/sharepoint-displaying-pdfs-from.html

var LibrarySummaryName = "Shared Documents Share a document with the team by adding it to this document library."

function LoadPDFtoIFRAME(url)
{
    var PDFcontrol1 = document.getElementById("PDFiframe");
    PDFcontrol1.src=url
    
    // to hide the toolbar and the scroll bars change the above line to:
    // PDFcontrol1.src=url + "#toolbar=0&navpanes=0&scrollbar=0";
}


//code to hide the links list and populate the select list

//Find the library and hide it
var x = document.getElementsByTagName("TABLE") // find all of the Tables 
var Library;
var i=0;
for ( i=0; i<x.length; i++ ) 
{
  if (x[i].summary == LibrarySummaryName)
  {
    //
    Library = x[i];

    //hide the links list web part (tables in tables in tables ...)
    // Note: while testing, you may want to comment out the next line
    x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";
    break;
   } 
}

if (Library)
{
  //Copy all of the links from the link list to the select list
  var ToList = document.getElementById("PDFSelect");

  var links = Library.getElementsByTagName("A"); // find all of the links
  for ( i=0; i<links.length; i++ ) 
  {
    if (links[i].onfocus)
    {
      if (links[i].onfocus.toString().indexOf("OnLink(this)") > -1)
        { ToList.options[ToList.length]             = new Option(links[i].innerHTML, links[i].href); }
    }
  }
}
else
{
  alert("Library web part named '" + LibrarySummaryName + "' not found")
}
</script>

 

.

 

 

 

.

13 comments:

Ian Morrish said...

Another way using the library item property view page.

http://www.wssdemo.com/Blog/archive/2011/08/20/displaying-pdf-files-in-office-365-sharepoint-online-sites.aspx

Anonymous said...

Fantastic!

I've been looking for a way to do this. I just happened to stumble across this article while looking for something else. I'm really glad I did.

Your instructions are very clear and concise. Worked like a charm in WSS 3.0!

Great work Mike! Thanks for posting this!

barry said...

Hi Mike. I have been looking for something just like this. cant get it to wokr though. Just get an empty iframe, any ideas?

Mike Smith said...

Barry,

Most likely issues:

#1: linksListSummaryName must be correct. Follow the steps to View Source to find the exact name. Note that the source name may include a space or period at the end.

#2: For SharePoint 2010 your server administrator must change “Browser File Handling” from Strict to Permissive for your web application.

Mike

shapirma said...

When you configure the Filter you have a column "Test". How did you set it up or can we use another column .pdf

Mike Smith said...

shapirma,

"Test" is the example is the name of the document column. You need to select the column that has the URL to the document. It is usally listed in the view as "Name (linked to document)".

Mike

King said...

Hi,
i am unable to find "var linksListSummaryName " on the script provided.

do i input it at:
a)
iframe id="PDFiframe" src="" height="600" width="400"

or
b)
var LibrarySummaryName = "Shared Documents Share a document with the team by adding it to this document library."

Mike Smith said...

King,

"LibrarySummaryName" is the correct line to edit. I'll update the steps...

Mike

Anonymous said...

Has anyone got this to work in SP2013? I can't find anything to put in for "ListSummaryName". Any suggestions?

Thanks

John said...

Thanks for your great post. Can we display the most recent pdf when we open the page? It would be nice to have instead of having empty iFrame. Thanks again

John said...

@Dominic Li, I haven't tried it in SP 2013, but actually you need to look for "summary" in your source code. Getting Table's summary for LibrarySummaryName worked for me.

Jeff said...

@John, I'm trying to achieve the same functionality. On page load display the most recent PDF without a user selecting an option. Were you able to figure this out? Mike, thanks for the excellent post!

Mike Smith said...

To automatically display the first item, just add this JS just before the </script> tag.

LoadPDFtoIFRAME(PDFSelect.options[0].value);

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.