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 tag.
The 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  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. 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”)
     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 linksListSummaryName = ” 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 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



Comments

Post a Comment

Popular posts from this blog

SharePoint: Group By on more than 2 columns in a view (SP 2010)

Image
An expanded version of this article, along with many other customization examples and how-tos can be found in my book,  SharePoint 2007 and 2010 Customization for the Site Owner . This is an update of an  article written for SharePoint 2007 . Many of the steps are the same in both 2007 and 2010, but both the SharePoint Designer steps and the default web part used for views have changed. Group By on more than 2 columns in a view In my SharePoint classes I have often been of asked how to group on more than two levels in a view. I have always given the quick answer of "use SharePoint Designer"!  But, some of you have asked "How?". You may be sorry you asked… but here goes…  Goals:  Create a view with nested groups deeper than just 2 levels Put the counts and totals at the bottom of each section. Do the above with no custom web parts, custom XSLT or anything that has to be deployed to the server. Sample:       Secrets and Tricks needed:  It can't be done &
Read more

Configure Form Based Authentication (FBA) in SharePoint 2010

Image
Steps to Configure FBA in SharePoint 2010  Below are the steps required to configure FBA in SharePoint 2010. I will be using MS SQL database as membership store for users.   A) Setting up ASP.NET Forms Authentication User and Role Data Source  1. Create Database  2. Configure Membership and Role Provider  3. Create User B) Create Web Application and Site Collections C) Configure Web.Config file  1. Configuring FBA web application web.config file 2. Configuring Central Administration web application web.config file 3. Configuring Security Token Service web.config file D) Adding User Policy to the FBA Web Application E) Verification Steps  A) Setting up ASP.NET Forms Authentication User and Role Data Source  This section explains creation of database which is used to store user's information such as credentials and roles which is used for Form Authentication. This section also explains the configuration of Membership and Role providers in the web.
Read more

SharePoint 2010 Windows PowerShell Interview Questions

Q. What is Windows Powershell ? Ans.  Windows PowerShell is a new Windows command-line shell designed especially for system administrators. In the SharePoint administration context, Windows PowerShell is another administration tool that supersedes the existing Stsadm.exe. Q. How is Windows Powershell different from Stsadm ? Ans.  Unlike stsadm, which accept and return text, Windows PowerShell is built on the Microsoft .NET Framework and accepts and returns .NET Framework objects. In addition to that it also gives you access to the file system on the computer so that you can access registry,digital signature certificate etc.. Q. What are cmdlet's? Ans.  Windows PowerShell introduces the concept of a cmdlet which are simple build in commands, written in a .net language like C# or VB. Q. Can you Create PowerShell scripts for deploying components in SharePoint ? Ans . If you are creating a webpart with VS 2010 then you can deploy it using ctrl + f5. However, to activate the
Read more