Glue42 Notification Service

JavaScript

Raising Notifications from a Web App

Note that the Glue42 Notifications API uses interfaces extending the interfaces of the DOM Notifications API. The documentation below describes the specifics of the Glue42 Notifications API. For full details on the DOM Notification API interfaces, see the respective DOM documentation for Notification, NotificationAction, NotificationOptions and Event.

The Notifications API is accessible through the glue.notifications object.

To raise a notification from your application, use the raise() method of the API. The method accepts as an argument a required Glue42NotificationOptions object with settings for the notification you want to raise:

const notificationOptions = {
    title: "New Trade",
    body: "VOD.L: 23 shares sold @ $212.03",
    actions: [
        {
            action: "openClientPortfolio",
            title: "Open Portfolio"
        }
    ]
};

// Raising a notification.
const notification = await glue.notifications.raise(notificationOptions);

Raising Notifications

Notification Options

The Glue42NotificationOptions object extends the standard web NotificationOptions object with three additional properties - actions, title and clickInterop.

Notification Click

Standard Click Handler

The raise() method returns a Glue42Notification object. You can use its onclick property to specify a callback that will be invoked when the user clicks on the notification:

const notificationOptions = {
    title: "New Trade",
    body: "VOD.L: 23 shares sold @ $212.03",
    actions: [
        {
            action: "openClientPortfolio",
            title: "Open Portfolio"
        }
    ]
};

const notification = await glue.notifications.raise(notificationOptions);

notification.onclick = () => console.log("Notification was clicked.");

Interop Click Handler

You can also use the clickInterop property of the Glue42NotificationOptions object to specify an Interop method that will be invoked when the user clicks on the notification. For instance, another application has registered an Interop method:

const methodName = "HandleNotificationClick";
const handler = (args) => {
    console.log(JSON.stringify(args));
};

glue.interop.register(methodName, handler);

To use this method for handling the notification click, define an InteropActionSettings object your app and assign it as a value to the clickInterop property of the notifications options object:

const interopSettings = {
    // The only required property is the method name.
    method: "HandleNotificationClick",
    arguments: {
        name: "Vernon Mullen",
        id: "1"
    }
};

const notificationOptions = {
    title: "New Trade",
    body: "VOD.L: 23 shares sold @ $212.03",
    actions: [
        {
            action: "openClientPortfolio",
            title: "Open Portfolio"
        }
    ],
    clickInterop: interopSettings
};

const notification = await glue.notifications.raise(notificationOptions);

Notification Actions

You can create action buttons for the notification. When the user clicks on an action button, the specified callback(s) will be invoked.

Actions

To define action buttons, use the actions property of the Glue42NotificationOptions object when creating a notification. The actions property accepts an array of Glue42NotificationAction objects:

const notificationOptions = {
    title: "New Trade",
    body: "VOD.L: 23 shares sold @ $212.03",
    actions: [
        {
            action: "callClient",
            title: "Call Client"
        },
        {
            action: "openClientPortfolio",
            title: "Open Portfolio"
        }
    ]
};

Note that the action buttons in a Glue42 Notification are limited to two, as the web browsers currently support a maximum of two actions.

Below you can see how to create standard notification actions (actions that do not require Interop functionality) as well as Interop actions.

Standard Actions

Besides all properties of a standard web Notification object, the Glue42Notification object has an additional onaction property. You can use this property to assign a callback that will be invoked when the user clicks an action button in the notification. The callback receives an ActionEvent object which extends the standard web Event object as a parameter. The ActionEvent object has an action property that holds the name of the triggered action.

const notificationOptions = {
    title: "New Trade",
    body: "VOD.L: 23 shares sold @ $212.03",
    actions: [
        {
            action: "openClientPortfolio",
            title: "Open Portfolio"
        }
    ]
};

const notification = await glue.notifications.raise(notificationOptions);

notification.onaction = function (actionEvent) {
    if (actionEvent.action === "openClientPortfolio") {
        console.log(`Action button in notification "${this.title}" has been clicked.`);
    };
};

Interop Actions

The Glue42NotificationAction object extends the standard web NotificationAction object by adding an interop property which you can use to invoke Interop methods when the user clicks an action button in the notification.

First, register an Interop method in another application:

const methodName = "HandleNotificationClick";
const handler = (args) => {
    console.log(JSON.stringify(args));
};

