Editor’s note: Contributor BJ Wildbore is a Software Developer at Massey University. Follow him @bjwildbore
Modifying the itemStyle.xsl file in SharePoint allows us to transform boring content query lists into anything we can imagine. Here is an example of whats possible using custom itemStyles, Jquery and css.
At tutorialzine.com there is a great example of an apple styled slideshow banner. For information on how the banner works visit tutorialzine. In this post I will show you how to turn a simple SharePoint list into this slideshow.
Step 1: Get the files
Download the necessary files for the tutorial here
Step 2: Upload the slideshow gallery template images to your server.
In the zip file you downloaded there is a folder called "template". Inside this are a number of images that the banner css needs to use. Upload these files to your server somewhere that you can then access them via a url in your web browser.
Step 3: Add the CSS
There is another file called styles.css. Open this up and replace the *** path to *** place holders with the url paths to the images you just uploaded. Then copy and paste this css into either your master template css file or another css file that the site or page loads
Step 4: Create the list
Create a new list and call it "banner".
Add a single line of text column called "description" and a hyperlink column called "link".
Step 5: Populate the list
Go through and create 4 list items. Give them a short title,small description. Also on each item you will need to add their thumb and slide images as attachments. These images are in the zip file you downloaded in the sample slides folder. Attach the images in the "slide1 folder" to the first item and so on…
Step 6: Pass through the current row to the itemStyle.xsl
NOTE: It is best practice to never alter the standard itemStyle.xsl or ContentQueryMain.xsl files themselves. Make a copy of them and have your webpart reference the copies instead.
To output the banner gallery properly we need to make sure the ContentQueryMain.xsl passes through the current position when calling the itemStyle.xsl templates.This blog post shows you quickly and simply how to achieve this.
Step 7: Adding the banner item style
Make sure you have open your custom itemStyle.xsl. Open the banner_part_xsl.txt file and copy all the text from here and paste it into your custom itemStyle.xsl file just before the last closing </xsl:stylesheet> tag.
Step 8: Add the List to the page via a Content query web part.
Add a content query webpart to a page and click to configure it via the tool pane.
Set the source to "Show items from the following list" then browse to find the banner list you created.
Then select your banner style from the item style dropdown
In the fields to display Link box, type "link"
In the fields to display title box, type "title"
In the fields to display description box, type "description"
Click ok and then save the page.
Step 9: Admire your handywork, have a coffee, then read below for an explanation of the itemStyle xsl you added
I will quickly go over the important parts of the xsl banner item.
First we ensure the current position variable is passed in. This enables us to output the necessary javascript and outer shell of the banner slideshow once only.
<xsl:template name="banner" match="Row[@Style='banner']" mode="itemstyle"> <xsl:param name="CurPos" />
In this part we set the width and height of the banner web part, the delay in seconds and wether it will audo scroll or not.
<xsl:variable name="slideWidth" select="470" /> <xsl:variable name="slideHeight" select="204" /> <xsl:variable name="advanceDelay" select="7" /> <xsl:variable name="autoAdvance" select="1" />
The block below gives us a useable web part id to add to the javascript that is output. We add this to certain parts of the javascript incase we want to have more than one of these on a page.
<xsl:variable name="wpid" > <xsl:call-template name="OuterTemplate.Replace"> <xsl:with-param name="Value" select="$WebPartId"/> <xsl:with-param name="Search" select="'-'"/> <xsl:with-param name="Replace" select="'_'"/> </xsl:call-template> </xsl:variable>
Below we get the url to the attachments folder for the list.
<xsl:variable name="ListName"> <xsl:value-of select="substring-before(substring-after(substring-after(@FileRef,$RootSiteRef),'/Lists/'),'/')"/> </xsl:variable> <xsl:variable name="BaseLink"> <xsl:value-of select="concat(substring-before($SiteUrl,$RootSiteRef),@FileRef)"/> </xsl:variable> <xsl:variable name="BaseAttachmentURL"> <xsl:value-of select="concat(substring-before(@FileRef,$ListName),$ListName,'/Attachments/')" /> </xsl:variable>
The part after the $curPos = 1 statement goes through and creates a variable called "JScript". This contains a the base javascript with a number of place holder in it for the webpart id, width, height, delay and autoadvance variables.
<xsl:if test="$CurPos='1' "> <xsl:variable name="JScript"> <![CDATA[
Once it has the javascript template in the JScript variable, the place holders are replaced with the variable values then it is output to the page.
<xsl:variable name="ModJScript1"> <xsl:call-template name="OuterTemplate.Replace"> <xsl:with-param name="Value" select="$JScript"/> <xsl:with-param name="Search" select="'***WebPartID***'"/> <xsl:with-param name="Replace" select="$wpid"/> </xsl:call-template> </xsl:variable> <xsl:variable name="ModJScript2"> <xsl:call-template name="OuterTemplate.Replace"> <xsl:with-param name="Value" select="$ModJScript1"/> <xsl:with-param name="Search" select="'***advanceDelay***'"/> <xsl:with-param name="Replace" select="$advanceDelay"/> </xsl:call-template> </xsl:variable> <xsl:variable name="ModJScript3"> <xsl:call-template name="OuterTemplate.Replace"> <xsl:with-param name="Value" select="$ModJScript2"/> <xsl:with-param name="Search" select="'***autoAdvance***'"/> <xsl:with-param name="Replace" select="$autoAdvance"/> </xsl:call-template> </xsl:variable> <script type='text/javascript'> <xsl:value-of select="$ModJScript3" disable-output-escaping="yes"/> </script>
Then we output also the banner gallery shell. The javascript and shell are only output once.
<div id='gallery_{$wpid}' class='gallery' style='width:{$slideWidth}px;' > <div id='slides_{$wpid}' style='width:{$slideWidth}px; height:{$slideHeight}px'><hr /></div> <div id='menu_{$wpid}' class='gallery-menu'><ul><li class='fbar'><br /></li></ul></div> </div>
Then for each item we output the slide and thumbnail. The jquery script upon load goes over these and relocated them inside the gallery shell and BOOM… it should all work nicely.
<div class='slideOuter_{$wpid}'> <div class='slide' style='width:{$slideWidth}px; height:{$slideHeight}px'> <a href='{$SafeLinkUrl}' target='_blank'><img src="{$BaseAttachmentURL}/{@ID}/slide.png" /><span class='bannerMessage'><b><xsl:value-of select="@Title" /></b> <br /> <i><xsl:value-of select="$caption" /></i></span></a> </div> </div> <div class='menuItem_{$wpid}'><a href=''><img src="{$BaseAttachmentURL}/{@ID}/thumb.png" /></a></div >
This will give you a base to start from and can be modified and tidied up for your requirements