In this SharePoint tutorial, we will discuss how to create a custom announcement web part using Rest API in SharePoint Online or SharePoint 2013/2016.
Here we will use only SharePoint Rest API, HTML, and CSS code to create the custom announcement web part in SharePoint.
Here the announcements are stored inside a SharePoint custom list named as “Announcement” and it has a few columns like:
- Title
- Image Column
The list also has some data like below:
Now, create a SharePoint web part page and add a script editor web part into the web part page. Then paste the below code inside the script editor web part.
<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>
<script type="text/javascript">
var ItemID = 0;
var slidInd = "";
var ids = [];
var site = "https://pikasha12.sharepoint.com/sites/DLH/";
$(document).ready(function () {
var settings = {
url: site + "_api/web/lists/getByTitle('Announcements')/items?$select=ID&$Orderby=Created desc&$top=5",
type: "GET",
headers: { "Accept": "application/json;odata=verbose" }
}
$.ajax(settings).done(
function (data) {
//script to build UI HERE
slidInd = "";
$.each(data.d.results, function (index, value) {
ItemID = value.ID;
ids.push(ItemID)
});
getImage();
});
});
var htmls = [];
function getImage() {
$.each(ids, function (index, value) {
var settings = {
url: site + "_api/web/lists/getByTitle('Announcements')/items('" + value + "')/FieldValuesAsHtml?$select=Title,Image_x0020_Column",
type: "GET",
headers: { "Accept": "application/json;odata=verbose" }
}
$.ajax(settings)
.done(function (response) {
var img = $(response.d.Image_x005f_x0020_x005f_Column);
slidInd = '';
slidInd = '<div class="media row"><div class="col-xs-4"><a href="https://pikasha12.sharepoint.com/sites/DLH/Lists/Announcements/DispForm.aspx?ID=' + value + '" class="pull-left"><img class="media-object" src="' + img[0].innerHTML + '"alt="amazing" height="100" width="100"></a></div><div class="col-xs-8"><h4 class="media-heading">' + response.d.Title + '</h4></div></div>';
$(".annoucement-items").append(slidInd);
})
.error(function () {
});
htmls.push(slidInd);
});
}
</script>
<style>
.media {
/* border: 1px solid #0797c2; */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background: #790707;
color: white;
/* font-size: 16px; */
}
.media h4 {
font-size: 14px;
}
.ms-rtestate-field h4, h4.ms-rteElement-H4 {
line-height: 1.6;
color: #dedede;
}
.media img:hover {
transform: scale(1.5);
}
</style>
<div class="row">
<div class="col-xs-6">
<h2 class="pull-left">Latest Announcements</h2>
</div>
</div>
<div class="row">
<div class="col-xs-3 annoucement-items">
</div>
</div>
Once you Save the above code, you can see the SharePoint custom announcement web part like below:
You may like following SharePoint tutorials:
- Google Pie Chart in SharePoint Online (Step by Step tutorial)
- SharePoint CSS and JavaScript Examples
- Change default list view style using CSS in SharePoint Online/2016/2013
- 3 Different ways to Change Site Collection URL in SharePoint 2013/2016 using PowerShell
- Left Navigation or Quick Launch Customization or Branding using CSS in SharePoint Online/2013/2016
- Get Current User Details Using JavaScript Object Model (jsom) and jQuery in SharePoint2013/2016/Online
- Get Middle East prayer timing using JavaScript Code
- Display Task List data in a table using SharePoint REST API and filter by status column
- Get current weather using JavaScript in SharePoint Online/2013/2016
- Change language settings SharePoint online
- Add Google ReCaptcha in SharePoint Online or SharePoint 2013/2016/2019 (Step by Step tutorial)
- Create SharePoint Quote of the day web part using Rest API and Bootstrap
- How to get documents from document library in SharePoint using Rest API
Hope this SharePoint article helps to learn how to create a SharePoint custom announcement web part using CSS, HTML, and Rest API in SharePoint 2013/2016/Online.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).
Thank you so much sir, it helps
Thanks for your comment. Keep reading my articles.
It doesnt work. Anything i missed out?
I created a list with Title column, Modified date, and image
and change the sharepoint link
I want to be able to do this for 3 different sharepoint lists but they are compiling all the items in one list. I have changed the name of “annoucement-items” for each one of the lists. How can I seperate them?