glue.interop.register(methodName, handler);

After that, in your app define an InteropActionSettings object and assign it as a value to the interop property of the action object in the actions array:

const interopSettings = {
    // The only required property is the method name.
    method: "HandleNotificationClick",
    arguments: {
        name: "Vernon Mullen",
        id: "1"
    }
};

const notificationOptions = {
    title: "New Trade",
    body: "VOD.L: 23 shares sold @ $212.03",
    actions: [
        {
            action: "openClientPortfolio",
            title: "Open Portfolio",
            interop: interopSettings
        }
    ]
};

const notification = await glue.notifications.raise(notificationOptions);

Advanced Usage

Glue42 Routing

Glue42 Routing enables customization of GNS notifications delivery and display. Glue42 Routing can be applied at the source, category and notification level and is overridden in the same order, so that the Glue42 Routing in a notification overrides the one specified in the notification category, which overrides the one specified in the notification source.

There are 4 customizations you can make:

  • specify an Interop handler method which will be called by the GNS Desktop Manager before passing a notification to GNS clients (UIs). The GNS Desktop Manager will call this method and if any application returns true, the GNS Desktop Manager will assume that the application will handle the notification and will not pass it to clients.
  • specify an Interop popup method which should be called by GNS clients instead of displaying their own notifications;
  • specify an Interop detail method which should be called by GNS clients instead of displaying their own notification details view;
  • specify a list of Glue42 Actions associated with the notification which GNS clients can use to display buttons or a context menu with the actions applicable to a notification. Each action is tied to an Interop method which will be called when the action is executed.

Using Notifications in a Workflow

A mortgage specialist might be entering information about a mortgage in an application. This will create a server-side notification that in turn will be pushed to a mortgage support team. Then, the notification will be received by a team member, who will click on it and the "Mortgages" application will be automatically opened. The team member can then review and validate the information entered by the mortgage specialist.

All this becomes possible by assigning an Interop detail routing method to the notification so that the GNS Desktop Manager will call this method (registered by the "Mortgages" app) instead of showing the notification details.

Handler, Popup and Detail Methods

Handler Method

Signature:

bool HandleNotification(Notification notification)

If present, the method will be called by the GNS Desktop Manager when a notification arrives. If the method returns true (meaning "handled"), the notification will not be passed to generic GNS Clients (i.e. UIs).

Popup Method

Signature:

void PopupNotification(Notification notification)

Used to define a method which GNS Clients should call to display the notification as a popup/toast.

Detail Method

Signature:

void ShowNotificationDetails(Notification notification)

Used to define a method which should be called by GNS Clients to display the details of a notification (instead of doing that themselves). It can only be called from a GNS Client (UI/Viewer), either by clicking on the popup (toast) or double-clicking a notification in a notification list/history window.

Actions

A list of actions can be applied to a notification group, notification source or a particular notification instance. An action has a human-readable name, and a method name, which will be called when the action is performed by the user. The method parameters are macro-enabled and can cite the notification properties.

Generic GNS clients will merge the actions defined in the:

  • notification category
  • notification source
  • notification itself

The merging will be done in that order of precedence.

The GNS clients can then present the actions to the user in a suitable way (e.g., as hover buttons or a context menu). When a user clicks on an action, the GNS client will execute the corresponding Interop method. Actions can be optionally grouped in a pattern, which may be used by a GNS client to merge the actions under a menu tree or to group the actions in clusters.

const notificationOptions = {
    title: "Critical Alert",
    body: "Your computer will be restarted in 30 seconds",
    actions: [{ 
        action: "restart",
        description: "Initiate system restart.",
        title: "Restart"
    },
    { 
        action: "postpone",
        description: "Postpone system restart.",
        title: "Postpone"
    }]
};

await glue.notifications.raise(notificationOptions);

Custom Notification UI

You can change the default notification UI by changing the GNS application configuration:

  • if you are running in local mode, go to %LOCALAPPDATA%\Tick42\GlueDesktop\config\apps\gns.json;
  • find the GNS application;
  • add a customProperties section (or update the existing one):
"customProperties": {
    "toastUrl": "https://enterprise-demos.tick42.com/gns-custom-toasts/",
    "width": 250,
    "height": 125,
    "count": 3
}

Custom Notification