Post
Ask Question

Announcements Web Part With Rich Looks

Here, you are going to learn how to create a customized look for announcements web part like the below sample.



Here are the features of this web part.

  1. Displays only the active announcements in an order.
  2. Only minimal and important details are displayed in the web part. The rest of the details are displayed in a modal pop up.
  3. Displays only five items in the web part and “view all” link will redirect to the announcement list view which is created to display only the active announcement
  4. The modal popup will be displayed when the announcement title is clicked in the web part.

Steps to create the announcement web part using Javascript

  1. Create an announcements list and add the fields which you want (In this case, the below are my columns).

  2. Once the list is created, add some new announcements (the code will display only the active announcements).


  3. Post adding the announcements, create a new view for displaying only the active announcement. For this, you can use the “expires” column to extract only the active announcement. While creating a view, filter the item by using the below condition and sort the “expires” column by ascending order , so that the web part will display the announcement in an order.

  4. Once the view is created, you are ready to code the announcement list to get the data and display it in the page wherever you want.

  5. Add the content editor/ script editor web part to place out SP script in order to get the data from the announcement list view.

  6. Place the below code in the script editor and save the page, after configuring the list name, view name, site collection, and site URL, save the page. If everything is configured as mentioned, you will get the same announcement view with rich look and feel like “figure 1”.
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5.     <style>  
    6.         .homeTabContainer {  
    7.             max-width: 480px;  
    8.             min-width: 480px;  
    9.             height: 100%;  
    10.             background-color: #f2f2f2;  
    11.             padding-top: 10px;  
    12.             padding-bottom: 10px;  
    13.             padding-left: 10px;  
    14.             padding-right: 10px;  
    15.         }  
    16.           
    17.         .homeTabHead {  
    18.             color: white;  
    19.             width: 160px;  
    20.             list-style-type: none;  
    21.             background-color: #00A3A1;  
    22.             font-family: Segoe UI;  
    23.             text-align: left;  
    24.             padding: 6px;  
    25.             font-size: 25px;  
    26.         }  
    27.           
    28.         .homeTabContent {  
    29.             padding: 8px;  
    30.             background-color: white;  
    31.             font-family: Segoe UI;  
    32.             font-size: 13px;  
    33.             border-bottom: 1px dotted grey;  
    34.         }  
    35.           
    36.         .homeTabContent1 {  
    37.             padding: 6px 12px;  
    38.             background-color: white;  
    39.             font-family: "Segoe UI";  
    40.             font-size: 13px;  
    41.             text-align: right;  
    42.         }  
    43.     </style>  
    44.     <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js">  
    45.     </script>  
    46.     <script type="text/javascript" src="/sitecollection/site/_layouts/15/sp.runtime.js">  
    47.     </script>  
    48.     <script type="text/javascript" src="/sitecollection/site/_layouts/15/sp.js">  
    49.     </script>  
    50.     <script type="text/javascript" src="/sitecollection/site/_layouts/15/sp.ui.dialog.js">  
    51.     </script>  
    52.     <script>  
    53.         'use strict';  
    54.         console.log('entered into scripts');  
    55.         var context = SP.ClientContext.get_current();  
    56.         var web = context.get_web();  
    57.         var list = web.get_lists().getByTitle(‘Announcement List Name’);  
    58.         var view = list.get_views().getByTitle(‘Active announcement view name’);  
    59.         var listItemCount;  
    60.         var itemCollection;  
    61.         ExecuteOrDelayUntilScriptLoaded(initialize, 'sp.js')  
    62.   
    63.         function initialize() {  
    64.             console.log("entered into initialize for announcement");  
    65.             context.load(view);  
    66.             context.executeQueryAsync(onSucceedListLoad, onFailedListLoad);  
    67.         }  
    68.   
    69.         function onSucceedListLoad() {  
    70.             console.log("entered into onSucceedListLoad");  
    71.             var queryText = '<View><Query>' + view.get_viewQuery() + '</Query><RowLimit>5</RowLimit></View>';  
    72.             var camlQuery = new SP.CamlQuery();  
    73.             camlQuery.set_viewXml(queryText);  
    74.             itemCollection = list.getItems(camlQuery);  
    75.             context.load(itemCollection);  
    76.             context.executeQueryAsync(onSuceedCollectionLoad, onFailedCollectionLoad);  
    77.         }  
    78.   
    79.         function onFailedListLoad(sender, args) {  
    80.             console.log(args.get_message() + "\n" + args.get_stackTrace());  
    81.             alert("Sorry! Something went wrong" + "\n" + "Error occured while loading announcement list");  
    82.         }  
    83.   
    84.         function onSuceedCollectionLoad() {  
    85.             console.log("entered into onSuceedCollectionLoad");  
    86.             listItemCount = itemCollection.get_count();  
    87.             if (listItemCount === 0) {  
    88.                 console.log("entered into onSuceedCollectionLoad count 0");  
    89.                 $("[id=idAnnouncement]").append('<div class="homeTabContent"><div style="padding-bottom: 5px;">No new announcements found.</div></div>');  
    90.                 $("[id=idAnnouncementAll]").hide();  
    91.                 console.log("exit from onSuceedCollectionLoad count 0");  
    92.             } else {  
    93.                 console.log("entered into onSuceedCollectionLoad count not 0");  
    94.                 var itemEnum = itemCollection.getEnumerator();  
    95.                 while (itemEnum.moveNext()) {  
    96.                     console.log("entered into onSuceedCollectionLoad count not 0 while");  
    97.                     var announcement = itemEnum.get_current();  
    98.                     console.log('after get currtent');  
    99.                     var _id = announcement.get_item('ID');  
    100.                     var _Title = announcement.get_item('Title');  
    101.                     var _body = announcement.get_item('Body');  
    102.                     var _contact = announcement.get_item('Contact').get_lookupValue();  
    103.                     buildHTML(_Title, _body, _contact, _id);  
    104.                 }  
    105.             }  
    106.         }  
    107.   
    108.         function onFailedCollectionLoad(sender, args) {  
    109.             console.log(args.get_message() + "\n" + args.get_stackTrace());  
    110.             alert("Sorry! Something went wrong" + "\n" + "Error occured while loading list item");  
    111.         }  
    112.   
    113.         function buildHTML(_Title, _body, _contact, _id) {  
    114.             console.log("entered into build html");  
    115.             var _tempTitle = "'" + _Title + "'";  
    116.             var _content = '<div class="homeTabContent"><div style="padding-bottom: 5px;"><b>' + '<a href="#" onclick="openBasicDialog(' + _id + ',' + _tempTitle + ');" >' + _Title + '</a></b>' + '<br/></div><div class="AnnouncementContent" style="padding-bottom: 5px;">' + _body + '</div></div>';  
    117.             $("[id=idAnnouncement]").append(_content);  
    118.             console.log("exit from build html");  
    119.         }  
    120.   
    121.         function openBasicDialog(id, title) {  
    122.             console.log("entered into popup function");  
    123.             var _tempItem = list.getItemById(id);  
    124.             var options = {  
    125.                 url: ‘ /sitecollection/site / Lists / ListName / DispForm.aspx ? ID = '+id,  
    126.                 title: title  
    127.             };  
    128.             SP.UI.ModalDialog.showModalDialog(options);  
    129.             console.log("exit from popup function");  
    130.         }  
    131.     </script>  
    132.   
    133.     <head>  
    134.   
    135.         <body>  
    136.             <table cellspacing=1px style="width:100%">  
    137.                 <tr>  
    138.                     <!-- start of announcements -->  
    139.                     <td style="vertical-align: top;">  
    140.                         <div class="homeTabContainer">  
    141.                             <div class="homeTabHead">GPTS Announcements</div>  
    142.                             <div id="idAnnouncement">  
    143.                                 <!--Start of content -->  
    144.                                 <!--End of content -->  
    145.                             </div>  
    146.                             <div class="homeTabContent1" id="idAnnouncementAll">  
    147.                                 <div class="tabReadMore"> <a href="Active Announcement list view URL" target=_balnk style="text-decoration: none;">view all.. </a> </div>  
    148.                             </div>  
    149.                         </div>  
    150.                     </td>  
    151.                     <!-- end of announcements -->  
    152.                 </tr>  
    153.             </table>  
    154.         </body>  
    155.   
    156. </html>  

Hope this works for everyone. Please feel free to reach me in any case.


Similar Articles