SharePoint: Create a Quote of the Day Web Part (a CEWP trick!)

 

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.

1. Go to Site Actions, Create
2. Click Announcements
3. Add a name for the list such as “Quotes”
4. The description is optional, but is best left blank as it adds a little complication later on
5. Click OK
6. 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)
7. Add a few quotes by clicking New
   
8. Create a new view by clicking the “View:” dropdown and click Create View
9. 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)
10. In 2010, expand the Tabular View section and uncheckmark "Allow individual item checkboxes"
11. Click OK

 

 

Add the Quotes list web part to the page

1. Go to the page where you want to add the “Quote of the Day”
2. Click Site Actions, Edit Page
3. Click add a web part and add the web part for the quotes list
4. In the web part click Edit and Modify Shared Web Part
5. Select the view you created above (“Web Part View”)
6. Click OK

 

The Content Editor Web Part

1. Add a Content Editor Web Part (CEWP) and move it so it is below the quotes web part 
2. Click the CEWP’s dropdown menu and select Modify Shared Web Part
3. In the Appearance section add a title for the web part (perhaps “Quote of the Day”)
4. 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

 

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>

 

.