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:

  

 

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”)
    
    
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:

 

 

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>

 

.

 

 

 

.