Create custom announcement web part using Rest API in SharePoint Online/2013/2016

This SharePoint tutorial, we will discuss how we can 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 stores inside a SharePoint custom list name as “Announcement” and it has 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 Swain

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).