Skip to Content

Hybrid Application Toolkit 1703

On 30 March we have released a new version of Hybrid Application Toolkit (HAT), as part of the Fiori Mobile Developer Experience. If you want to know more about how HAT fits into Fiori Mobile DevX, take a look at Britt’s blog post. With the 1703 release comes the ability to add Push Notifications to Fiori mobile apps. We have added a step in the build wizard that allows you to configure your app for receiving Push Notifications. You will still need to add some code to your app to register and respond to the incoming notifications, but this is very straightforward. In this blog post I will provide you a simple example.

Karunaharan has recently posted this blog about what’s new in our 1703 release. One of the main items mentioned is Developer Companion. Some of you who are familiar with Companion App might think this is the same thing; but there is more. The Companion App that you can download from the public stores is an app with its own identification, which you as a developer cannot change. Especially when it comes to Push Notifications, this is a problem because those Push Notifications are targeting a specific app id. So how can we send push notifications to an app we want to preview, without rebuilding the application and wasting time downloading and installing it onto our device? We have solved this by introducing the Developer Companion, which is specifically created on-demand for your project. You will only need to build this app once, in the cloud.

Daniel Silva recently published a detailed blog post here about how to add Push capabilities to your HTML5/SAPUI5 mobile app with Fiori Mobile. What is described there is still requiring a large amount of steps. We have simplified this significantly with the Fiori Mobile Developer Experience.

Developer Companion

Let me demonstrate how much easier it is now by making use of the Developer Companion. In this particular case I will show you the steps for iOS.

Let’s start by creating a new project in SAP Web IDE, based on the SAP Fiori Master-Detail Application template.

In this project we will consume data from the ES4 demo system and select the Gateway Sample Basic for the Data Connection.

After configuring the data binding, the new project will be available in your SAP Web IDE workspace. Now let’s turn this app into an app that provides mobile user experiences.

As a first step, we will build a Developer Companion for this project. I am starting with the Developer Companion build, because I want to quickly iterate without having to rebuild my app all the time. I’ll discuss further on that in a minute.

The build wizard presented is very similar to the one presented for building a packaged app. In the first step of the build wizard, we provide the description and select the app’s icon and splash screens.

In the second step of the build wizard we select the iOS platform and the provisioning profile to be used. For this particular case, we select the provisioning profile that we have generated based on the documentation provided here. We also tick the box ‘Build debug-enabled binaries’ to make sure we can debug the app from the Mac’s Safari browser.

 

Push Notifications

The third step of the build wizard is where you configure the Push Notifications certificate. Since we’ve selected only the iOS platform in the second step of the build wizard, we only see the configuration options for iOS.

When selecting the ‘enable receiving push notifications from Apple Push Notification services’, you will be able to configure the Development (Sandbox) certificate. The detailed steps on how to generate this Push certificate are described here. I have to admit that this part is still a bit cumbersome. What’s important to note is that you will need to copy the Bundle ID that Fiori Mobile Service generated for you and register this at Apple’s Developer portal. Fiori Mobile Service will configure SAP Cloud Platform mobile services for Development and Operations for you behind the scenes.

Now that we are done with the configuration, we can hit the “Build” button and generate the app in the cloud. Once the build is done (should be in approximately 3 minutes), you will receive an email and the build results dialog pops up in SAP Web IDE, from where you will be able to download and install the app on your device.

When you run the app, you will be asked to log in using your SAP Cloud Identity. After this, you need to set an application passcode. If your device has a fingerprint reader, you will have the option to unlock the app using your fingerprint (as already stored on your device). I highly recommend making use of this feature.

Once you are passed the log in and passcode screens, your app will be loaded. The web assets of a packaged app are stored on your device. However, the web assets for the Developer Companion are loaded directly from your personal SAP Web IDE workspace. And this where things become interesting for a developer.

The top toolbar visible is the screenshot above will automatically be hidden. It folds away to ensure your app has maximum screen real estate to render its content. To reveal the toolbar, simply pull down (drag) the screen content.

You will notice a refresh button on this toolbar. This button allows you to reload your app from your SAP Web IDE workspace. And this is what makes this Developer Companion an asset for rapid development. You can make changes to your code in SAP Web IDE, save them, and reload the app on your device (or multiple devices!) in seconds. You don’t need to go through the build and reinstall process again and again.

