Display News Pages in content Query Webpart

Display News pages with content Query Webpart


This blog shows how to create a news ticker with Content By Query Web Part (CQWP), how you can make items slide from right to left with help of SharePoint Designer 2010. In this example you will modify ItemStyle.xsl and ContentQueryMain.xsl and use a portion CSS. In Part 1 in this series I wrote about CQWP and how to create a custom template in ItemStyle.xsl and how to use CSS for the styles. In Part 2I wrote about how to display the latest 5 news by category and how to separate them by tabs.

Click at the image below to activate the video:




<p>JavaScript required to play <a hreflang=”en” type=”video/mp4″ href=”http://videos.videopress.com/Z1nY4VpA/slidingnews_std.mp4″>SlidingNews</a&gt;.</p>

This blog do not cover how to configure the CQWP or to modify ItemStyle.xsl or the other XSL files that describes the CQWP, we´re going straight to the core for the fun stuff which means ItemStyle.xsl, ContentQueryMail.xsl, CSS and jQuery. Please read the previous posts in this series for more related information.

Some things to consider when the slider template is to be built:

  • Modify the structure of ContentQueryMain can affect all other templates in ItemStyle, when you do this you need therefore to customize a copy of ContentQueryMain. In this example were just adding a class name so you don’t need to do that now.
  • Alternative to customize the xsl files you can create modul with Visual Studio, a feature that copies your customized files to style library including a modified version of the CQWP to the web part gallery.

Let´s go!

Download the jQuery plugin called easySlider by CSS globe. Make a reference in your custom master page to this easySlider. Do also reference to latest jQuery in your custom master page.

1 <script type="text/javascript" src="/Style Library/Scripts/jquery-1.6.min.js"></script>
2 <script type="text/javascript" src="/Style Library/Scripts/easySlider1.7.js"></script>

Paste following script in the head section of your master page.

01 <script type="text/javascript">
02 $(document).ready(function(){  
04     $(".slider").easySlider({
05         auto: true,
06         continuous: true,
07         nextId: "slider1next",
08         prevId: "slider1prev",
09         prevText:       '',
10         nextText:       '',
11         speed:  1000, // 800
12         pause3000, // 2000
13     });
15 });
16 </script>

Check out ItemStyle.xsl. Paste following templates into ItemStyle. This example contains two templates, the first one is for limit number of words for the header and the next is the actual sliding template. Publish the file when you’re done.

01 <!-- Word counter Template -->
02 <xsl:template name="FirstNWords">
03   <xsl:param name="TextData"/>
04   <xsl:param name="WordCount"/>
05   <xsl:param name="MoreText"/>
06   <xsl:choose>
07     <xsl:when test="$WordCount &gt; 1 and (string-length(substring-before($TextData, ' ')) &gt; 0 or string-length(substring-before($TextData, '  ')) &gt; 0)">
08       <xsl:value-of select="concat(substring-before($TextData, ' '), ' ')" disable-output-escaping="yes"/>
09       <xsl:call-template name="FirstNWords">
10         <xsl:with-param name="TextData" select="substring-after($TextData, ' ')"/>
11         <xsl:with-param name="WordCount" select="$WordCount - 1"/>
12         <xsl:with-param name="MoreText" select="$MoreText"/>
13       </xsl:call-template>
14     </xsl:when>
15     <xsl:when test="(string-length(substring-before($TextData, ' ')) &gt; 0 or string-length(substring-before($TextData, '  ')) &gt; 0)">
16       <xsl:value-of select="concat(substring-before($TextData, ' '), $MoreText)" disable-output-escaping="yes"/>
17     </xsl:when>
18     <xsl:otherwise>
19       <xsl:value-of select="$TextData" disable-output-escaping="yes"/>
20     </xsl:otherwise>
21   </xsl:choose>
22 </xsl:template>
24 <!-- Sliding News Template -->
25 <xsl:template name="SlidingNews" match="Row[@Style='SlidingNews']" mode="itemstyle">
26     <xsl:variable name="SafeLinkUrl">
27         <xsl:call-template name="OuterTemplate.GetSafeLink">
28             <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
29         </xsl:call-template>
30     </xsl:variable>
31     <xsl:variable name="DisplayTitle">
32         <xsl:call-template name="OuterTemplate.GetTitle">
33             <xsl:with-param name="Title" select="@Title"/>
34             <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
35         </xsl:call-template>
36     </xsl:variable>
37     <xsl:variable name="Created">
38             <xsl:value-of select="@Created" />
39     </xsl:variable>
40     <xsl:variable name="LinkTarget">
41         <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
42     </xsl:variable>
44     <div class="SlidingNewsWrap CQWP-Content">       
45         <xsl:value-of select="$Created"/>
46         <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}" >
47             <xsl:call-template name="FirstNWords">
48                 <xsl:with-param name="TextData" select="$DisplayTitle"/>
49                 <xsl:with-param name="WordCount" select="7"/>
50                 <xsl:with-param name="MoreText" select="'...'"/>
51             </xsl:call-template>
52         </a>
53     </div>
55 </xsl:template>

If you want the date to be formatted you can use for example this xsl:value-of select=”ddwrt:FormatDateTime(string(@Created) ,1033 ,’dd MMMM’)” instead of xsl:value-of select=”@Created”, if you use the ddwrt function you have to include xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime” in the XSL:Stylesheet defintion in the top of the Itemstyle file.

Check out ContentQueryMain.xsl. Open the file and locate the div with the class name cbq-layout-main. Add the class slider after the cbq-layout-main class. Don’t forget a blank space between. Publish the file when you’re done.

Here goes the CSS

01 /* --- QCWP Slider --- */
02 .CQWP-Content {
03 width:390px; height:22px;
04 padding:7px 0px 0px 10px;
05 font-family:Cambria, Georgia;
06 font-size:11px;
07 border-style:none none solid none;
08 border-width:1px;
09 border-color:#e5e5e5
10 }
11 .CQWP-Content a:link, .CQWP-Content a:visited {
12 color:green;
13 }
14 .slider ul, .slider li, .slider li{
15 width:900px;
16 overflow:hidden;
17 }

About sharepointsriram

9+ Yrs of IT experience
This entry was posted in Sharepoint 2010 Web Parts. Bookmark the permalink.

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