Create president quotes web part using share point rest api and bootstrap
- 1. 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 {
- 2. 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) {
- 3. 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">