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.
Create SharePoint custom announcement web part
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?
everytime I refresh the page in my browser the order of the announcements come back different. Is there something wrong with the orderby ??