Posts Tagged ‘News ticker’

The SPXSLT Project And How To Turn Announcements Into Marquee

June 11th, 2011 Abed Khooli 3 comments

Like several other posts, this one was inspired by a comment on my earlier post (Horizontal News Ticker Using SharePoint 2010 CQWP) and a question on SharePoint Forums about limiting the number of characters in the summary view of an announcements list. Usually the announcements Body field is rich text and if you try substring($thisNode/@Body,1,n) where n is the number of characters to display, you will end up with an html tag that may not get closed within the character limit. So, you need to strip the html tags first and this functionality is not available in SharePoint Designer.
Luckily, Marc Anderson, who maintains the SPXSLT project at Codeplex, had a ready xsl template which limits the Body to the first n words, which is even better. You should check Marc’s work and the SPXSLT project as it could save you plenty of time.
In a dataview web part, you can customize one item or the entire view (which could easily inject several hundred lines of XSL when you switch to code view). This is usually the same xsl that serves several types of lists. Sometimes, you only need a few lines to get your data in the rights format. Marc’s template is under 80 lines (including empty lines) and does even more than the standard one.
What you do (and this is for lists of type announcements) is to open the page that has the web part in SharePoint Designer, have the web part selected and from List View Tools (ribbon), Design tab, Customize XSLT (customize Entire View – click the drop down arrow to get there). Switch to code view and the block of code should be selected. Select the portion of code between and (several hundred lines) and delete it. You will use your own instead. You could use the one from Marc’s post as is, but here, we will do something different. The actual announcements view is rendered as table cells and we would like to make use of the liScroll Jquery plugin and turn our announcements linked titles into a news ticker or marquee.
In this case, we don’t need the html manipulation or even the word count. I based my template on Marc’s but removed all table related markup, used and kept the Title field only. I also gave the

    element the class name dfwp-list for no specific reason other than matching the class used by the CQWP (so earlier instructions work without modification). The rest is the same as outlined in the Horizontal News Ticker post.
    Note: The @FileRef will not actually link to the item display form (this is how it reads in the original). To fix it, try to view one item from a standard announcements list and code the url accordingly. It should be something like: http://current-web-address/_layouts/listform.aspx?PageType=4&ListId=list-GUID&ID={@ID}&ContentTypeID=0x010400B0AC1F599DF7584FA331A0991AB8E6ED
    You need to enter your own values for current web address and list-guid (without the braces!)
    One more note: if you add your announcements as a dataform instead of xsltview, you can use the design group (dataview tools) and select a bullet list. In this case, you can link titles to the display form directly from the UI.

Categories: CEWP, DataView, Lists, SharePoint Designer 2010 Tags: , XSLT

Horizontal News Ticker Using SharePoint 2010 CQWP

May 15th, 2011 Abed Khooli 22 comments

This post was triggered by a SharePoint forums post on creating a scroller or marquee. There are ready web parts (commercial) that provide this functionality, of course, but can we do it using the web browser alone?
Well, SharePoint has a content query web part (CQWP) that can be utilized to extract data from lists and libraries across the whole site collection and it presents entries in a standard html list format (

  • …). There is a JQuery plugin that converts this structure into a news ticker (see the liScroll website for details and download). Notice that JQuery can also use a class to identify the
      element as described on the liScroll site and one of the classes used by CQWP is dfwp-list. The steps are simple: add your own CQWP to a page (in this example, I used Blog Posts) and set it up as titles only. Add a content editor web part (CEWP) above the CQWP and edit its source. Add the JQuery library (used 1.6 in this example, make sure your master pages does not reference one already), then add liScroll plugin and its associated style sheet. Here, I ctually uploaded the three of them to a document library and referenced them from there (a must if your site is not connected to the Internet). Then, add the short script that does the scrolling. You can hide the CEWP (set chrome type to none) and also configure the CQWP (ex. give it a better title).
      Notice that you can control the scrolling speed by providing a “travelocity” parameter as explained on the liScroll website. You can also modify the CSS to change the interface.

Categories: CEWP, CQWP, SharePoint Server 2010 Tags: Marquee, News scroller,