Create president quotes web part using share point rest api and bootstrap

Create PresidentQuotes Webpart using SharePoint RESTAPI and bootstrap
In this article I explain how to create a president Quotes Web part in SharePoint
using rest API and bootstrap.
Step1: Open SharePointsite.
Step2: Create a list in SharePoint“PresidentMessage” and thecolumns as per the
below image.
Step3: Create a SharePointpage and add a script editor Web part.
Step4: Add the code below.
<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"></s
cript>
<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) {
//scriptto 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">

Create president quotes web part using share point rest api and bootstrap

More Related Content

What's hot (20)

Recently uploaded (20)

Create president quotes web part using share point rest api and bootstrap