Oracle JET Custom Component for displaying Notifications

 

When this guy rings the door bell, its one of the best notification

                                                                                              -Me. Again.

Yes, pizzas are tasty and they are one of the few things that can't be waited for. Our monthly salary too, just can't wait for a month to have it :). Be it pizza or salary, we are notified when they arrive. Such notifications can never be missed. And yes, notifications should never be missed, as they have something special, not all the time though, like pizzas and salary... again.

Web applications are a platform, for executing things from Salary payment till connecting with friends and many more. Be it developers or users of the web application, we are a team, always. Within a team, notifications play a important role. May be a thought for outing, or cinema, everyone in a team, friendly enough, should be present. This presence is only possible, when one gets notified, thus Notifications. Let's see how we actually implement a notification feature using Oracle JET framework.

Notifications happen between two parties, one publishes and the other subscribes. To mimic this, we have a custom component here, which is a subscriber, and a Parent HTML, index.html, which publishes notifications. 

Rather than going through each line in the code, lets jump into the core.

The View Model: main.js

Above method raises notifications. It does only two things, create a new object, which is a notification, and adds it to a list, list of notifications

Adding to the list means publishing a notification, thus the publisher is done. Next thing, the other party, consumer, should be signaled about this new notification. This is what done in the above method. The computed function listens for any change to the list, and triggers/dispatches the signals. Signal carries, as usual, a payload of information. Here the payload contains list of notifications

The View: index.html

The HTML of the custom component

The generated notification list is fed into the custom component, as the attribute "notftcn-obj" value. Other attributes are meant to trigger methods to delete a single or all notifications

The Custom Component

Property defined for the custom component

The signal received and acted upon, the Custom Component's View Model

Once signaled, who gets the signal? Nothing but our custom component. This custom component has a attribute defined, whose value is of type object, and a property in that object is this signal. Thus the signal is just one instance, a singleton, which is shared between these 2 parties, the Parent View Model and the Custom Component's View Model.

Running the Application

Right top corner we see the Custom Component rendered. Buttons are from the index.html page

The arrangement in the index.html

Clicking on the buttons, and the clicking on the bell icon, the list is presented in an <oj-list-view>

And when we have all in place, and finally serve the application, we can see three buttons. They are the source of notifications. In real world apps we may have many other things generating notifications, but here we see buttons mimicked as notification generators.  As buttons get clicked, we can see the notification count gets updated, and even the bell gets animated. When clicked on the bell, we see the notifications listed , and user can go ahead deleting a single or all notifications.

Above methods do simple things. They just dispatch custom events, and these dispatched events are caught and addressed at the index.html page.

Thus, we also saw how Signals and Custom Events help establish two way communication, between the Parent, index.html, and the child, the custom component

Next step, is just we get the application downloaded or checked out. Below is the repo link. Please build the application accordingly, as node_modules and web are not part of the folder.

https://github.com/pandurangsp/S_JET_Notification_Component

More details here

https://github.com/pandurangsp/S_JET_Notification_Component/blob/main/README.md

Comments and suggestions are whole heartedly welcome :)