In my recent post I illustrated how to query a Flash (FLV) video player web part using the built-in Content Editor Web Part (CEWP) and some JavaScript. In the current post I will show you how to achieve the same with Content Query Web Part (CQWP) by altering the standard ItemStyle.xsl and the ContentQueryMain.xsl files.
For the prerequisites regarding the document library for the Flash files, Flowplayer and jQuery libraries read the previous post.
If you don’t have experience in customizing XSL style sheet files, I recommend you to read the following articles first:
How to: Customize XSL for the Content Query Web Part
Customizing the Content Query Web Part and Custom Item Styles
To be sure that our customizations do not interfere with any other web part, we do not edit the original XSL files. Instead, open your site with SharePoint Designer 2010, locate the XSL files above and create a copy of them for editing. I created a new folder called Custom in Style Library/XSL Style Sheets, and copied both files there.
First, open the ContentQueryMain.xsl file for editing. We need to have a video player object at the top of the web part if our custom item style VideoList is selected in the CQWP. To achieve this goal, we have to edit the OuterTemplate.Body template, however, in this case we face with a problem. The selected item style is not available in the OuterTemplate.Body template out of the box as a parameter. As a workaround, we should read the Style attribute of the first item in Rows. The remaining of the customizations is pretty simple.
Locate the OuterTemplate.Body template in the ContentQueryMain.xsl, and insert the code below after the declaration of the EndColumn variable.
- <xsl:variable name="Style" select="$Rows[1]/@Style" />
- <xsl:choose>
- <xsl:when test="$Style='VideoList'">
- <xsl:text disable-output-escaping="yes">
- <![CDATA[
- <script type="text/javascript" src="/_layouts/flowplayer/flowplayer-3.2.12.min.js"></script>
- <script type="text/javascript" src="/_layouts/jQuery/jquery-1.8.3.min.js"></script>
- <link rel="stylesheet" type="text/css" href="/_layouts/flowplayer/style.css"></link>
- <span><a style="display:block;width:520px;height:330px" class="VideoPlayer"></a></span>
- <script language="ecmascript" type="text/ecmascript">
- function startClip(src, title) {
- flowplayer().play([{url: src, title: title}]);
- }
- $(document).ready(startScript);
- function startScript() {
- flowplayer("a.VideoPlayer", "/_layouts/flowplayer/flowplayer-3.2.16.swf");
- }
- </script>
- ]]>
- </xsl:text>
- </xsl:when>
- </xsl:choose>
Next, open ItemStyle.xsl and insert the code below as the last template:
- <xsl:template name="VideoList" match="Row[@Style='VideoList']" mode="itemstyle">
- <xsl:variable name="SafeLinkUrl">
- <xsl:call-template name="OuterTemplate.GetSafeLink">
- <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
- </xsl:call-template>
- </xsl:variable>
- <xsl:variable name="DisplayTitle">
- <xsl:call-template name="OuterTemplate.GetTitle">
- <xsl:with-param name="Title" select="@Title"/>
- <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
- </xsl:call-template>
- </xsl:variable>
- <div class="item link-item" style="text-align:left;">
- <a href="javascript:void(0)" title="{$DisplayTitle}" onclick="startClip('{$SafeLinkUrl}', '')">
- <xsl:value-of select="$DisplayTitle"/>
- </a>
- </div>
- </xsl:template>
Save the changes in both files and publish a new version of them. Run IISRESET.
Add a new CQWP to your page, and set the properties according to the figures below. VideoLib1 is the document library that contains my Flash movies, you should select your own library there:
Export the web part, open it using a text editor, and alter the ItemXslLink, MainXslLink and Xsl properties to refer to the customized ItemStyle.xsl and the ContentQueryMain.xsl files. Delete the original web part from the page and import the altered one.
The outcome of the web part is very similar to the CEWP version in my previous post.
There is however a significant benefit of using a CQWP rather than a CEWP: in the first case you can easily configure your web part to query not only a single document library, but a whole web site (including subsites) or even a whole site collection for Flash movies. If you like, you can even configure the CQWP to group movie files by their location, like the name of the document library.
