Send web push notifications using ABAP through OneSignal
Traditionally (in ABAP-land), in order to notify a user about something in SAP, it meant sending an e-mail to the user mailbox. It works most of the time until the user gets sick and tired of all the emails and sets up a rule to block all incoming e-mails from the SAP system or sets a rule to route it to the spam folder. Yup, been there, done that!
Then, came along mobile / Fiori applications where we’re now open to the world of real-time push notifications directly on your mobile device – ding! Obviously, this works great when you’re looking at your phone 24×7 and it’s always within reach. Ding, ding!
Anyway, what about the time when you’re casually browsing a website on your desktop for leisure or actual work and you need to be notified of an event in SAP but then your phone is not within reach (panic attack!) and you don’t want to switch over to your mail client?
Web push notification to the rescue!
What’s web push notification you asks? You can read all about it here on OneSignal’s documentation. https://documentation.onesignal.com/docs/difference-between-web-and-mobile-push
In this little proof-of-concept implementation, I’ve used OneSignal‘s API to demonstrate sending of real-time web push notification directly from an ABAP server to a user’s active browser session.
The example screenshot above shows a notification from my SAP ABAP server while I’m browsing SCN.
If you are interested to get an overview of how this was done, read on!
Sign up on OneSignal
If you’ve never heard of OneSignal, they are a FREE multi-platform push notification service. Check out their Pricing model! It’s like a dream come true!
The first thing I have to do is to create an app on OneSignal and the purpose of this is to get an App ID.
Select the Platform – Website Push
For my POC, I’ve only selected Google Chrome and Mozilla Firefox
Configure the Platform
Note: I had to enter the port number as well on the Site URL to make it work. As for the Icon URL, I just grabbed a random SAP Icon in PNG format from Google.
And since my ABAP server is not fully HTTPS, I used the HTTP fallback options that OneSignal provided and you need to enter a subdomain – limited to 14 characters and use only characters and numbers (dashes allowed).
Select Website Push for SDK
Done! I now have an App ID that’s generated and I will need this for the next step! I’ll come back to this screen later and click on the ‘Check Subscribed Users’ button to validate that we’ve completed the process.
Sign users up!
Now, let’s go into ABAP-land – in here, I’ll create a simple BSP application and refer to the OneSignal’s SDK to create a page that users will view to in order to get subscribed to the web push notification service.
I am running the SAP NW AS ABAP 751 SP02 Developer Edition instance for this POC. You can get it through this link here and if you search on SCN for the tag ABAP_TRIAL, you’ll find lots of good tutorials on how to install your own local instance.
https://tools.hana.ondemand.com/#abap
Anyway, so, head right into SE80 and create a BSP Application.
In the ‘Layout’ Tab of the BSP page, I referred to the OneSignal SDK instructions and created a simple webpage. See sample code below. Saved and Activated the application and then also made sure that the service is activated in transaction SICF.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Subscribe to PO approval web-push</title>
<script src="http://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
appId: "XXXXX-ENTER-APP-ID-XXXXX",
autoRegister: true, /* Set to true to automatically prompt visitors */
httpPermissionRequest: {
enable: true
},
notifyButton: {
enable: true /* Set to false to hide */
},
welcomeNotification: {
"title": "SAP PO Approval notification",
"message": "Thanks for accepting!",
// "url": "" /* Leave commented for the notification to not open a window on Chrome and Firefox (on Safari, it opens to your webpage) */
},
subdomainName: "vhcalnplciabap" /* Value you added from step 1.4 of the HTTP setup guide, do not use the https:// nor the .os.tc */
}]);
</script>
</head>
<body>
Demo: OneSignal web push notification from ABAP
</body>
</html>From SICF, I can then run a test of the service.
Once the page is loaded, I will now get a popup saying that this page wants to show me notifications. Click ‘Allow’
And then I got a confirmation prompt to say that I’ve successfully subscribed.
And BOOM! In a few seconds, I’ve received my first web push notification!
Now, if I go back to the OneSignal set up screen and click on the ‘Check Subscribed Users’ button, it should now say that I have one user subscribed!
SWEET! We’re done with the second part of the POC.
Sending notifications
The last part of the POC is simply deciding when I want SAP to trigger the web push notification and for the purpose of this POC, I picked the “Approve” action of a Purchase Order on the Fiori App that’s part of the EPM model in my Fiori Launchpad.
Before heading back into ABAP-land, I need the APP ID and also the REST API key from OneSignal for this next step.
So, in order to make this POC work based on the scenario that I made up earlier, I added an implicit enhancement at the end of Method DO_APPROVE of Class CL_SEPMRA_A_PO_APPROVE_REJECT.
ENHANCEMENT 1 ZIMP_ENH_PO_APPRV_NOTIF. "active version
cl_http_client=>create_by_url(
EXPORTING
url = 'https://onesignal.com/api/v1/notifications'
ssl_id = 'ANONYM'
IMPORTING
client = DATA(lo_http_client)
EXCEPTIONS
argument_not_found = 1
plugin_not_active = 2
internal_error = 3
OTHERS = 4 ).
IF sy-subrc EQ 0.
DATA lv_body TYPE string.
DATA(lv_node_key) = lt_node_key_info[ 1 ]-node_key.
SELECT SINGLE PO_ID INTO @DATA(lv_poid) FROM SNWD_PO
WHERE node_key = @lv_node_key.
lv_body = '{'
&& '"app_id": "XXXXX-ENTER-APP-ID-XXXXX",'
&& '"included_segments": ["All"],'
&& '"headings": {"en": "SAP PO ' && lv_poid && ' Approved!" },'
&& '"contents": {"en": "' && iv_reason && '"},'
&& '"url": "http://vhcalnplci.dummy.nodomain:8000/sap/bc/webdynpro/sap/s_epm_fpm_po?FPM_INITIAL_PAGE_PROC_MODE=L&FPM_EDIT_MODE=R&FPM_NAVI_SOURCE_KEY_ATTR_PO_ID=' && lv_poid && '&SAP-CLIENT=001#"'
&& '}'.
lo_http_client->request->set_method( 'POST' ).
lo_http_client->request->set_content_type( 'application/json; charset=utf-8' ).
lo_http_client->request->set_header_field(
EXPORTING
name = 'Authorization'
value = 'Basic XXXXX-ENTER-REST-API-KEY-XXXXX' ).
lo_http_client->request->set_cdata( lv_body ).
lo_http_client->send(
EXCEPTIONS
http_communication_failure = 1
http_invalid_state = 2 ).
lo_http_client->receive(
EXCEPTIONS
http_communication_failure = 1
http_invalid_state = 2
http_processing_failed = 3 ).
ENDIF.
ENDENHANCEMENT.Save and Activate.
Note: In order to get the solution to work, I had to also download the SSL certificates from https://onesignal.com as CER files and load them into STRUST, otherwise, I get an error when executing the send and receive methods.
Testing time!
Finally, to test this POC, run transaction /UI2/FLP to get to my Fiori Launchpad and clicked on the ‘Approve Purchase Orders’ Tile.
Pick a PO, click ‘Approve’ and enter a reason in the popup box.
And, voila! I got a notification that a PO has been approved and the reason entered in the popup appears in the text as well.
So, now, even if I’m browsing any other websites or basically as long as my Chrome browser is running, I’ll get a real-time web push notification every time a PO gets approved from SAP!
Final thoughts
This POC was pretty fun to build and it also opens up some more possibility of deploying a different type of notification to users in SAP outside of just sending emails and save your users from having to deal with e-mail spam.
Let me know what you think!
Amazing Blog. I was really looking for something like that but just for Desktops (running Chrome Browser)
Just one request. Since you have already done your POC using OneSignal. Have you used GCM (Google Cloud Messaging) or FCM (Firebase Cloud Messaging) for push notificaitons? Can you change your existing POC to use these services?
Thanks for the nice blog.
Thanks for your comment and glad that you found the blog interesting, Rashid. And yes, this POC will be applicable for getting web push notifications for Desktops running Chrome Browser.
As for your comment/request on GCM/FCM, those platforms have more functionalities than OneSignal and they are meant do more than just sending a push notification. Nonetheless, I've looked through their documentation previously and yes, it does looks like it'll be possible to integrate SAP/ABAP with it.
In terms of whether I'll change my existing POC to use these services, "maybe". Since they have much more functionality, I think they warrant a different POC scenario. Anyway, "if" I do get some time to play with it a little more, I'll probably publish another post and when I do, I'll let you know in a reply here.
cl_http_client=>create_by_url(
EXPORTING
url = ‘https://onesignal.com/api/v1/notifications’
ssl_id = ‘ANONYM’
IMPORTING
client = DATA(lo_http_client)
EXCEPTIONS
argument_not_found = 1
plugin_not_active = 2
internal_error = 3
OTHERS = 4 ).
IF sy–subrc EQ 0.
DATA lv_body TYPE string.
DATA lv_poid TYPE string VALUE ‘Sagar’.
DATA iv_reason type string value ‘Reason’.
* DATA(lv_node_key) = lt_node_key_info[ 1 ]-node_key.
*
* SELECT SINGLE PO_ID INTO @DATA(lv_poid) FROM SNWD_PO
* WHERE node_key = @lv_node_key.
lv_body = ‘{‘
&& ‘”app_id”: “app_id_number”,’
&& ‘”included_segments”: [“All”],’
&& ‘”headings”: {“en”: “SAP Test ‘ && lv_poid && ‘ Approved!” },’
&& ‘”contents”: {“en”: “‘ && iv_reason && ‘”},’
&& ‘”url”: “http://localhost:50182″‘
&& ‘}’.
lo_http_client->request->set_method( ‘POST’ ).
lo_http_client->request->set_content_type( ‘application/json; charset=utf-8’ ).
lo_http_client->request->set_header_field(
EXPORTING
name = ‘Authorization’
value = ‘Basic rest_number’ ).
lo_http_client->request->set_cdata( lv_body ).
lo_http_client->send(
EXCEPTIONS
http_communication_failure = 1
http_invalid_state = 2 ).
lo_http_client->receive(
EXCEPTIONS
http_communication_failure = 1
http_invalid_state = 2
http_processing_failed = 3 ).
ENDIF.
Unable to get notifications and Error is ssl client ssl client (anonymous)
How to download the SSL certificates and load them into STRUST please help
Sagar, I didn't document the steps but the folks at abapGit has documented the steps in their documentation - http://larshp.github.io/abapGit/guide-install.html and you can get the steps there. It'll be applicable for this scenario.
Hi
We download the ABAP SSL Testing report ZABAPGIT_TEST_SSL and the connection test work fine with https://www.onesignal.com
When I try to connect to 'https://onesignal.com/api/v1/notifications', it keep on saying
Appreciate your help。
Hi TONY CHUNG, I think the error that you're getting is expected because if you launch that URL directly from a browser or a tool like Postman, you will get a return error code 400.
I believe that as long as there's no error when you're calling https://onesignal.com - that should do it.
Very cool and informative. Just as a matter of interest, would this work in a scenario, where for example, we have the fiori client installed natively on an android/iOS device. Same parameters, PO Approval needs to happen, user is not logged on, Mobile device is on, but, now browser session running. Your thoughts?