Adding a document view/preview window

Jan 11, 2012 at 3:35 PM

I have seen a document viewer on following page.

I have been trying to implement same solution but I some how not able to understand what code should I use and where should I put that code on the page. (I am only looking to display PDF.)

Please provide some basic steps.

Following is the blog post that I am trying to follow.


I’ve been thinking about a few comments I’ve received during this series.  Specifically, this comment in particular from Jeremy on EUSP: “Would adding a document view/preview window be possible? It sounds like it might fit into where you are headed with this project.”  I initially wrote that it would not be possible without some code.  That comment is still valid, but I’ve went ahead and wrote the code to display certain document types.  Initially this XSL template will handle: .pdf’s, png’s, jpg’s, gif’s, mp3’s, wmv’s and .vsd’s.  I’m sure there’s more to add, so feel free to post a comment if you’d like to see something added!


I’m a big fan of this project.  Isn’t it obvious?  My avatar on Twitter was the SPXSLT logo for a week or so.  If you haven’t been to the codeplex site and used these templates, you now have no reason…

What does it do?

I’m going to go over the most complex file type.  This should give you a good understanding of how all of the other file types work.  Let’s give credit where credit is due. is where you can find this code:

 <OBJECT classid="CLSID:279D6C9A-652E-4833-BEFC-312CA8887857" 

id="viewer1" width="100%" height="100"> 

<param name="BackColor" value="16777120">

<param name="AlertsEnabled" value="1">

<param name="ContextMenuEnabled" value="1">

<param name="GridVisible" value="0">

<param name="HighQualityRender" value="1">

<param name="PageColor" value="16777215">

<param name="PageVisible" value="1">

<param name="PropertyDialogEnabled" value="1">

<param name="ScrollbarsVisible" value="1">

<param name="ToolbarVisible" value="1">

<param name="SRC" value="">

<param name="CurrentPageIndex" value="0">

<param name="Zoom" value="-1">


This code allows you to embed visio files within IE (Internet Explorer).  I know, I know, it doesn’t work in Chrome or any other browser for that matter, but it’s still nice if you have an audience that will be using IE only.  I’ve tried to make all of the other file types adhere to standards, so they all should work no matter what browser you use. 


Breaking It Down

To use this template, you have to call it like this:


<xsl:call-template name="EmbeddedFilePreview">

         <xsl:with-param name="FileType" select="@File_x0020_Type"/>

         <xsl:with-param name="FilePath" select="@FileRef"/>

         <xsl:with-param name="paramHeight" select="500"/>

         <xsl:with-param name="paramWidth" select="1000"/>

         <xsl:with-param name="curr_Site" select="$curr_Site" />


The FileType, FilePath, and curr_Site parameter are required if you are wanting to display .vsd files in your page.  For some reason, the .vsd object requires a full URL and not a relative path.  To get the current site, you’ll want to setup aServer Variable: SERVER_NAME.  You’ll see why that’s important within the .vsd file type.  All of the other file types that you would display using this template *do not* require the curr_Site variable.  There are two other variables that are optional.  They are paramHeight and paramWidth.  If these aren’t set when you call the template, the values are defaulted to 500px and 100%, respectively.

Here’s the SPXSLT code to embed a visio document:


<xsl:when test="$FileType = 'vsd'">


                 <xsl:when test="$curr_Site = ''">

                          <b>The current site parameter *must* be provided!</b>




                                   <xsl:attribute name="classid">                               



                                  <xsl:attribute name="id">                           



                                   <xsl:attribute name="width">

                                            <xsl:value-of select="$Width" />


                                   <xsl:attribute name="height">

                                            <xsl:value-of select="$Height" />


                                   <xsl:text disable-output-escaping="yes">

                                   &lt;param name=&quot;BackColor&quot; value=&quot;16777120&quot;&gt;

                                   &lt;param name=&quot;AlertsEnabled&quot; value=&quot;1&quot;&gt;

                                   &lt;param name=&quot;ContextMenuEnabled&quot; value=&quot;1&quot;&gt;

                                   &lt;param name=&quot;GridVisible&quot; value=&quot;0&quot;&gt;

                                   &lt;param name=&quot;HighQualityRender&quot; value=&quot;1&quot;&gt;

                                   &lt;param name=&quot;PageColor&quot; value=&quot;16777215&quot;&gt;

                                   &lt;param name=&quot;PageVisible&quot; value=&quot;1&quot;&gt;

                                   &lt;param name=&quot;PropertyDialogEnabled&quot; value=&quot;1&quot;&gt;

                                   &lt;param name=&quot;ScrollbarsVisible&quot; value=&quot;1&quot;&gt;

                                   &lt;param name=&quot;ToolbarVisible&quot; value=&quot;1&quot;&gt;

                                   &lt;param name=&quot;SRC&quot; value=&quot;http://</xsl:text>

                                   <xsl:value-of select="concat($curr_Site, $FilePath)"/><xsl:text disable-output-escaping="yes">&quot;&gt;

                                   &lt;param name=&quot;CurrentPageIndex&quot; value=&quot;0&quot;&gt;

                                   &lt;param name=&quot;Zoom&quot; value=&quot;-1&quot;&gt;</xsl:text>

                                   <p>It appears you don't have a Visio Viewer plugin for this browser.</p>





You’ll notice the test is to see whether or not curr_Site is blank.  If the curr_Site and FilePath match a document, then it’ll embed the visio drawing into the page.  I do a little bit of magic with the concat in the middle there, so if you are trying to use this in an SSL environment, change the text to: https://.


Where’s the code?

The preview is only shown here.  I’m going to post all of the code to the SPXSLT site, so get the latest revision there.  If you have any tweaks for me or need to get this working, I’m always glad to hear from you.

Jan 12, 2012 at 5:42 PM

Hi alienout,

The instructions to use/implement the XSLT templates can be found here:

You can store the template directly within your DVWP or use the import feature (recommended), which will allow you to easily reuse the template everywhere you need to.  If you have more questions, feel free to post your code and we can walk through it.

It took me a while to find that link to.  Marc is there a way you could make this a little easier to find?



Jan 12, 2012 at 6:31 PM

There are several XSL Templates. Which one should I be using for  "Adding a document view/preview window "??


Jan 12, 2012 at 8:21 PM

The template you are referring to has not been added to the project.  That's why you couldn't find it. :)

I posted the code a while back as a discussion:

Take that code and set it up according to the usage instructions.  If it's giving you fits, let me know. 



Jan 12, 2012 at 9:54 PM

Thanks for your help.

quick question..

$FilePath - is this something I have to pass a parameter from my ASPX dropdown??



Jan 13, 2012 at 1:50 PM

Thought on making the Usage page more obvious? After all, it's a link in the first sentence on the first Documentation page.

And to answer your last question. alienout, yes you need to pass in the values you want to use, as Matt shows in his example.


Jan 13, 2012 at 2:15 PM

BIG BOLD TEXT! or make the <h3> element a hyperlink too.  

Jan 13, 2012 at 2:24 PM