Introduction

After really a long gap of almost 8 years I am writing this blog and sharing my experience of using FLP notification service in SAPUI5. Hope this will help my fellow community members in some of the difficult situations the may face.

Notifications are ubiquitous in technical arena. It not only makes the user experience best of its kind, but at times, a right notification may make your life much easier.

In this blog, we will see how we can enable notifications in BTP Launchpad service and send the notifications from SAPUI5 applications.

A special thanks to @mariusobert for writing such an excellent introductory blog Sending Notifications from SAP BTP Applications to the SAP Fiori Launchpad that inspired me to try the notification service with SAPUI5 and @enric101 for explaining the notification service using Postman in his blog Send push notification to SAP BTP Launchpad via HTTP .

Having said that, let us begin the journey.

Groundwork

Setup BTP Launchpad Service

Notifications can be sent to SAP Portal Service and SAP Launchpad Service. These services should be provisioned and setup in Business Technology Platform (BTP).

If you have not done it before, refer tutorial Create Your First Launchpad Site

Enable Notification

Enable the Notifications settings in Site Manager – Settings.

Keep following Information handy to create destinations in BTP Destinations

• Host
• OAuth 2.0 Client ID
• Client Secret
• Token Endpoint

Enable Notification Settings

Setup a destination in BTP Destinations

Create notification destination (OAuth2ClientCredentials) in BTP with following details.

OAuth2ClientCredentials – Destination in BTP

Enable Show Notifications in Launchpad site

Go to Site setting of FLP site that you created and turn Show Notification to true.

Integration of Notification service in SAPUI5

As the ground work is now completed, we can move to the next step. In this step we will learn how to integrate the notification service in SAPUI5.

This step can be further sub-divided into following steps:

1. Publish Notification Type.
2. Configure the destination in xs-app.json
3. Consume Notification service from SAPUI5.

Let us follow above steps one by one.

Publish Notification Type:

Before sending any notification from SAPUI5, notification type must be published. This can either be setup by administrator or developer. This is generally controlled by Support admins or Business admins and separate application can be created for them using the same principles.

For the purpose of this blog, I will be using Postman HTTP client to create notification types. You can refer Send push notification to SAP BTP Launchpad via HTTP

You can also refer Notification Properties as mentioned in the Developing Cloud Foundry Applications With Notifications

Two important steps to perform:

Fetch the X-CSRF-TOKEN by adding x-csrf-token = fetch in request Headers

Make a POST call to NotificationTypes along with the payload of service

We will be creating the REQUISITIONS notification types. You can refer the following JSON payload.

{
    "NotificationTypeKey": "REQUISITIONS",
    "NotificationTypeVersion": "0.1",
    "Templates": [
        {
            "Language": "en",
            "TemplatePublic": "Requisitions",
            "TemplateSensitive": "Requisition Sensitive Info",
            "TemplateGrouped": "Purchase Requisitions",
            "Subtitle": "Requisition Approval for {req_no} for {supplier_name}"
        }
    ]
}

Execute the NotificationTypes service and the notification type will be published. This notification type can be later used to send the notification from SAPUI5.

Configure destination in xs-app.json

Configure the destination usage in xs-app.json file of SAPUI5 module

{
        "source": "^/v2/(.*)$",
        "csrfProtection": false,
        "authenticationType": "xsuaa",
        "destination": "SAP_Notifications"
},

Send notifications from SAPUI5

For simplicity, I have created a button in SAPUI5 project and sending the notification on click of button. The payload is fixed, however, it can be dynamic using models in SAPUI5.

Following code is written on the press action of the button.

sendNotification : function(oEvent){
    var appId = this.getOwnerComponent().getManifestEntry("/sap.app/id");
    var appPath = appId.replaceAll(".", "/");
    var appModulePath = jQuery.sap.getModulePath(appPath);
    var xsrfUrl = appModulePath + "/v2/NotificationType.svc/NotificationTypes";
    var notificationUrl = appModulePath + "/v2/Notification.svc/Notifications";
    var token;
	var oPostData = {
					"OriginId": "NA",
                    "NotificationTypeKey": "REQUISITIONS",
                    "NotificationTypeVersion": "0.1",
                    "Priority": "High",
                    "Properties": [
                        {
                            "Key": "req_no",
                            "Language": "en",
                            "Value": <replace with Requisition Number>
                            "Type": "String",
                            "IsSensitive": false
                        },
                        {
                            "Key": "supplier_name",
                            "Language": "en",
                            "Value":  <replace with Supplier Name>
                            "Type": "String",
                            "IsSensitive": true
                        }
                    ],
                    "Recipients": [
                        {
                            "RecipientId": <replace with receipient Id>
                        }
                    ]
    };
                
    $.ajax({
        url: xsrfUrl,
		type: "GET",
        beforeSend: function (xhr) { xhr.setRequestHeader("X-CSRF-Token", "Fetch"); },
        complete: function (xhr) {
            token = xhr.getResponseHeader("X-CSRF-Token");
            $.ajax({
                url: notificationUrl,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('X-CSRF-Token', token);
                    xhr.setRequestHeader('Content-Type', "application/json; charset=utf-8");
                    xhr.setRequestHeader("Content-Type", "application/json");
                    xhr.setRequestHeader("Accept", "*/*");
				},
                type: "POST",
                async: false,
                data: JSON.stringify(oPostData)
            })
            done(function (data, response) {
                MessageBox.success("Notification sent successfully");  
            }.bind(this))
            .fail(function (error) {
                MessageBox.error("Notification not sent."); 
            }.bind(this));

        }
    });
}

Now the easy part, Build the project and deploy it on BTP.

Once deployed, click on the Notification button and notification is sent to Launchpad site.

Click on Notification button

Notification is available on FLP site

References

You can also refer SAP help Enabling Notifications for Custom Apps on SAP BTP Cloud Foundry