Now let’s add some code. Daniel Silva’s blog shows a more elaborate way to implement the Push capability. To keep it simple and short, I will stick to the bare minimum here.

I’m going to add the Push Notification registration in the init function of my application’s Component.js file:

//Push Notification Registration
var that = this;
if (sap.Push) {
	var nTypes = sap.Push.notificationType.ALERT;
	sap.Push.registerForNotificationTypes(nTypes, that.regSuccess, that.regFailure, that.processNotification);
}

And I’ll add the callback functions in the same file.

regSuccess: function(result) {
	MessageBox.show("Registered For Push Notifications", {
		icon: MessageBox.Icon.INFORMATION,
		title: "Success",
		actions: [MessageBox.Action.OK]
	});
},

regFailure: function(errorInfo) {
	MessageBox.show(JSON.stringify(errorInfo), {
		icon: MessageBox.Icon.INFORMATION,
		title: "Push Registration Failed",
		actions: [MessageBox.Action.OK]
	});
},

processNotification: function(notification) {
	var notif_alert = notification.title;
	var notif_data = notification.data;

	MessageBox.show(
		notif_data, {
			icon: MessageBox.Icon.INFORMATION,
			title: notif_alert,
			actions: [MessageBox.Action.OK]
		}
	);
},

Now the only thing left, is to ensure that we can use MessageBox in this Component.

We save the changes to Component.js and hit the Refresh button on the Developer Companion running on our device. The application will reload the sources from your workspace and if all goes well, you’ll see a message box indicating that registration for Push was successful.

Testing Push

So how do we test that this app can receive Push Notifications? That’s easy:

Selecting Test Push Notification in the Fiori Mobile menu will show you a dialog where you can define a simple JSON string that will be sent as payload with the Push Notification. At this point the interface is bare minimum. We intend to improve this and add more options in future.

You can change the alert and data to your own needs. For now, we’ll just use the default string and hit the Send button. Within seconds, a notification will arrive on your device.

You can continue changing your code, adding enhancements and hit the reload button. When you are done and want to test this application as a packaged app that includes the web assets, you can select Build Packaged App in the Fiori Mobile menu. Take note that the Developer Companion will now be replaced with the actual app. There won’t be a Refresh button in this packaged app. The Fiori Mobile administrator will only be able to put the packaged app into production.

Wrapping up

To summarise, I have used two of the main features released with version 1703 of HAT: the ability to easily add Push Notifications to your app, and make use of Developer Companion so you can rapidly iterate without the need to rebuild and reinstall the application on your device.

We hope you like this developer experience. We are planning to add some more options for you in future releases, while further reducing the manual steps to get Push Notifications working in your app. We are looking forward to your feedback, so we can further improve your developer experience.

 

Regards,

Ludo Noens, Product Owner – Hybrid Application Toolkit

 

Updated on 15 December 2017 to change the sample code for handling the notification’s payload.

To report this post you need to login first.

