Document Viewer Webpart MOSS

Office 2007 Document Viewer WebPart (No code required)

The business case was that we had a few large lists that had documents from Office 2007. The problem was the amount of time it took to open each document then preview it in a new instance of the Office application (if you computer is having a slow day this means a lot of wasted time) and then if it was incorrect you would have to open a new one and start the whole process again.

So what if we could preview Office documents like shown bellow.




















All we have here is a list and when you click one of the hyperlinks it will open the document in the preview webpart bellow :) Nice....


Step one goto your sharepoint server:

Open Explorer
Click Tools
Click Folder Options (at the bottom)
Click "File types" tab - it will then populate your file types registered on the server.
Go down to DOCX


Now click the advanced button and
you will get some windows.

No select the tick box Browse in same window! Click ok a few times.

* I wouldnt recommend you play around with much of these settings especially the DDE messaging unless you really know what you are doing! But openning in same browser is ok...



Restart internet explorer.

Now create a document library you want to store you Documents into. If you already have one then you can use this, however I would recommend creating a fresh one for testing first.

Upload a few documents to the document library. In this case Word 2007 files.

Now edit the page where the document library is shown, click site settings, edit page.

Here you can add a webpart to the page, if you want to create a seperate asp.net web part page and add the document library to that you could of course....

Add the Content editor webpart to the page. I prefere underneath.

In the source editor add the IFRAME snippet found on the image to the left.

Click apply and ok.

It you have publishing features activated the checkin any changes and exit edit mode on the page. Take a copy of the URL of the page.

Now open SharePoint Designer and open the page which contains your list and newly added Content editor webpart with its IFRAME inside it....

We will be converting the standard list to a data view if your not sure how to do this, click insert, sharepoint controls and then select dataview, you can choose the document library of your choice, in our demo the one above.

There will be a little right arrow (small) to the top right of the data view, by the way you can easily modify the XSL here to make things like sorting, filter, grouping....but today we are more interested in changing a field type so it is a hyperlink.

To do this simply click this arrow icon and select edit Colomns, make sure you add the hyperlink field and remove any unwanted fields also.
















Now select the top record (i.e the hyperlink field) in the data view we have just created. like shown bellow, there is a similar arround icon that will show:

Make sure the URL path is shown on the field, you can mask this is you want to in Java Script or indeed in XSD but here is just simply for demo purposes.

Save the page and exit SPD.

Go back to the page in SharePoint and edit the page once again. Modify the data view webpart and modify the XSL.

Find the XSL when test for the field type 'url'
it might look something like this.

xsl:when test="$fieldtype='url'

underneath this there should be a "a href" after the "{$fieldvalue} tr" simply add the following:

a href="{$fieldvalue} tr" target="myframe"


Now what we have is a hyperlink the will send the full url path to the IFRAME we created in the Content editor webpart.
Save, apply and ok. Then youre ready to go

James Bruiners