Create SharePoint Quote of the day web part using Rest API and Bootstrap

by

Learn step by step how we can create a SharePoint quote of the day web part using Rest API and Bootstrap in SharePoint Online/2016/2013. In this article, I explain how to create a president Quotes Web part in SharePoint Online using Rest API and bootstrap.

We will use here client-side technologies like SharePoint Rest API, Bootstrap, CSS, etc. which we will add inside a script editor or content editor web part in SharePoint Online/2013/2016.

SharePoint quote of the day web part

Here we will save the quote details in a SharePoint list. In my SharePoint Online site, I have created a PresidentMessage list which has few columns like:

  • Title
  • Description
  • Image to Display
  • Status

The SharePoint list looks like below, which has one record also.

sharepoint 2013 quote of the day web part
sharepoint 2013 Online quote of the day web part

Now, go to your web part page where you want SharePoint quote of the day web part should appear. Edit the web part page and add a script editor web part.

In the Script editor web part add the below code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<style>
    .centered {
    text-align: center;
	width: 400px;
}
h2 {
  font-family: "Times New Roman", Times, serif;
}
</style>

<script type="text/javascript">
    jQuery(document).ready(function () {
         var site = "https://pikasha12.sharepoint.com/sites/DLH/";
        jQuery.ajax({           
            url: site + "_api/web/lists/getByTitle('PresidentMessage')/items?$select=Description,Image_x0020_to_x0020_Display,Author/Title&$expand=Author/Title&$filter=Status eq 'Active'&$top=1&$orderby=Created",
            type: "GET",
            headers: { "Accept": "application/json;odata=verbose" },
            success: function (data) {               
                //script to build UI HERE
                var slidInd = "";
                jQuery.each(data.d.results, function (index, value) {

                    slidInd = '<img src="' + value.Image_x0020_to_x0020_Display.Url + '"/><h2>' + value.Description + ' </h2><h3>' + value.Author.Title  + ' </h3>';

                });               
                jQuery(".centered").append(slidInd);
                getData();
            },
            error: function (data) {
                //output error HERE
                alert(data.statusText);
            }
        });
    });
</script>
	<div class="container-fluid">
        <div class="panel-heading">
                <h3 class="panel-title">CEO Message</h3>
            </div>
    <div>
      <div class="centered">
      </div>
    </div>
</div>

Once you Save the code you can see the SharePoint quotes of the day web part will appear like below:

sharepoint quote of the day web part
sharepoint quote of the day web part

You may like following SharePoint tutorials:

You may like following SharePoint tutorials:

Hope you learn how we can create SharePoint Quote of the day web part using Rest API and Bootstrap in SharePoint Online/2013/2016.

>