Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I have an announcements list and instead of displaying all announcements at the same time, there may be quite a few, I want to scroll through them one by one.

Outside of SharePoint there are quite a few methods I would use to achieve this. I would use jQuery if possible. I have used jQuery on the site, but I would like to use a carousel and for this the announcement list cannot be in a table.

So, I need one of 3 things.

a) Be able to output the data, possibly to a Content Editor Web Part, via XSL? This will remove the table structure and replace it with an unordered list. I am not that hot on XSL and would need a push in the right direction as to how to achieve this.

b) Find a jQuery solution that can work with the table structure of the announcements list.

c) Some other solution I haven't thought of.

Any ideas guys?

EDIT: I have tried to go down the XSL route with a Data Form Web Part.

I used another DFWP for a template and changed what I think I needed to change. Does this look anyway close to what I need? (Note I am getting the following error:)

Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Windows SharePoint Services-compatible HTML editor such as Microsoft Office SharePoint Designer. If the problem persists, contact your Web server administrator.

Code

<WebPartPages:DataFormWebPart runat="server" SuppressWebPartChrome="False" Description="" PartImageSmall="" DataSourceID="" MissingAssembly="Cannot import 

this Web Part." FrameType="TitleBarOnly" ConnectionID="00000000-0000-0000-0000-000000000000" DetailLink="" ExportControlledProperties="True" IsVisible="True" 

AllowRemove="True" AllowEdit="True" ID="g_999db424_8180_48da_a7c7_7457a07205f9" Dir="Default" FrameState="Normal" ViewContentTypeId="" AllowConnect="True" 

PageSize="-1" AllowMinimize="True" IsIncludedFilter="" ShowWithSampleData="False" ChromeType="TitleOnly" HelpMode="Modeless" ExportMode="All" ViewFlag="0" 

Title="Courses I am attending" HelpLink="" AllowHide="True" AllowZoneChange="True" PartOrder="1" UseSQLDataSourcePaging="True" PartImageLarge="" 

IsIncluded="True" NoDefaultStyle="TRUE" __MarkupType="vsattributemarkup" __WebPartId="{999DB424-8180-48DA-A7C7-7457A07205F9}" __AllowXSLTEditing="true" 

WebPart="true" Height="" Width=""><DataSources>
<SharePoint:AggregateDataSource runat="server" IsSynchronous="" SeparateRoot="true" RootName="" RowsName="" 

ID="Announcements"><Sources><SharePoint:SPDataSource runat="server" DataSourceMode="List" SelectCommand="&lt;View&gt;&lt;/View&gt;" UpdateCommand="" 

InsertCommand="" DeleteCommand="" UseInternalName="True"><SelectParameters>
<asp:Parameter DefaultValue="{A6930BA9-B6E2-4D1D-A3FE-5379CE9F01E5}" Name="ListID"></asp:Parameter>
                </SelectParameters>
<UpdateParameters>
<asp:Parameter DefaultValue="{A6930BA9-B6E2-4D1D-A3FE-5379CE9F01E5}" Name="ListID"></asp:Parameter>
                </UpdateParameters>
<InsertParameters>
<asp:Parameter DefaultValue="{A6930BA9-B6E2-4D1D-A3FE-5379CE9F01E5}" Name="ListID"></asp:Parameter>
                </InsertParameters>
<DeleteParameters>
<asp:Parameter DefaultValue="{A6930BA9-B6E2-4D1D-A3FE-5379CE9F01E5}" Name="ListID"></asp:Parameter>
                </DeleteParameters>
</SharePoint:SPDataSource><SharePoint:SPDataSource runat="server" DataSourceMode="List" SelectCommand="&lt;View&gt;&lt;/View&gt;" UpdateCommand="" 

InsertCommand="" DeleteCommand="" UseInternalName="True"><SelectParameters>
<asp:Parameter DefaultValue="{DEEE6EF9-4CCF-408B-A90F-89AD21FB0FD1}" Name="ListID"></asp:Parameter>
                </SelectParameters>
<UpdateParameters>
<asp:Parameter DefaultValue="{DEEE6EF9-4CCF-408B-A90F-89AD21FB0FD1}" Name="ListID"></asp:Parameter>
                </UpdateParameters>
