Skip to Content

This blog post is continuation of a 4-part series on How to use SAP HCP, mobile service for SAP Fiori.

Part 4: Feature Management – Adding Push Notifications


In this fourth part, we’ll take the Product Listing app that we created and add support for Push Notifications.  You’ll learn how to…

  1. Update the app with some Javascript code to register for push notifications using WebIDE
  2. Register your app with Google to get the required Push IDs
  3. Update the Fiori Mobile App Settings with your Push IDs, rebuild the app, and update your device
  4. Send a Push Notification using the Advanced REST Client plug-in for Google Chrome

Step-by-step guide:


The first step is to update our Fiori App with the appropriate Javascript to register the app for Push Notifications. We will add a button that the user can click to enable Push Notifications.


1. Open the Product Listing app in WebIDE

Step1.png

2. Expand the view folder then right-click on the Master.view.xml file and select Open in Layout Editor. NOTE: The Layout Editor only works in Chrome right now. If the Layout Editor is not an option, select Code Editor and edit the xml directly.

Step2.png

3. From the Controls Palette, Under Action select the Button Control then drag it to the toolbar on the bottom of the Master view.

Step3.png

4. In the properties section, change the text for button from “Button” to “Register”

Step4.png

5. Expand the Events section, then in the Press Field click the Dropdown menu and select New Function.

Step5.png

6. Enter “pushRegistration” for the name of the new function and click “ok.”

Step6.png

7. Click on the small icon to the right of the Press Field to go to the newly created function in the Master.controller.js.

Step7.png

Step8.png

8. Copy and paste the following code inside your new pushRegistration Function

var nTypes = sap.Push.notificationType.SOUND | sap.Push. notificationType.ALERT;

sap.Push.registerForNotificationTypes(nTypes , this.regSuccess , this.regFailure , this.processNotification);

Step9.png

This function will call the asynchronous Push Registration method, which is looking for three callback functions to handle the results. We will create three new functions called regSuccess, regFailure, and processNotification. Copy and paste the following code right above the new pushRegistration function that we just added

                regSuccess: function(result) {

              jQuery.sap.require(“sap.m.MessageBox”);

              sap.m.MessageBox.show(

                    “Registered For Push Notifications”, {

                    icon: sap.m.MessageBox.Icon.INFORMATION,

                    title: “Success”,

                    actions: [sap.m.MessageBox.Action.OK]

              });

          },

          regFailure: function(errorInfo) {

              jQuery.sap.require(“sap.m.MessageBox”);

              sap.m.MessageBox.show(

                    JSON.stringify(errorInfo), {

                          icon: sap.m.MessageBox.Icon.INFORMATION,

                          title: “Push Registration Failed”,

                          actions: [sap.m.MessageBox.Action.OK]

                    }

              );

          },

          processNotification: function(notification) {

              if (sap.Push.isPlatformIOS()) {

                    var notif_alert = JSON.parse(notification).payload.aps.alert;

                    var notif_sound = JSON.parse(notification).payload.aps.sound;

                    var notif_badge = JSON.parse(notification).payload.aps.badge;

                    var notif_data = JSON.parse(notification).payload.data;

              } else {

                    var notif_alert = notification.payload.alert;

                    var notif_sound = notification.payload.sound;

                    var notif_badge = notification.payload.badge;

                    var notif_data = notification.payload.data;

              }

              jQuery.sap.require(“sap.m.MessageBox”);

              sap.m.MessageBox.show(

                    notif_data, {

                          icon: sap.m.MessageBox.Icon.INFORMATION,

                          title: notif_alert,

                          actions: [sap.m.MessageBox.Action.OK]

                    }

              );

          },

Step10.png

After pasting, if there are any red spaces you will want to remove them. The, right click in the file and Select “Beautify” to clean up the display of your code.

Step11.png

9. Save your changes and deploy your updated project.

Step12.png

Step13.png

Step14.png

Step15.png

Now that we have added some code to register the app for Push Notifications, we need to register our app with Google so we can get the required IDs for sending Push Notifications.

1. Go to https://developers.google.com/mobile/add?platform=android and login with your Google ID (if you don’t have one you will need to register first).

2. To complete the form you will need the App ID of your Fiori App. Go back to WebIDE and open your manifest.json file in the Code Editor.Picture1.png

3. Copy your App ID from WebIDE (from the manifest.json file) and paste it in the Android Package Name field.

Picture1b.png

4. Enter an App Name and Select your appropriate country then click “Choose and Configure Services.”

Picture2.png

5. Select Cloud Messaging.

Picture3.png

6. Click Enable Cloud Messaging.

Picture4.png

7. Copy the Server API Key and Sender ID to somewhere safe or just leave the window open.

Picture5.png

Now, we need to update the Fiori Mobile App Settings with the GCM Keys and rebuild the app.

1. Open the Mobile Secure Cockpit (from HCP Services, select the Fiori Mobile Tile, then select Go To Admin Console)

Picture1.png

2. Select Manage Apps in the Main Navigator, then select your Product Listing App

Picture2.png

3. Select the App Settings tab, Notifications, and expand the Android Section. Enter your Server API Key and Sender ID that you just created from the Google Developer Site, then Save.

Picture3.png

4. Go to the Platforms tab, right click the gear on the Android OS line and select Build.

Picture4.png

5. Once the build is complete you can go to Mobile Place on your Android device and download the new version.

NOTE: Your SAP Mobile Place URL is available via HCP Cockpit > Services > Fiori Mobile > “Go to Mobile Place” or try https://<trial-p#trial>.sapmobileplace.com/ (only replace p# which is your trial id)


From the Mobile Place, if the app is not listed click the Menu Button, Expand My Profile, and select Fiori Mobile Apps. When the apps are presented, click the download button for your Product Listing.


Picture5a.pngPicture5b.png

6. Once downloaded, install the app and then launch it. Click the Product Listing Tile and the app will open. Click the Register Button and if all goes well you will get a Success message.

Picture6a.pngPicture6b.pngPicture6c.png

Continued Here…

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. Vishnupriya Varadharajan

    Thanks Steve for this wonderful and well explained article. I am getting “Registration failed – Cannot access Server” error when trying to register for Push Notification. Followed the steps explained here. Not sure what is causing this error. Any suggestions?

    (0) 
    1. Michael Appleby

      Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      (0) 
  2. Shilpa Jain

    Dear Steve,

    I am also getting the same error “Push Registration failed – Cannot access Server”. If anyone of you have resolved this issue please let me know.

    (0) 
  3. HCP Extentia

    Hi Steve,

    I have successfully integrated Push notification mobile service for Android enabled mobile devices.

    but I am not be able to find any process for building same application on ios platform.

    I have few questions as well.

    • Whether we are using same AFC for ios build configuration ?
    • is there any other specific steps for configuring ios build ?

    I have all the required things related to ios signing profile.

    I have tried using it but the build gets failed every time,build logs are getting generated but i am not be able to find any error inside that file.

    Can you please help me in this ?

    Thanks in advance !

    Regards,

    Omkar

    (0) 

Leave a Reply