PANVEGA’s Blog

DotNet Development, SharePoint Customizing, Silverlight, MS Infrastructure and other tips and tricks

Create a rotation banner in a CQWP

Posted by PANVEGA on January 13, 2009

In this post I am gonna explain how easy it is to create a custom banner function in a CQWP by adding some JavaScript code. The goal is to show a Title with a hyperlink and a short description in a rotation banner function. The Content will be referenced from a Custom SP List with these fileds.

Introduction CQWP: https://panvega.wordpress.com/2009/01/07/introduction-in-the-content-query-webpart

1. Edit your SP Page and add a CQWP from the WP gallery
2. select your List from where you wanna show the content
3. open your ItemStyles.xsl with SP Designer. Add a new template and edit the layout you wanna have

More information about customisation of CQWP

Code snipped from the template:

<div id=”linkitem” class=”item link-item”>
<xsl:call-template name=”OuterTemplate.CallPresenceStatusIconTemplate”/>
<div class=”banner_main” style=”width:100%;background-color:yellow” >
<div class=”banner_header” style=”width:70%;float: left;padding:10px;”>
<h1 style=”margin:0px;padding:0px;”>
<a href=”{$SafeLinkUrl}” target=”{$LinkTarget}” title=”Banner”>
<xsl:value-of select=”$DisplayTitle”/>
</a>
</h1>
</div>
<div class=”banner_control” style=”width:30%;float:right;text-align:right;padding:10px;”>
<a href=”javascript:rotator_left();”> <img src=”/Style Library/Images/banner_rotator_left.png” alt=”Rotate Left” style=”border:0px; margin-right:5px;” /> </a>
<a href=”javascript:beenden();”> <img src=”/Style Library/Images/banner_rotator_pause.png” alt=”Stop Rotation” style=”border:0px; margin-right:5px;” /> </a>
<a href=”javascript:rotator_right();”> <img src=”/Style Library/Images/banner_rotator_right.png” alt=”Rotate Right” style=”border:0px;” /> </a>
</div>
<div class=”description” style=”padding:10px;”>
<p style=”margin:0px;padding:0px;”><xsl:value-of select=”@ContentNews” disable-output-escaping=”yes”/></p>
</div>

</div>

4. If you created custom columns, may you have to export the Webpart and add the fields in the CommonViewFields

<property name=”CommonViewFields” type=”string” />

5. Add the JS code into the Page. The easiest way is to add the reference of the JS file into your master page head. However the best way is to build a Delegate Control Feature Solution and put the JS code into a UserControl ascx file.

About Delegete Controls: https://panvega.wordpress.com/2008/10/12/sharepoint-delegate-controls

here the JS code:

lastID = 0;
firstrun = true;
rotate = window.setInterval(test,1500);

function test() {
var x = document.getElementById(“column”).childNodes;
if(x[0].className == “testit”){
if (firstrun != true){
x[lastID].style.display = “none”;
if (lastID < x.length – 2) {
lastID++;
x[lastID].style.display = “block”;
}
else if (lastID == x.length – 2) {
lastID = 0;
x[lastID].style.display = “block”;
}
}
else {
x[lastID].style.display = “block”;
firstrun = false;
}
}
else {
window.clearInterval(rotate);
}
}

function rotator_right(){
var x = document.getElementById(“column”).childNodes;
x[lastID].style.display = “none”;
if (lastID < x.length – 2) {
lastID++;
x[lastID].style.display = “block”;
}
else if (lastID == x.length – 2) {
lastID = 0;
x[lastID].style.display = “block”;
}
window.clearInterval(rotate);
rotate = window.setInterval(test,1500);
}

function rotator_left(){
var x = document.getElementById(“column”).childNodes;
x[lastID].style.display = “none”;
if (lastID > 0) {
lastID–;
x[lastID].style.display = “block”;
}
else if (lastID == 0) {
lastID = x.length – 2;
x[lastID].style.display = “block”;
}
window.clearInterval(rotate);
rotate = window.setInterval(test,1500);
}

function beenden(){
window.clearInterval(rotate);
}

6. In addition you can create your custom CSS file in order to make a better design for the banner.

7. Finally upload these 3 Images from the ItemStyle.xsl above in to your application where you want. You can use any images you want (2 arrows and a pause button for e.g.)

That is all you need when you want to implement a rotation banner function into your SP page

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: