Note: The following works for both SharePoint 2007 and 2010.
The 2013 version of this can be found here: http://techtrainingnotes.blogspot.com/2015/06/sharepoint-2013-create-quote-of-day-web.html
Quote of the Day / Tip of the Day
Want to display some “wise words” for your coworkers? You need a Quote of the Day web part!
This web part is another simple Content Query Web Part solution.
- Works from a normal SharePoint list
- Displays a random quote from the list
- Can display a new quote on each page view, or just one new quote a day
- Can be used to display quotes, product announcements or any kind of text
- Uses a Rich Text field so you can include formatting
Create the Quotes list
While you could use a Custom List, I used an Announcements list as it already had what I needed, a Title field and a Rich Text field.
- Go to Site Actions, Create
- Click Announcements
- Add a name for the list such as “Quotes”
- The description is optional, but is best left blank as it adds a little complication later on
- Click OK
- If you are not using the Announcements list type then from the list’s Settings menu click Create Column and add a “Multiple Lines of Text” column. Name the column “Quote” (although any name will work) and click “Rich text (Bold, italics, text alignment)
- Add a few quotes by clicking New
- Create a new view by clicking the “View:” dropdown and click Create View
- Create the view as a Standard view and name it something like “Web Part View”. Un-checkmark all columns except for “Quote” column (the “Body” column if using an announcements list)
- In 2010, expand the Tabular View section and uncheckmark "Allow individual item checkboxes"
- Click OK
Add the Quotes list web part to the page
- Go to the page where you want to add the “Quote of the Day”
- Click Site Actions, Edit Page
- Click add a web part and add the web part for the quotes list
- In the web part click Edit and Modify Shared Web Part
- Select the view you created above (“Web Part View”)
- Click OK
The Content Editor Web Part
- Add a Content Editor Web Part (CEWP) and move it so it is below the quotes web part
- Click the CEWP’s dropdown menu and select Modify Shared Web Part
- In the Appearance section add a title for the web part (perhaps “Quote of the Day”)
- Now you have two choices:
- Click the Source Editor button and copy and paste the JavaScript that you will find later in this article
or (good idea for 2007 and the best practice for 2010!) - Create the JavaScript in your favorite HTML editor (Visual Studio, SharePoint Designer, Notepad, etc), upload it to a library and enter the path to the file in the Content Editor Web Part’s “Content Link” box.
This second choice is preferred for a few reasons:- You can use your editor’s Intellisense, copy and paste, and other features to help write the code
- You can write the code and upload to a library once, then use it in multiple Content Editor Web Parts (…edit in one place…update in many…)
- Easier to backup, share with other site owners and document
- Click the Source Editor button and copy and paste the JavaScript that you will find later in this article
ID’ing your Web Part
To write JavaScript to interact with the HTML of a web part you need to indentify the web part’s HTML. SharePoint’s web parts have a custom attribute named “title”. This title consists of two parts: the title entered in the Appearance section of the web part’s properties and the description entered in the list’s “Title, Description and Navigation” settings. Note that when you have a description, the title attribute includes a “-“ as separator.
Examples:
| Web Part Title | List Description | HTML “title” |
| Quotes | none entered | Quotes |
| Quotes | Cool words of wisdom | Quotes - Cool words of wisdom |
So how do you find it, just to make sure…
Display the SharePoint page with the list’s web part (probably your site’s home page), use the browser’s “View Source” feature (In IE 6 click the View menu, then click Source) and search for the name of the web part. What you are looking for should be something like this:
Or like this if there is no list description:
The JavaScript
Copy and paste the following JavaScript into your Content Editor Web Part. (see the two options described above)
<!-- add your own formatting here... --> <span name="QuoteText" id="QuoteText"></span> <script> // another CEWP trick from http://TechTrainingNotes.blogspot.com // // name of the quotes library web part var quotesWebPartName="Quotes"; // // set this to "true" so the user will see the same quote // for 12 hours or until they close and reopen the browser var OneQuotePerVisit = false; // don't change these var QuoteList; var QuoteArray = []; var quoteCount = 0; //Find the quotes web part and hide it var x = document.getElementsByTagName("TD"); // find all of the table cells var i=0; for (i=0;i<x.length;i++) { if (x[i].title == quotesWebPartName) { // tables in tables in tables... ah SharePoint! QuoteList = x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; // hide the links list web part QuoteList.style.display="none"; break; } } if (!QuoteList) { document.all("QuoteText").innerHTML="Web Part '" + quotesWebPartName + "' not found!"; } //Count the quotes var links = QuoteList.getElementsByTagName("TR") // find all of the rows var url; var quoteCount = 0; for (i=0;i<links.length;i++) { if (links[i].childNodes[0].className=="ms-vb2") { QuoteArray[quoteCount] = i; quoteCount++; //alert("quotes " + links[i].childNodes[0].innerHTML) } } if (quoteCount==0) { document.all("QuoteText").innerHTML="No quotes found in web part '" + quotesWebPartName + "'!"; } var id=-1; // check for a cookie and use last ID if found if (OneQuotePerVisit) { // check for a cookie with the last quote ID if (document.cookie.length>0) { c_start=document.cookie.indexOf("LastQuoteDisplayedID="); if (c_start!=-1) { c_start=c_start + "LastQuoteDisplayedID".length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; id = unescape(document.cookie.substring(c_start,c_end)); } } } if (id == -1) { // generate a random quote ID id = Math.floor(Math.random() * QuoteArray.length) } // display the quote document.all("QuoteText").innerHTML= QuoteList.getElementsByTagName("TR")[QuoteArray[id]].childNodes[0].innerHTML; if (OneQuotePerVisit) { // set a cookie so they see the same quote for xx hours (.5 = 1/2 day = 12 hours) var exdate = new Date(); exdate.setDate(exdate.getDate() + 1); document.cookie="LastQuoteDisplayedID=" + id //+ ";expires=" + exdate.toUTCString(); } </script>
.
