Wisej Extensions: Get started with the Desktop Notification Feature

16 Sep 2020
Silviu Berce
wisej, web

Desktop notifications can be a very useful functionality for your web application.

You can use desktop notifications when your web application should inform the user about any updates from your system.

Take a web shop application for example: When a new order is placed, your web shop administrators needs to process the order as quickly as possible. Instead of asking the web shop administrators to manually check for new orders, you can use the Wisej desktop notification extension. This way, a user will be directly notified as soon as a new order has been created - while the browser is minimized.

With Wisej it's very easy to implement the above scenario.

In the following sample, we have two web pages: one page for the regular user, to place an order, and one for the administrators, to confirm and process the order.

In order to use the Notification control, a reference to Wisej.Web.Ext.Notification has to be added.

The Login form (allows user to choose the user type)

 public partial class LoginForm : Form
 {
    private string userName;

    public LoginForm()
    {
       InitializeComponent();
    }

    public string UserName
    {
       get
       {
          return userName;
       }

       set
       {
          userName = value;
       }
    }

    private void ButtonLoginAsUSer_Click(object sender, EventArgs e)
    {
       this.UserName = Program.USER;
       this.Close();
    }

    private void ButtonLoginAsAdmin_Click(object sender, EventArgs e)
    {
       this.UserName = Program.ADMIN;
       this.Close();
    }
 }

Create Order form (for web shop clients)

 public partial class CreateOrderForm : Form
 {
   private List<Order> MyWaitingOrders = new List<Order>();
   private List<Order> MyConfirmedOrders = new List<Order>();
   public CreateOrderForm()
   {
     InitializeComponent();
   }

   private void Button1_Click(object sender, EventArgs e)
   {
     int quantity = Convert.ToInt32(numericUpDown1.Value);
     var order = Program.Orders.CreateOrder(quantity);
     MyWaitingOrders.Add(order);
     AlertBox.Show($"Order #{order.OrderId:00000} @ {order.OrderDate.ToShortDateString()} {order.OrderDate.ToShortTimeString()}. Quantity: {order.Quantity}");
   }

   private void Timer1_Tick(object sender, EventArgs e)
   {
     foreach(var order in MyWaitingOrders)
     {
       if (order.Confirmed)
       {
         notification1.Show("Order Confirmed", $"Order #{order.OrderId:00000} @ {order.OrderDate.ToShortDateString()} {order.OrderDate.ToShortTimeString()} confirmed");
         MyConfirmedOrders.Add(order);
       }
     }
     MyWaitingOrders.RemoveAll(o => o.Confirmed);

     foreach(var order in MyConfirmedOrders)
     {
       if (order.Processed)
       {
         notification1.Show("Order Processed", $"Order #{order.OrderId:00000} @ {order.OrderDate.ToShortDateString()} {order.OrderDate.ToShortTimeString()} processed");
       }
     }
     MyConfirmedOrders.RemoveAll(o => o.Processed);
   }
 }

Confirm Order form (for web shop administrators), and Order Control (custom UserControl with order details and actions)

 public partial class ConfirmOrderForm : Form
 {
   public ConfirmOrderForm()
   {
     InitializeComponent();
   }

   private void Timer1_Tick(object sender, EventArgs e)
   {
     if (Program.Orders.NotifyNewOrders)
     {
       notification1.Show("New Orders added", "Please confirm the new orders");

       var newOrders = Program.Orders.List.Where(o => o.NotificationSent == false);
       foreach (var order in newOrders)
       {
         order.NotificationSent = true;
         OrderControl orderControl = new OrderControl();
         orderControl.Order = order;
         flowLayoutPanel1.Controls.Add(orderControl);
         Application.Update(flowLayoutPanel1);
       }
     }
   }
 }

Let’s see it in action:

Open two browser windows. In one window, log in as a user - in the other window, log in as a web shop admin.
As a user, create a new order. A notification should be displayed to the web shop admin, but the web browser blocks the notification by default. The user must allow the browser to display notifications for the web app. Browser notification settings are then saved for the web app URL and notifications will be displayed next time.
The web shop admin browser window can be minimized, and the user can create a new order. The notification is now automatically shown to the web shop administrator.