Introduction

This document gives a complete description of how to create a notification widget using JSON. A notification widget is simply a user control that can be placed on a master page and will display the top 3 (or any other configurable number) notifications/alerts from the application. If there are some alerts that need to be brought into notice of the user while the user is performing an action on any page, it can be done through the widget. The widget keeps on refreshing after a specified interval, let’s say 5 seconds. A notification widget image is displayed below. Here it shows the three latest alerts, and it will keep on refreshing every 5 seconds, and this interval is configurable. The widget can be enabled or disabled as and when required by using a configurable property.

Advantages of using JSON over XML

JSON was used instead of XML as JSON is much simpler than XML. JSON has a much smaller grammar and maps more directly onto the data structures used in modern programming languages. JSON is more human-readable than XML. JSON is processed more easily because its structure is simpler. JSON, being a simpler notation, needs much less specialized software. In the languages JavaScript and Python, the JSON notation is built into the programming language; no additional software is needed at all. In other languages, only a small amount of JSON-specific code is necessary.

Creating the user control

1. The user control has a simple panel placed in a rounded corner extender. The panel has an image which shows up when the widget is refreshing.
2. The control needs to have a JavaScript function which calls another function LoadWidgetContent after the refresh interval stated in the config file.
3. LoadWidgetContent is a JavaScript function which is placed in a common JavaScript file.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="NotificationWidget.ascx.cs"
    Inherits="Maaxxio.Foundation.UI.UserControls.NotificationWidget" %>
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
</asp:ScriptManagerProxy>

<script src="/foundation/javascript/Widget.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function() 
{
    var isEnabled = false;
    isEnabled = <%= this.IsWidgetEnabled.ToString().ToLower() %>;

    if(!isEnabled)
        return;
    
    LoadWidgetContent();
    // Add the method call at a regaular interval.
    $(document).everyTime(<%= this.RefreshInterval %>, function() {LoadWidgetContent();});
});
</script>

<asp:Panel ID="PanelUC" runat="server" Height="" 
        Width="150px" BackColor="Silver" BorderColor="#333333">
  <div id="notificationDiv">
    <asp:Image ID="notificationLoadingImage" runat="server" 
           ImageUrl="/foundation/images/shared/indicator.gif" />
    <span>Loading notifications...</span>
  </div>
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" 
       runat="server" TargetControlID="PanelUC">
</ajaxToolkit:RoundedCornersExtender>

The code-behind gets the RefreshInterval and IsWidgetInterval properties from the config file. These properties are used in the JavaScript function stated above.

public partial class NotificationWidget : System.Web.UI.UserControl
{
    /// <summary>
    /// Returns true if Widget is enabled in Config file.
    /// </summary>
    protected bool IsWidgetEnabled
    {
        get
        {
            bool isEnabled = false;
            
            if (Boolean.TryParse(SystemUtilities.GetConfigValue(
                   "NotificationWidgetEnable"), out isEnabled) == true)
            {
                return isEnabled;
            }
            else
            {
                return false;
            }
        }
    }

    /// <summary>
    /// Refresh Interval - returns Widget Refresh Interval in MiliSeconds.
    /// </summary>
    protected int RefreshInterval
    {
        get
        {
            int refreshInterval = 5;

            if (SystemUtilities.GetConfigValue("NotificationWidgetTimer") != null)
            {
                Int32.TryParse(SystemUtilities.GetConfigValue(
                      "NotificationWidgetTimer"), out refreshInterval);
            }

            return refreshInterval * 1000;
        }
    }

The common JavaScript file contains the function LoadWidgetContent. The LoadWidgetContent function uses jQuery’s ajax method. In this method, the type is specified as POST and the URL contains the JSON Web Service. So this method calls the Web Service.

function LoadWidgetContent() {
    $.ajax
    (
        {
            type: "POST",
            url: "/foundation/Notifications/WidgetService.asmx/GetNotificationsForWidget",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: FillWidgetDiv, 
            error: ajaxFailed 
            
        }              
    );
}

WidgetService.asmx contains a webmethod GetNotificationsforWidget() which gets the latest three notifications to be displayed in the widget.