14 Comments

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

  1. Britt Womelsdorf

    Ludo – thanks for the very helpful blog.  It’d be really nice if adding Push to the app would automatically insert this infrastructure code (you know, the registration and the callbacks!). But even without it, adding Push to a Fiori app is pretty easy.

    (0) 
  2. Suwardi Nursalim

    Hi Ludo,

     

    Thanks for sharing the information. Our company implements standard fiori apps accessed through Fiori client. Are we able to implement similar push notification explained above? It seems like it’s more to custom developed Fiori application I suppose?

     

    Thank you.

    (0) 
    1. Ludo Noens Post author

      Hi Suwardi,

      What is described here doesn’t produce Fiori Client apps. The cloud build produces a packaged app. The implementation should be quite similar though.

      This is indeed more like custom developed Fiori apps; but it should also work in the scenario where existing (standard) Fiori Apps are extended with mobile (and/or other) features.

      Regards,

      Ludo

      (0) 
      1. Jens Schwendemann

        Hi Ludo,

         

        I have a similar question as Suwardi. We currently use Fiori via the Browser on a mobile device (we have iOS devices in the company). We would like to get push (real Push Notifications via iOS) when a Fiori stock application (like Approve Purchase Orders) has a new item.

        Which way would we then need to go? Your solution? Vanilla Fiori Client via SAP mobile services ? And would this even work with the stock Fiori Applications or would those need to generate the notification in the first place (which they may not do at the moment)?

         

        Cheers

        Jens

        (0) 
        1. Suwardi Nursalim

          Hi Jens,

           

          To get native push notification feature you have two options basically:

          1. Vanilla Fiori Client (Downloaded from Apple App Store / Playstore); You need to do fiori launchpad deployment using SAP Cloud Platform
          2. Custom SAP Fiori Client; You need to first develop your Custom Fiori Client and do your own user registration to Push Notification provider. Publish this apps through your Enterprise App Store

          Next step is to generate the notification, the standard stock application does not have this capability. So you’ll need to create an enhancement at each necessary point, to trigger a notification to the Push Notification Provider which will then push the notification to the mobile devices.

           

          Hope this helps.

          (1) 
          1. Jens Schwendemann

            Thanks Suwardi Nursalim ,

             

            about Option 1:

            Could you elaborate on that a little bit? What I understood is that we need Fiori Cloud. Would that also mean having Fiori Cloud Premium?

             

            Which way did you go?

            Many thanks and kind regards

            Jens

            (0) 
            1. Suwardi Nursalim

              Hi Jens,

              Just saw your reply.

              What you basically need for Option 1 is a subscription to Mobile Dev and Ops service of SAP Cloud Platform (CP), with that you can make a proxy link between SAP CP with  your gateway (my gateway is on-premise, but you also have option to deploy it on the cloud). And yes, this is the premium paid subscription. However, for POC, your trial account should be enough to enable it.

              Unfortunately, we didn’t proceed with the above as the cloud premium subscription was above our budget.

               

              Hope this help.

              (0) 
  3. Former Member

    Hi  Lodo,

        Great Blog . I am trying for 1 week and i could not figure out this issue . Please help me out

       After Testing for Push notification I get this error

    (Check if Push Handlers have been registered successfully in app run-time)

    In Console i get an error as

    (hat) Failed to push the message (XHR responseText = ) .

    (0) 
    1. Ludo Noens Post author

      Hi Srikar,

       

      Sorry for the late response. I think you might have inserted the code at the wrong place. Please review your code changes.

       

      Thanks,

      Ludo

      (0) 
  4. Former Member

    Hi Ludo,

    This is very detailed post.

    I follow each step. But when i open the app on android device, after passcode step, the screen is white and nothing happens.

    Do you have this issue before?

    Tri

    (0) 
  5. Former Member

    Hey Ludo.

    Nice blog I tried to follow your guide, but I get the following error when building the companion app: the error [2018-02-23 12:36:48.02072] [ET] Build failed for [IOS] [ErrorCode: 40001] [ErrorStatus: RESOURCE COLLECTION FAILED]

    the build logs says the following:

    [2018-03-07 12:53:26.96970] [ET] [5a9fe0c6baac2::selautrupl@a5358160d] Build failed for [IOS] [ErrorCode: 40001] [ErrorStatus: RESOURCE COLLECTION FAILED]

    Kindly refer to the trouble shooting guide in the following location to help you troubleshoot the problem.
    https://help.sap.com/viewer/p/SAP_HANA_CLOUD_PLATFORM_MOBILE_SERVICE_FOR_SAP_FIORI

    Note : In addition to the build failure logs listed above there were also warnings encountered while packaging your application. These warnings may result in your application not working as expected.
    Listed below are the details of the warnings for your reference. Please verify the source of your application and ensure that all the necessary resources are present to enable us to build your application that works correctly.

    ———-Warnings generated while packaging your application – Begin———-

    {
    “missing_resources”: [
    {
    “resourceType”: “library”,
    “resourceId”: “sap.ca.scfld.md”,
    “resourcePath”: [
    ]
    },
    {
    “resourceType”: “library”,
    “resourceId”: “sap.collaboration”,
    “resourcePath”: [
    ]
    },
    {
    “resourceType”: “library”,
    “resourceId”: “sap.chart”,
    “resourcePath”: [
    ]
    }
    ]
    }

    ———-Warnings generated while packaging your application – End———-

    Hope you can help me out

    (0) 

Leave a Reply