Skip to Content
Technical Articles
Author's profile photo Abhinav Sharma

Send Notification to FLP Launchpad from SAPUI5

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%20Notification%20Settings

Enable Notification Settings

Setup a destination in BTP Destinations

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

OAuth2ClientCredentials%20-%20Destination%20in%20BTP

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%20on%20Notification%20button

Click on Notification button

 

Notification%20is%20available%20on%20FLP%20site

Notification is available on FLP site

References

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

 

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Palina Krauchuk
      Palina Krauchuk

      Hello,

      Thank you for this post. I'm learning the Notification service now, but the difference from you is I want to create and send a Notification also from Postman. I generated and set Bearer token and x-csrf-token, created a NotificationType, but then I was faced with some issues:

      1. When I try to perform GET https://notifications.cfapps.eu10.hana.ondemand.com/v2/Notification.svc/Notifications

         

        in the Postman there is an issue like "Not implemented", so I'm not able to see current Notifications. Is it correct behaviour? (But POST call to create Notification was successful)


      2. When I checked the launchpad, there are no Notifications, but I see NotificationTypes in the User Settings 

      Do you have an idea why Notifications don't appear?

      Thanks and Best regards,

      Palina

      Author's profile photo Abhinav Sharma
      Abhinav Sharma
      Blog Post Author

      Hi Palina,

      Regarding first, When I try to perform GET https://notifications.cfapps.eu10.hana.ondemand.com/v2/Notification.svc/Notifications

      You can not use the GET method of above endpoint as it is not available,

       

      Regarding second, You have to send the POST request to

      https://notifications.cfapps.eu10.hana.ondemand.com/v2/Notification.svc/Notifications to send the notifications.

      First you have to get the XSRF token either by calling endpoint - /v2/Notification.svc or

      /v2/NotificationType.svc.

      Once you have the XSRF token, you can call POST method of /v2/Notification.svc/Notifications. You need to specify the correct payload, which includes the notification types that you published earlier.

      Refer help Developing Cloud Foundry Applications With Notifications for more details.

      Hope it helps.

      Author's profile photo Palina Krauchuk
      Palina Krauchuk

      Hi,

      Thanks for your response, but I did exactly the same.

      The problem I've faced is that the Notifications I've created in Postman don't appear on the Launchpad (but I managed to get them via Postman with grant type: password credential).

      Do you have any ideas why it happens?

      Best regards,

      Palina