<InsertParameters>
<asp:Parameter DefaultValue="{DEEE6EF9-4CCF-408B-A90F-89AD21FB0FD1}" Name="ListID"></asp:Parameter>
                </InsertParameters>
<DeleteParameters>
<asp:Parameter DefaultValue="{DEEE6EF9-4CCF-408B-A90F-89AD21FB0FD1}" Name="ListID"></asp:Parameter>
                </DeleteParameters>
</SharePoint:SPDataSource>
</Sources><Aggregate><concat name="data source"><datasource name="Announcements" id="0" Type="SPList"/></concat></Aggregate>
</SharePoint:AggregateDataSource>
</DataSources>
<ParameterBindings>
                <ParameterBinding Name="dvt_apos" Location="Postback;Connection"/>
                <ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/>
                <ParameterBinding Name="Today" Location="CAMLVariable" DefaultValue="CurrentDate"/>
                <ParameterBinding Name="dvt_adhocmode" Location="Postback;Connection"/>
                <ParameterBinding Name="dvt_fieldsort" Location="Postback;Connection"/>
                <ParameterBinding Name="dvt_filterfield" Location="Postback;Connection"/>
                <ParameterBinding Name="dvt_sortdir" Location="Postback;Connection"/>
                <ParameterBinding Name="dvt_sortfield" Location="Postback;Connection"/>
                <ParameterBinding Name="dvt_sorttype" Location="Postback;Connection"/>
                <ParameterBinding Name="dvt_filterfields" Location="Postback;Connection"/>
                <ParameterBinding Name="dvt_partguid" Location="Postback;Connection"/>
            </ParameterBindings>
<DataFields>

</DataFields>
<Xsl>

<xsl:stylesheet xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" 

version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 

xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" 

xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 

xmlns:ddwrt2="urn:frontpage:internal">
    <xsl:output method="html" indent="no"/>
    <xsl:param name="dvt_adhocmode">sort</xsl:param>
    <xsl:decimal-format NaN=""/>

    <xsl:param name="dvt_apos">'</xsl:param>
    <xsl:param name="UserID" />
    <xsl:param name="dvt_fieldsort" />
    <xsl:param name="dvt_filterfield" />
    <xsl:param name="dvt_sortdir">ascending</xsl:param>
    <xsl:param name="dvt_sortfield" />
    <xsl:param name="dvt_sorttype">text</xsl:param>
    <xsl:param name="dvt_filterfields" />
    <xsl:param name="dvt_partguid" />
    <xsl:variable name="dvt_1_automode">0</xsl:variable>

    <xsl:template match="/" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:x="http://www.w3.org/2001/XMLSchema" 

xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" 

xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
        <xsl:call-template name="dvt_1"/>
    </xsl:template>

    <xsl:template name="dvt_1">
        <xsl:variable name="dvt_StyleName">Table</xsl:variable>
        <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
        <xsl:variable name="dvt_RowCount" select="count($Rows)" />
        <xsl:variable name="dvt_IsEmpty" select="$dvt_RowCount = 0" />
        <xsl:choose>
            <xsl:when test="$dvt_IsEmpty">
                <xsl:call-template name="dvt_1.empty" />
            </xsl:when>
            <xsl:otherwise><ul id="announcementList" border="0" width="100%" cellpadding="2" cellspacing="0">
                <li>
                <xsl:call-template name="dvt.headerfield" ddwrt:atomic="1" 

xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
                    <xsl:with-param name="fieldname">@Title</xsl:with-param>
                    <xsl:with-param name="fieldtitle">Title</xsl:with-param>
                    <xsl:with-param name="displayname">Title</xsl:with-param>
                    <xsl:with-param name="sortable">1</xsl:with-param>
                    <xsl:with-param name="fieldtype">x:string</xsl:with-param>
                </xsl:call-template>
                </li>
                <li>
                <xsl:call-template name="dvt.headerfield" ddwrt:atomic="1" 

xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
                    <xsl:with-param name="fieldname">@Created</xsl:with-param>
                    <xsl:with-param name="fieldtitle">Created By</xsl:with-param>
                    <xsl:with-param name="displayname">Created By</xsl:with-param>
                    <xsl:with-param name="sortable">1</xsl:with-param>
                    <xsl:with-param name="fieldtype">x:string</xsl:with-param>
                </xsl:call-template>
                </li>
                <li>
                <xsl:call-template name="dvt.headerfield" ddwrt:atomic="1" 

xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
                    <xsl:with-param name="fieldname">@Body</xsl:with-param>
                    <xsl:with-param name="fieldtitle">Body</xsl:with-param>
                    <xsl:with-param name="displayname">Body</xsl:with-param>
                    <xsl:with-param name="sortable">1</xsl:with-param>
                    <xsl:with-param name="fieldtype">x:string</xsl:with-param>
                </xsl:call-template>
                </li>
            </tr>
            <xsl:call-template name="dvt_1.body">
                <xsl:with-param name="Rows" select="$Rows"/>
            </xsl:call-template>
        </ul></xsl:otherwise>
        </xsl:choose>

    </xsl:template>


</xsl:stylesheet>   </Xsl>
</WebPartPages:DataFormWebPart>
share|improve this question
add comment

4 Answers 4

I suggest you check out SPServices. It's a "jQuery library which abstracts SharePoint's Web Services and makes them easier to use."

http://spservices.codeplex.com/

share|improve this answer
    
This is the route to go, with SPServices GetListItems operation pointing to your Announcements list, you can pull back the desired results via CAML query and control your output and display as you see fit. –  PirateEric May 19 '11 at 12:17
    
This is also the way I'd do it; SPServices will fire off the web service to grab your announcement data, then you'd need to encapsulate that in some jQuery to do the actual "carousel" piece; there's lots of plugins out there for carousels though. Post over on the SPServices forum if you need help with the web service piece and one of us will help get you started. I've used this approach many times, most recently for a jQuery "Bloomberg-like" news ticker. –  webdes03 May 19 '11 at 14:12
    
This is the way we DID do it at one of our client sites. Works as expected and we have had no issues with it. –  Erik Noren May 20 '11 at 2:25
add comment
up vote 2 down vote accepted

Ok I resorted to a jQuery solution as I can get my head around it easier than anything SharePoint throws at me!

As all lists have the class ms-summarycustombody I was able to get the following to convert the table to ul

var div = $("<div id='viewport' class='viewport'></div>");
var list = $("<ul id='announcementList'></ul>");
var listitem = null;
var p = null;
$('.ms-summarycustombody').each(function(i) {
    $(this).find("tr").each(function(i) {
        if (i % 3 == 0) {
            listitem = $("<li/>");
            list.append(listitem);
        }
        p = $("<p/>");
        $(this).find("td").each(function(i) {
            p.append("<span>" + $(this).html() + "</span>");
             });
                 listitem.append(p);
     });
     div.append(list);
     $(this).replaceWith(div);
});

Then using jCarouselLite I was able to scroll through the items.

$('.viewport').jCarouselLite({
    auto:5000,
    speed:1000
});
share|improve this answer
add comment

Another option to consider is to build something using the Client Object Model and JavaScript... Oops, no you are using SP2007.

If my reading of your question is correct, you already have a JavaScript carousel that requires an unordered list to work with. So I would use the CQWP and XSLT to format the list as an . I don't think the XSLT should be too challenging. You can start by looking at some default XSLT. My tip is to use an XSLT "identity" transform so that you can see the input XML that you are transforming rather than try to guess this by looking at the default XSLT.

Sample XSLT identity transform:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="@*|node()">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
  </xsl:template>
</xsl:stylesheet>
share|improve this answer
1  
I immediately thought client object model too but then I saw that it's SharePoint 2007. –  Rob Windsor May 19 '11 at 11:06
    
Same here, except I already posted it! –  SPDoctor May 19 '11 at 11:07
    
Where can I download the CQWP because for some reason it is not in the gallery? –  anothershrubery May 19 '11 at 11:12
1  
You'll only see the CQWP when you activate the Publishing Infrastructure Site collection feature –  James Love May 19 '11 at 11:12
    
And how do I do that then?! :P –  anothershrubery May 19 '11 at 11:16
show 2 more comments

I don't know if it helps, but I wrote a solution that does this using the CQWP. I call it the Content Query Ticker Web Part:

http://www.novolocus.com/software/content-query-ticker-web-part/

Might be of interest.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.