Create custom announcement web part using Rest API in SharePoint

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:

sharepoint custom announcement web part
sharepoint online custom announcement web part

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:

sharepoint custom announcement web part
sharepoint custom announcement web part

You may like following SharePoint tutorials:

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.

  • 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?

  • >