Display Alert in SharePoint home page from announcement using Jquery

Announcements or a news that requires immediate attention and viewership. Think about a weather alert on a weather site or a market crash on a business news site. SharePoint Announcement lists serves the purpose of providing similar information.

You have a new director, the company reached a new milestone, someone from the company left, all these events require some sort of immediate recognition. All the users should be informed about these events. SharePoint announcement does have a similar nature of providing a platform to add all these events which can be controlled with a life so that after certain date they will be automatically removed from the site.

In this article we will discuss how to bring a recent announcement at the top of SharePoint homepage and highlight it in a way so that it stands out from the rest of the content and grabs users attention.

Process

  1. Create an Announcement list name it Announcement
    1. This will be the announcement list to add any new news or announcement that will be displayed in the home page.
    2. Add an announcement to display in the home page

      NewAnnouncement
      Create a new announcement list
  2. Find the location where you want the announcement to appear.
    1. Open your home page in a browser that you use.
    2. press f12 key from your keyboard that will open up the developer view in the browser. Select the element where you want the announcement to appear.
    3. I choose s4-titlerow for my home page. I will display the announcement here.

      2018-01-02 (1)
      Find the location element where you want the announcement to appear
  3. Create an HTML file store it in a secured location Shared Documents which should be readable by all the users of the site collection.
    1. We use Rest api to get the most recent announcement and read the content
      1. $.ajax({
        url: “https://theinventor.sharepoint.com/_api/web/lists/getbytitle(‘Announcement’)/items?$top=1&$orderby=Id desc”, // ur site url goes here
        type: “GET”,
        headers: {
        “Accept”: “application/json;odata=verbose”
        }

        2018-01-02 (2)
        Add html file and store it in a document library
  4. Use some CSS to give the announcement block some branding that helps it to standout from the rest of the content
  5. Use Jquery to limit the time of the alert to stay on the page so it goes away after a number of seconds.
  6. Following is the full code that you can just paste in the HTML file

[code language=”html”]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Recent Announcement</title>

<script type="text/javascript">
$(document).ready(function () {
  /* get announcement */
    $.ajax({
 url: "https://theinventor.sharepoint.com/_api/web/lists/getbytitle(‘Announcement’)/items?$top=1&$orderby=Id desc", /* site url goes here */
 type: "GET",
 headers: {"Accept": "application/json;odata=verbose"},
success: function(data) {
$.each(data.d.results, function(index, item) {
/* append the announcement content to the title row*/
$(‘#s4-titlerow’).append(‘
<div id=alertannouncement>
<div class="ann_body">’+item.Body+'</div>
<span title="Hide Alert" class="close_announcement"></span></div>

‘);
})
},
error: function r(xhr) {
alert("error:" + JSON.stringify(xhr));
}
});

/*end announcement*/ 

/*function that will hide the announcement from the home page */      

$(document).on(‘click’, ‘.close_announcement’, function() {
$(this).parent().remove();
});

</script>

<style type="text/css">

/* the css for the announcement*/
#alertannouncement {
background: #EDF3F9;
border: 1px solid #9ECDE0;
width: 1000px;
margin: 0px auto;
color: black;
padding: 5px;
font-size: 16px;
font-style: italic;
position:absolute;
left: 25%;
z-index: 1000;}

/*CSS for the close button*/
.close_announcement {
background: teal;
width: 20px;
height: 20px;
position: relative;
float:right;
}
.close_announcement:after {
content: ”;
height: 20px;
border-left: 2px solid #fff;
position: absolute;
transform: rotate(45deg);
left: 9px;
}
.close_announcement:before {
content: ”;
height: 20px;
border-left: 2px solid #fff;
position: absolute;
transform: rotate(-45deg);
left: 9px;
}
.ann_body {
float: left;
}
</style>

</head>
<body></body>
</html>

[/code]

 

  1. Once the html file is ready with all the contents save it to a document library and save the link to the file.
  2. Go to your home page edit it and add a content editor web part , in the text link add the link to the html file just created and save the page.
    Edit page.png
    Edit the home page and add content editor webpart

    Add link to the html file.png
    Browse to the html file location and add to the content link
  3. Save your home page once you complete everything.  You should see the new announcement added just below the page title section.

    a
    Announcement alert with a option to hide
  4. You can remove the announcement from the page with the click on the close  button.
  5. This way we can have any urgent or emergency topics to be available for all the users and manage the content very effective way.
Advertisements

Leave a Reply

Your email address will not be published. Required fields are marked *