Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 

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

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.

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

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

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

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

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.

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

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]

                    }

              );

          },

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.

9. Save your changes and deploy your updated project.

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.

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

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

5. Select Cloud Messaging.

6. Click Enable Cloud Messaging.

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

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)

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

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.

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

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.


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.

Continued Here...

8 Comments