Scrolling through list items one by one

Question

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>

Answer 1

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
});

Answer 2

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/

Answer 3

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>

Answer 4

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.