Add Random Quote To SharePoint Page Using JavaScript
This article describes how to display random items using java script in Content Editor web part in SharePoint 2016. I assume that the reader is aware of how to add a Content Editor web part to a SharePoint Page.
Requirement:
Generally on a SharePoint Page, we would like to display a random quote. In addition, we want to save our quotes in a SharePoint list . We would like visitors to see the quote displayed to be refreshed every time the page is hit.
Solution:
1-Create a SharePoint list (I've named it "quote")
2- A "Title" field in your list that is the quote’s title
3- A "Tip" field which can be a single line of text or multi-line text field which contains the "quote"
4-A date only field called "TipDate" for the day you wish the tip to be displayed.
Note: using the script below, you can have multiple quotes for the same date and the script will randomly pick one of those quotes. It will also randomly pick a tip if it doesn’t find a tip for the current date.
<html>
<head>
<style type="text/css">
.quoteHeading
{
font-size:26px;
color:#0e387c;
text-align:center;
display:none;
}
.quoteBody
{
font-size:medium;
word-wrap: break-word;
display: block;
padding-top: 0px;
padding-right: 17%;
padding-left: 17%;
}
</style>
<script src=".../SiteAssets/JS/jquery-1.12.0.min.js"/>
<script type='text/javascript'>
jQuery.noConflict();
</script>
<script type="text/javascript">
DisplayTip(false);
function DisplayTip(useDate)
{
var listName = "quote";
var titleField = "Title";
var tipField = "Tip";
var dateField = "TipDate";
var query = "/_api/Web/Lists/GetByTitle('"+listName+"')/items?$select="+titleField+","+tipField;
if (useDate)
{
var today = new Date();
todayString = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
query += "&$filter="+dateField+" eq '" + todayString + "'";
}
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + query,
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR){
if (data.d.results.length < 1 && useDate)
{
DisplayTip(false);
} else {
tipIndex = getRandomInt(0,data.d.results.length - 1);
var title = data.d.results[tipIndex][titleField];
var tip = data.d.results[tipIndex][tipField];
$("#quoteTitle").text(title);
$("#quoteTip").html(tip);
}
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving Tips: " + jqXHR.responseText);
});
}
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</head>
<body>
<div id="quote">
<span class='quoteHeading' id="quoteTitle"></span></br>
<span class='quoteBody' id="quoteTip"></span>
</div>
</body>
</html>
Note: In the Code, if 'DisplayTip' is 'True', the script will look for a tip with today's date and if 'False' is passed in ,a random tip will be displayed.
Note:In order to keep the script simple and to reduce REST queries, the script returns ALL quotes from the list if it does not query for a specific day. So, if you plan to use this script without using the date field (which I don’t recommend), you must keep number of quotes in the list as low as possible(less than 50) so that you aren’t sending too much data over the wire. There are of course MANY different ways to implement this functionality, but again, for simplicity this is what I chose to do.
- Upload the above script to your "Site Assets" Document Library (or whichever library you store your scripts to)
- Add a Content Editor Web Part in the page you would like to display the "Quote of the Day"
- Edit the Content Editor Web Part and link it to the script you previously uploaded.
- Ta and Da… that should be all there is to it.
Cheers! Hopefully you find this post useful!