Scott Price

I had a request to add a news ticker to a SharePoint page that would be driven from data contained in a SharePoint announcement list.  I recently read a blog post written by Jan Tielen illustrating how to get SharePoint list items using jQuery.   This seemed pretty straight forward, but I needed something animated.

To recap what Jan Tielen did, he illustrated how to use jQuery to retrieve SharePoint list items with the following code:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>Tasks</listName> \
                        <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='Title' /> \
                           </ViewFields> \
                        </viewFields> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";

        $.ajax({
            url: "_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
    });

    function processResult(xData, status) {
        $(xData.responseXML).find("z\\:row").each(function() {
            var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
            $("#tasksUL").append(liHtml);
        });
    }
</script>

<ul id="tasksUL"/> 

A search for jQuery news tickers led me to Sam Collett’s TexoTela Blog.  The news ticker example there seemed to be a perfect fit for what I wanted and is driven from an unordered list.  This just happens to be the output of Jan’s example.  Seems like all my work was done for me!  Well, turns out, it almost was.

The news ticker is a jQuery extension available at jQuery SVN.  There are a couple of ways to implement it including an option to add the ticker to the page and add the list items via JavaScript as shown in the example below from the blog post.

var newnews = $("<ul>").attr("class", "newsticker");
newnews.append("<li>News Item 1</li>");
newnews.append("<li>News Item 2</li>");
newnews.append("<li>News Item 3</li>");
newnews.append("<li>News Item 4</li>");
newnews.appendTo("#mynews").newsTicker();

To put it all together, I did the following:

• Added the jQuery library and news ticker plug-in scripts to a document library in the site.  I’m not a big fan of external references when I can avoid them.
• Created a new Content Editor Web Part on my page and copied in Jan’s code.  I then changed the javascript references to point to the js files in my document library.
• I added a style section to the HTML to format the ticker a bit differently as recommended in the news ticker post.
• I updated the web service request to point to my announcements list.
• I updated the processResult function to add and populate the <ul> tag using the script illustrated above.

This was the final result:

<script type="text/javascript" src="/SiteFiles/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/SiteFiles/jquery.newsticker.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>Announcement Test</listName> \
                        <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='Title' /> \
                           </ViewFields> \
                        </viewFields> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";
        $.ajax({
            url: "_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
    });

function processResult(xData, status) {
        var newnews = $("<ul>").attr("class", "newsticker");
        $(xData.responseXML).find("z\\:row").each(function() {
            var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
            newnews.append(liHtml);
        });

        newnews.appendTo("#tasksUL").newsTicker();
    }
</script>

<style type="text/css">
.newsticker {
    list-style-type: none;
    background: red;
    margin: 0;
}
</style>

<ul id="tasksUL">
</ul> 

My example isn’t pretty and certainly needs some refinement, but it does prove the concept.  Furthermore, this technique that was applied using no development tools and requiring nothing more than contributor access to the site.