Thursday 12 October 2017

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.

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.

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!


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.

SAP ABAP Tutorials and Materials, SAP ABAP Certification, SAP Guides, SAP ABAP Learning

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.

SAP ABAP Tutorials and Materials, SAP ABAP Certification, SAP Guides, SAP ABAP Learning

SAP ABAP Tutorials and Materials, SAP ABAP Certification, SAP Guides, SAP ABAP Learning

Select the Platform – Website Push

SAP ABAP Tutorials and Materials, SAP ABAP Certification, SAP Guides, SAP ABAP Learning

 For my POC, I’ve only selected Google Chrome and Mozilla Firefox

SAP ABAP Tutorials and Materials, SAP ABAP Certification, SAP Guides, SAP ABAP Learning

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.

SAP ABAP Tutorials and Materials, SAP ABAP Certification, SAP Guides, SAP ABAP Learning

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).

SAP ABAP Tutorials and Materials, SAP ABAP Certification, SAP Guides, SAP ABAP Learning

Select Website Push for SDK

SAP ABAP Tutorials and Materials, SAP ABAP Certification, SAP Guides, SAP ABAP Learning

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.

SAP ABAP Tutorials and Materials, SAP ABAP Certification, SAP Guides, SAP ABAP Learning


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.

Anyway, so, head right into SE80 and create a BSP Application.

SAP ABAP Tutorial and Material, SAP ABAP Certifications, SAP Learning, SAP ABAP Guides


SAP ABAP Tutorial and Material, SAP ABAP Certifications, SAP Learning, SAP ABAP Guides

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.

SAP ABAP Tutorial and Material, SAP ABAP Certifications, SAP Learning, SAP ABAP Guides

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.

SAP ABAP Tutorial and Material, SAP ABAP Certifications, SAP Learning, SAP ABAP Guides

And BOOM! In a few seconds, I’ve received my first web push notification!

SAP ABAP Tutorial and Material, SAP ABAP Certifications, SAP Learning, SAP ABAP Guides

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!

SAP ABAP Tutorial and Material, SAP ABAP Certifications, SAP Learning, SAP ABAP Guides

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.

SAP ABAP Tutorial and Material, SAP ABAP Certifications, SAP Learning, SAP ABAP Guides

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.

SAP ABAP Tutorial and Material, SAP ABAP Certifications, SAP Learning, SAP ABAP Guides

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.

SAP ABAP Tutorial and Material, SAP ABAP Certifications, SAP Learning, SAP ABAP Guides

Pick a PO, click ‘Approve’ and enter a reason in the popup box.

SAP ABAP Tutorial and Material, SAP ABAP Certifications, SAP Learning, SAP ABAP Guides

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.

SAP ABAP Tutorial and Material, SAP ABAP Certifications, SAP Learning, SAP ABAP Guides

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!

SAP ABAP Tutorial and Material, SAP ABAP Certifications, SAP Learning, SAP ABAP Guides

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.

3 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Sabrina, thank you for great overview!

    I recommend also www.ZetPush.com

    ReplyDelete

  3. Excellent Information.To get awesome training in SAP FIORI,the creating experts is the best choice.
    The experts provides 100% real-time, practical and placement focused SAP FIORI Training in Chennai.
    The team of SAP FIORI Trainers are SAP FIORI Certified professionals with more real-time experience in
    live projects.For more information visit : real time sap fiori training in chennai

    ReplyDelete