How to Display Browser Popup Notifications from Client-Side Code in Creatio

When using Creatio, you’ll often see browser notifications when certain actions occur. In this article, we’ll look at how to display your own popup messages from client-side code in Creatio. The end result will look like the following:

Creatio has a module that you can re-use to provide this sort of functionality. This module is called DesktopPopupNotification. To use it, we’ll include two parts. First we’ll have it check if the user has already granted permission for Creatio to display popup notifications and if not, we’ll ask for permission again. Second, we’ll display the notification.

To use the DesktopPopupNotification module, we’ll need to add it to the modules list at the top of the code. In this article, we’ll be adding this to the ContactPageV2, so it would look like this at the top:

define("ContactSectionV2", ["DesktopPopupNotification"], function(DesktopPopupNotification) {

Now, we’ll add an override to the page’s init function to ask for permission to display browser notifications. That will look like this:

init: function() {
    this.callParent(arguments);
              	
    if (DesktopPopupNotification.getPermissionLevel() !== DesktopPopupNotification.PermissionType.GRANTED) {
        DesktopPopupNotification.requestPermission(); 
    }
}

That code checks to see if we’ve been granted permissions and if not, it will request it again. Now we’ll add the code to display the notification. We’ll provide a config with the following:

• id: Some unique value. We’ll get this value if the user clicks the notification (see onClick below) so it could be the record Id value or something
• title: The title of the notification
• body: The actual description text of the notification
• icon: An icon to display in the notification
• onClick: A function to handle if the user clicks the notification
• ignorePageVisibility: (default true), control if the notification shows only if the sending page is visible to the user
• timeout: (default 5000) The number of milliseconds to display the notification before closing
•  scope: The scope, used for callbacks like onClick

For our example, I’ll add an image to the images on ContactPageV2 named UsrIcon. With that icon in place, the code to send the notification looks like this:

if (DesktopPopupNotification.getPermissionLevel() !== DesktopPopupNotification.PermissionType.GRANTED) {
    return; 
}
              	
var config = {
    id: 123456,
    title: "Test notification",
    body: "This is a test notification",
    icon: Terrasoft.ImageUrlBuilder.getUrl(this.get("Resources.Images.UsrIcon")),
    onClick: this.onDesktopNotificationClick,
    ignorePageVisibility: true,
    timeout: 5000,
    scope: this
};

DesktopPopupNotification.showNotification(config);

When that code runs, we’ll get the notification in the image at the start of this article, assuming the user has given Creatio permission to display browser notifications.