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

(Updated 11/24/17 to allow use in a Publishing page.)

This is a 2013 version of the 2007 and 2010 article found here: http://techtrainingnotes.blogspot.com/2010/10/sharepoint-create-quote-of-day-web-part.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!

You could display a picture or product of the day:

This web part is another simple Content Query Web Part solution similar to the ones found in my SharePoint 2010 Customization book. But… this one is for 2013!

• 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, pictures or other content that you can add to a SharePoint rich text editor column.

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 Settings (gear) and click Add an App.
2. Find and 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.  (I.e., don't click Advanced Options and add a description!)
5. Click Create.
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 announcement" or New from the ITEMs ribbon. You can use all of the rich text formatting options if you like. (Bold, colors, etc.)
8. Create a new view by clicking the Create View link in the LIST ribbon.
9. Create the view as a Standard view and name it something like “QuoteView”. Un-checkmark all columns except for “Quote” column (the “Body” column if using an announcements list).
10. Expand the Tabular View section (scroll down to find it) and uncheck "Allow individual item checkboxes".
11. Click OK.

You now have the list that will store the quotes. You will now add two web parts to a page. One which is the list of quotes, and the other which is a Content Editor Web Part with the JavaScript and HTML code.

Add the Quotes list web part to the page

1. Go to the page where you want to add the “Quote of the Day”, most likely your home page. 
2. Click Settings (gear), Edit Page.
3. Click where you would like to add the quotes.
4. In the INSERT ribbon click Web Part and add the web part for the quotes list.
5. In the web part click dropdown arrow and then Edit Web Part.
6. Select the view you created above (“QuoteView”).
7. Click OK.

This web part will be hidden when the JavaScript runs.

The JavaScript and HTML file

1. Open Notepad or your favorite HTML editor.
2. Copy the sample code from below and paste into your editor.
3. Either delete my sample <style> block (it displays the quote in red) or customize your own style.
4. Find the line with "var quotesWebPartName=" and change "Quotes" to your list's name.
5. (Optional) Find the line with "var OneQuotePerVisit = false" and change it to true so the user can only see one quote per day.
6. Save the file.
7. Upload the file to a library where all of your users have at least Read or View access. "Site Assets" is a good choice.
8. Find the URL of the uploaded file by clicking the "…" next to the file name. Copy the URL so we can paste it into the CEWP below.

The Content Editor Web Part

1. Add a Content Editor Web Part (CEWP) and move it so it is near the quotes web part. While the list web part can go anywhere, the CEWP must go where you would like to display the quote of the day. 
2. Click the CEWP’s dropdown menu and select Edit Web Part.
3. Paste the URL you copied earlier into the Content Link box.
4. In the Appearance section add a title for the web part (perhaps “Quote of the Day”).
5. At the bottom of the web part properties box click OK.
6. Save your page and test! Refresh the page to see if the quote changes.

The JavaScript

Copy and paste the following JavaScript into Notepad or your favorite HTML editor. (see above)

<!-- add your own formatting here... (optional)-->
<style type='text/css'>
  #TTNQuoteText { color:red }
</style>


<!-- Quote will be displayed here -->
<span id="TTNQuoteText"></span>



<script type="text/javascript">

function TTNShowQuote()
{
// another CEWP trick from http://TechTrainingNotes.blogspot.com
// http://techtrainingnotes.blogspot.com/2010/10/sharepoint-create-quote-of-day-web-part.html

// 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;

  var TTNTables = document.getElementsByTagName("TABLE");
  var i=0;
  for (i=0;i<TTNTables.length;i++) 
  {
    if (TTNTables[i].summary)
    {
    if (TTNTables[i].summary == quotesWebPartName)
    {
      // Get the table with the quotes
      QuoteList = TTNTables[i].getElementsByTagName("tbody")[0];

      // hide the links list web part, but only if not in edit mode
      // 11/25/17 update to allow use in a Publishing page.
      if ( typeof PageState == 'undefined' || (PageState.ViewModeIsEdit != "1") ) 
      {
        QuoteList.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none"; 
      }
      break;
    } 
    }
  }

  if (!QuoteList)
  {
    document.getElementById("TTNQuoteText").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++;

    //}
  }
  
  if (quoteCount==0)
  {
    document.getElementById("TTNQuoteText").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.getElementById("TTNQuoteText").innerHTML= QuoteList.getElementsByTagName("TR")[QuoteArray[id]].childNodes[0].childNodes[0].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();
  }


}


// add our function to the SharePoint OnLoad event
_spBodyOnLoadFunctionNames.push("TTNShowQuote");


</script>

Only have about 100 more of these to update from 2007/2010 to 2013!

.