Send Broswer notification

Dear team,

 

Is there a way to send browser notifications (as seen in the image attached) through javascript? Our use case is that when our webservice receives a response from client, we use Message Channel Utilities to send message from server to client. When client receives the message, it should be able to trigger a browser notification

Like 0

Like

9 comments

Creatio does have a module named DesktopPopupNotification which you can use for this if you'd like. It can handle the request for permissions (if not yet granted by the user/browser) and create the notification and handle a click of the notification. Something like this:

// in init call:
DesktopNotification.requestPermission();
 
// to use, something like this:
var config = {
    id: someId,
    title: someTitle,
    body: someSubject,
    icon: this._getIcon(),
    onClick: this.onDesktopNotificationClick,
    ignorePageVisibility: true,
    timeout: 5000,
    scope: this
};
 
DesktopNotification.show(config);

Ryan

Ryan Farley,

 

Thank you for your response. I have implemented this and also permission to enable pop ups have been provided. yet, there is no notification. Could you please help?

 

Implementation details :

 

I have replaced communication panel and added dependency module - DesktopPopupNotification

 

In init() I have this line of code :

init() : function()

{

    DesktopPopupNotification.requestPermission();

 this.testfn();

},

 

    testfn: function()

                {

                    DesktopPopupNotification.requestPermission();

                    this.console.log("testfn");

                        var createConfig = {

                        id: "1234",

                        title: "Chat Notification",

                        body: "You have a new chat notification",

                        icon: {},

                        ignorePageVisibility: true,

                        onClick: Ext.emptyFn,

                        onClose: Ext.emptyFn,

                        onError: Ext.emptyFn,

                        onShow: "Sample",

                        timeout: 5000,

                        scope: this

                    };

                     

                    DesktopPopupNotification.showNotification(createConfig);

                    }

This doesnt seem to throw a notification

 

Thanks in advance

Shivani Lakshman,

The reason why it's not showing is likely because it doesn't have an icon defined. The DesktopPopupNotification module validates the config, if it doesn't have an icon defined, it exits out and doesn't show the notification (if you're in debug mode it shows this reason in the console, but that will only show if in debug mode)

If you want to add an icon to the images of your schema, let's say it has a name of UsrIcon, you can show it in the notification by adding this for the icon part of the config:

Terrasoft.ImageUrlBuilder.getUrl(this.get("Resources.Images.UsrIcon"))

Ryan

Shivani Lakshman,

In case you're still looking at this and having issues, I've written up the details for using the DesktopPopupNotification module here: 

https://customerfx.com/article/how-to-display-browser-popup-notificatio…

Ryan

Is there a Freedom UI way to do this? Some of those params would only work on Classic UI pages, such as how you would specify the icon for the notification.

It looks like this functionality broadly still works on Freedom UI pages, the only bit I haven’t yet figured out is how to reference images uploaded to the page schema for the icon. For onClick, an arrow function can be used (e.g. onClick: () => { console.log(“notification clicked”); } ) and therefore the scope isn’t required to be passed, since arrow functions establish `this` based on the scope where they are defined and variables like the `request` are available within the arrow function.

 

There did seem to be some weirdness in the behaviour of the Windows notification at least – while it showed and played the sound and could be clicked, it would quickly disappear from the notification centre as soon as the popup notification had finished (but not been clicked) so users would have to click the popup in the short time it was showing if they needed something to happen when clicking it. Maybe there’s a better way to call these notifications in Freedom UI though?

Harvey Adcock,

As Ryan mentioned a bit earlier, the only way to work with notifications in Freedom UI with the help of JS is DesktopPopupNotification. 
I've decided to override the Accounts_FormPage to get the notification on any Account page opening with the possibility of clicking on this notification. Here is an example:

 

		define("Accounts_FormPage", /**SCHEMA_DEPS*/["DesktopPopupNotification", "Accounts_FormPageResources"]/**SCHEMA_DEPS*/, 
	   function/**SCHEMA_ARGS*/(DesktopPopupNotification, resources)/**SCHEMA_ARGS*/ {
 
......................
 
	   handlers: /**SCHEMA_HANDLERS*/[
			{
				request: "crt.HandleViewModelInitRequest",
				handler: async (request, next) => {
					await next?.handle(request);
					const img = Terrasoft.ImageUrlBuilder.getUrl(resources.localizableImages.TheImageName);
					var config = {
						id: 123456,
						title: "Test notification",
						body: "This is a test notification",
						icon: img,
						onClick: DesktopPopupNotification.getIsSupported,
						ignorePageVisibility: true,
						timeout: 10000,
						scope: this
					};
					DesktopPopupNotification.showNotification(config);
				}
			}
		]/**SCHEMA_HANDLERS*/,

 

P.S. You can choose only public methods from DesktopPopupNotification (I've used getIsSupported)

Anhelina,

 

I can see that it's possible to use arrow function notation to run any code you want, for example I can open a specific page by doing the following in the onClick property:

{
	request: "Usr.TriggerNotification",
	handler: async (request, next) => {
		var config = {
			id: 123456,
			title: "New lead",
			body: "click here to open the task",
			icon: "https://www.creatio.com/sites/default/files/marketing/logo_creatio.svg",
			onClick: () => {
				const handlerChain = sdk.HandlerChainService.instance;
				handlerChain.process({
					type: "crt.UpdateRecordRequest",
					entityName: "Lead",
					$context: request.$context,
					recordId: "ec8a7868-7e4a-40cd-ac32-9c53ee459c07"
				});
			},
			ignorePageVisibility: true,
			timeout: 100000,
			scope: this
		};
 
		desktopNotify.showNotification(config);
	}
}

 

The main limitation I see currently with the DesktopPopupNotification is that the notification doesn't persist in the desktop's notification centre - it dissappears after around 8-10 seconds (regardless of what time is specified in the timeout, whether it's set to 0 or whether the property is omitted entirely). Maybe there's some property I haven't seen that makes the desktop notification persist?

It seems my above comment may have been resolved in 8.1.3 or 8.1.2, as now I can generate notifications that never disappear from the Windows notification centre using a timeout value of -1, and other timeout values also work as expected. If the property is omitted or set to 0, it defaults to around 7 seconds.

Show all comments