A note from Mark Miller, Founder and Editor of EndUserSharePoint.com
In March, I created a Quote of the Day web part from a basic Content Editor Web Part. It has been downloaded and implemented on an untold number of sites. One of the shortcomings of the web part is that you have to manually go into the source code of the web part to change the quotes. The requests are consistent when people go to change the quotes in the list… "Is there a way I can point the web part at a list and have the quotes stored there?"

Paul Grenier and Waldek Mastykarz have been working a lot with the Content Editor Web Part and jQuery, providing cut and paste solutions for typical SharePoint interface issues. I sent them a plea for something that would let my QOTD Web Part point to a list. Waldek came back with a very elegant solution using jQuery against the default SharePoint list that holds the quotes.

This two part series is a step-by-step process for accessing a SharePoint list and using that list as a resource for quotes. If you are a subscriber to the Weekly Newsletter, the updated web part will be included with the January 21st, 2009 issue.

Quote of the day ingredients

Before we start let’s have a closer look at what we want to achieve. What we want to do is to display a quote and its author randomly chosen out of a list with quotes. We want to pick one quote for each day instead of a random one each time the user opens the page. To simplify the maintenance of the quotes and authors we want to store all the quotes and authors in a SharePoint List.

Let’s break the above description into requirements:

• List with quotes and authors
• Randomly picking a quote out of the list of quotes
• The random value should be chosen based on the current day.

Additionally we want it to be a fully client-side based solution without any server-side code to deploy.

The Quotes List

Start by creating the Quotes List:

I created the list using the ‘Custom List’ definition. I’ve changed the display name of the ‘Title’ column to ‘Author’ and added the ‘Comments’ column of which I’ve changed the display name to ‘Quote’. I’ve also filled the list with a couple of quotes so that we can see whether it’s all working properly.

Add the Quotes List View Web Part to any page on your site where you’d like to display a quote of the day:

In my example I’ve modified the default view a little. I have moved the ‘Quote’ column so that is displayed first and replaced the ‘Author (linked to the item with edit menu)’ column with ‘Author’. The ‘Author’ column with edit menu contains a lot of extra HTML markup which we won’t need for displaying quotes. It wouldn’t be impossible to achieve the same result using the default column with menu, but it would make retrieving the author of the quote unnecessarily complex.

The Web Part

Our Quotes list is ready. Let’s proceed with creating the Web Part.

Remember as we wanted it to be a no-custom-code-deployment solution? It means that the Web Part we’re going to build will be built using JavaScript only. To simplify the work a bit let’s use the jQuery library.

Add a new Content Editor Web Part to the page. We will write the JavaScript code inside this Web Part. Call it ‘Quotes Script’ and set the ´Chrome Type’ to ‘None’ to keep it hidden from the users.

All the preparations are done and we are ready to start writing the JavaScript code which will retrieve the Quote of the day.

The engine of the Quote of the Day Web Part

Let’s start off by including the jQuery library. Edit the Quotes Script Web Part and insert the following line in the ‘Source editor…’:

I have chosen to load the jQuery hosted by Google to improve loading of the page. If you want to, you can modify the line above to point to your own copy of the jQuery library stored somewhere in your SharePoint site.

Let’s focus on the Quotes engine:

var Imtech = Imtech || {};
Imtech.QuoteOfTheDay = function(listName) {
var selector = "table[class=ms-listviewtable][summary='" + listName + "'] > tbody > tr";
var quote = { text: null, author: null, obj: null };

var renderQuote = function() {
quote.obj.parents("table:first").parents("td:first").html('


' + quote.text + '
' + quote.author + '


')
}

this.init = function() {
var quotes = $(selector).not(":first");
quote.obj = $(quotes[0]);
quote.text = $("td:first", quote.obj).text();
quote.author = $("td:last", quote.obj).text();
renderQuote();
}
}

The code above defines a new QuoteOfTheDay class in the Imtech namespace (to avoid conflicts with other scripts). The class has a constructor which requires the name of the Quotes List View Web Part as the parameter.

Retrieving the quotes from the List View Web Part and displaying one of them is being done using the QuoteOfTheDay.init() function. So far it displays the first quote in the List but we will change that in a moment.

You can create a new instance of the QuoteOfTheDay class as follows:

var quoteOfTheDay;

$(function() {
quoteOfTheDay = new Imtech.QuoteOfTheDay("Quotes");
quoteOfTheDay.init();
});

In the example above, line 4 holds the label name of the list view web part that is exposing the quotes on this page. Replace the word "Quotes" with the label of your web part.

I use the short notation for the jQuery ready() function, $(function). Because the ‘document’ object is the default object on which jQuery runs operations and ready() is the default function, you can replace $().ready(function() { … }) with $(function() { … }).

So far you should have the following code snippet inside the Source editor of the Quotes Script Web Part:

As soon as you save the changes you should see that the contents of the List View Web Part have been replaced with the first quote and its author.

What’s left is to display a random quote for the current day.

Random quotes

There are two approaches for displaying a randomly picked quote on each page load.

JavaScript ships with the Math.random() function which generates a random number between 0 and 1. In our example the jQuery selector returns an array of quotes that it has found in the List View Web Part. You could pick a random element using the following code:

quote.obj = $(quotes[Math.floor(Math.random() * quotes.length)]);

While the above would definitely do the job there is a neater way to do it. As you might’ve heard jQuery is quite popular not only for its ease of use but for its extensibility as well. There are hundreds of plugins available on the jQuery site: plugins which wrap some functionality and allow you to use cleaner and simpler code. Why not wrap the function to get a random record as well?

You can add your own functions to the jQuery object using the jQuery.fn.extend function:

jQuery.fn.extend({
random: function() {
return $(this[Math.floor(Math.random() * this.length)]);
}
});

Place the above snippet at the top of the code block, right after the second <script type="javascript"> element in your existing script. It should look like this: