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.

ABOUT THE AUTHOR

Ryan Farley

Ryan Farley is the Director of Development for Customer FX and creator of slxdeveloper.com. He's been blogging regularly about SalesLogix, now Infor CRM, since 2001 and believes in sharing with the community. His new passion for CRM is Creatio, formerly bpm'online. He loves C#, Javascript, web development, open source, and Linux. He also loves his hobby as an amateur filmmaker.

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Join our mailing list to receive the latest Infor CRM (Saleslogix) and Creatio (bpm'online) news and product updates!

You have Successfully Subscribed!