SharePoint: Integrate ASP.net controls with Forms – Pt6: Bonus: Embed documents to page

Pt.1: Use an SP Datasource to push values to a drop-down menu control
Pt2: Adding a DVWP Form to the page
Pt3: Update the DVWP Form using a Drop-Down
Pt4: Trimming Drop Down List results using CAML
Part 5: Force Selection within Drop Down List
Pt6: Bonus: Embed documents to page

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!

SPXSLT

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. http://www.wssdemo.com/Pages/visio.aspx is where you can find this code:

 <OBJECT classid="CLSID:279D6C9A-652E-4833-BEFC-312CA8887857" 
codebase="http://www.microsoft.com/downloads/info.aspx?na=90&p=&SrcDisplayLang=en&SrcCategoryId=&SrcFamilyId=d88e4542-b174-4198-ae31-6884e9edd524&u=http%3a%2f%2fdownload.microsoft.com%2fdownload%2f6%2ff%2f5%2f6f569198-e7d0-49af-b162-54a11f38d301%2fvisioviewer.exe" 
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="http://www.wssdemo.com/Shared%20Documents/carpark.vsd">
<param name="CurrentPageIndex" value="0">
<param name="Zoom" value="-1">
</object>

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" />
</xsl:call-template>

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 a Server 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:choose>
  <xsl:when test="$curr_Site = ''">
   <b>The current site parameter *must* be provided!</b>
  </xsl:when>
  <xsl:otherwise>
   <object>
    <xsl:attribute name="classid">    
     <xsl:text>CLSID:279D6C9A-652E-4833-BEFC-312CA8887857</xsl:text>
    </xsl:attribute>
    <xsl:attribute name="id">    
     <xsl:text>VSDViewer</xsl:text>
    </xsl:attribute>
    <xsl:attribute name="width">
     <xsl:value-of select="$Width" />
    </xsl:attribute> 
    <xsl:attribute name="height">
     <xsl:value-of select="$Height" />
    </xsl:attribute>
    <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>
   </object>
  </xsl:otherwise>
 </xsl:choose>
</xsl:when>

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.

Screenshots?

You know I have screenshots!  Here’s a visio drawing:





Here’s a .pdf:





Here's a .jpg:





Hey, why not a video? .wmv








Update:
The code for this template can be found here:
http://spxslt.codeplex.com/discussions/235951