jQuery Ticker for SharePoint Announcement List

May 11th, 2009

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.

Author: Scott Categories: SharePoint Tags:

STSADM Import Error

May 2nd, 2009

We recently had several sub-sites within a site collection that needed to be moved to other site collections. These sites have workflows that have been built in SharePoint Designer and some of the lists have custom event handlers. We needed those items (especially the workflows) to migrate as well.  The stsadm export/import command seemed to be a good fit to do this.

However, I encountered a problem.  The export worked fine, but the import produced the following error:

Progress: Importing File DocLib/Forms/WebFldr.aspx.
FatalError: Value cannot be null.
Parameter name: g
at System.Guid..ctor(String g)
at Microsoft.SharePoint.Deployment.FieldTemplateSerializer.FixLookupFieldSchema(XmlNode fieldNode, Guid parentWebId, Guid fieldId)
at Microsoft.SharePoint.Deployment.FieldTemplateSerializer.CreateField (SPWebweb,SerializationInfoHelper infoHelper)
at Microsoft.SharePoint.Deployment.FieldTemplateSerializer.SetObjectData(Object obj, SerializationInfo info, StreamingContext context, ISurrogateSelector selector)
at Microsoft.SharePoint.Deployment.XmlFormatter.ParseObject(Type objectType, Boolean isChildObject)
at Microsoft.SharePoint.Deployment.XmlFormatter.DeserializeObject(Type object Type, Boolean isChildObject, DeploymentObject envelope)
at Microsoft.SharePoint.Deployment.XmlFormatter.Deserialize(Stream serializationStream)
at Microsoft.SharePoint.Deployment.ObjectSerializer.Deserialize(Stream serializationStream)
at Microsoft.SharePoint.Deployment.ImportObjectManager.ProcessObject(XmlReader xmlReader)
at Microsoft.SharePoint.Deployment.SPImport.DeserializeObjects()
at Microsoft.SharePoint.Deployment.SPImport.Run()

My initial thought was that a lookup field in the “DocLib” document library created the problem.  Just to test it, I removed the document library and tried the export/import again.  The error occurred again for the item above the document library I removed.  I continued to remove lists and the error continued to move up the list of items exported.

It turns out the problem is a bug that affects custom site columns.  In my case there was a single site column that had been created and was associated with a custom content type.  I removed the column from the content type, deleted the column, recreated the column, and added it back to the content type.  I repeated the export/import and this time it completed successfully.

This is a known issue where the webID property is not set for a site column.  You can use WFETCH to call the GetColumns method of the /_vti_bin/webs.asmx web service to see the column properties.  Once the output is collected, you can search for "<Field List".  This will take you to site column definitions.  Each column should have should have a webid attribute.  If one or more do not, that is the source of this problem.

This is one of those obscure problems that can drive you nuts.  Hopefully, if anyone else encounters the same issue this post will be helpful.

Author: Scott Categories: SharePoint Tags:

First Post

April 27th, 2009

I know, I start a technical blog and my first entry doesn’t have anything to do with SharePoint, coding, etc.  Well, this is a quick and easy one and I think the pictures are cool and spice up the page. 

These are a couple of shots of the biggest fire I fought.  It was a windy day and all the water in the city couldn’t stop it.  Fortunately, the wind shifted and allowed us to cut it off.  That was a reminder of how powerful the forces of nature are and how little we can do about them once they get out of control.

 dsc_0581

dsc_0582

Author: Scott Categories: Firefighting Tags: