Skip to Content

Who develops HTML5 apps for SAP HANA Cloud Platform (HCP) using SAPUI5 and SAP Web IDE and wishes to mobilize it with SAP HANA Cloud Platform, mobile service for development and operations, in general, uses SAP Web IDE, hybrid app toolkit add-on (HAT) to package and create the hybrid mobile app.

Using HAT can be painful, not because it is hard to use, but because there are too many software dependencies (that should be installed locally in your machine), which can change depending on new HAT, SAP Web IDE, Cordova, SAPUI5 or SMP SDK releases. For example, one working app can just stop to work because of that when you try to make some changes and repackage it.

Now, with SAP HANA Cloud Platform mobile service for SAP Fiori and SAP Web IDE, it is possible to package and create the hybrid mobile app on the cloud and then download it directly to your mobile device with the help of an QR code reader app. It saves you a lot of time preparing the environment and avoid that new releases of dependency softwares break the new versions of your app you want to package.

Below you will be guided on how to create a simple SAPUI5 app using SAP Web IDE and how to mobilize it using SAP HANA Cloud Platform mobile service for SAP Fiori (Fiori Mobile).

The first 7 steps are configuration ones that you just need to do one time. Once the they are done, your HCP trial account is ready for next times. So, be patient. You will get there.

Warning: Today cloud build service is not part of Fiori Demo Cloud. But ultimately, Fiori mobile is part of the HCP developer edition and is licensed via Fiori Cloud premium. This blog article can be followed with an HCP trial account.

1. Enable Fiori Mobile and Portal Service services

Some services are not activated by default on the SAP HANA Cloud Platform. You must first enable them prior to use.

First of all, go to https://account.hanatrial.ondemand.com/ and log on. If you are not registered yet, register yourself clicking on Register. The trial account is free and will not be deleted after a certain period of time.

 

Then go to Services, search mobile in the search input field. Scroll down, find the Fiori Mobile service in the Mobile Services area, then click on it.

Click the enable button if the service is not yet enabled. Wait for the enablement process to be done.

Back to Services, search portal in the search input field, then click on Portal Service.

Click the enable button if the service is not yet enabled. Wait for the enablement process to be done.

2. Assign your user to necessary roles

To call the HCP mobile service for development and operations’ REST API that triggers the sending of a push notification, your user must be assigned to the Notification User role. Let us do it for the case you want to add push notifications to your app in the future. Also, to use Fiori Mobile to package your app with Cordova and Kapsel, you need to assign you user to some other roles in different services. Some of them should already be assigned, but this section is intended to you to make sure they really are.

On Services again, click on Development & Operations under Mobile. From where you left off in the previous section, click the Configure Development & Operations link.

On the left hand menu area, select Roles.

Select the Notification User role.

Click on Assign button.

Enter your HCP User ID and click on Assign.

Your user is now assigned and you will be able to call the REST API for push notifications.

Select the Administrator role.

Click on Assign button.

Enter your HCP User ID and click on Assign.

Your user is now assigned.

Now we are going to assign our HCP user to some roles of different HCP services. These are pre-requirements that we need to to follow to use Fiori Mobile as our packager. For more information, please access this: Fiori Mobile Prerequisites.

Go back to Services and click on Fiori Mobile.

Click on Configure Fiori Mobile.

Click on Roles and select the Account Admin role (scrow down to find it).

Click on Assign button.

Enter your HCP User ID and click on Assign.

Your user is now assigned.

Still at Roles, select the App Catalog Admin role.

Click on Assign button.

Enter your HCP User ID and click on Assign.

Your user is now assigned.

Still at Roles, select the App Catalog Publisher role.

Click on Assign button.

Enter your HCP User ID and click on Assign.

Your user is now assigned.

Still at Roles, select the Mobile Place User role.

Click on Assign button.

Enter your HCP User ID and click on Assign.

Your user is now assigned.

Click on Fiori Mobile in the up part of the page and then on Configure Mobile Packager.

Select Administrator and press Assign.

Enter your HCP User ID and click on Assign.

Go back to Services and click on Portal Service.

Click on Configure Portal Service.

Click on Roles and then select the TENANT_ADMIN role.

Click on Assign button.

Enter your HCP User ID and click on Assign.

Your user is now assigned.

3. Create Launchpad site on Portal Service

Fiori Mobile requires that the app be registered to Fiori Launchpad before being packaged. So, let us create a Fiori Launchpad site and make it default.

Go to Services and click on Portal Service.

Click on Go to Service.

Click on + sign.

Enter the Site Name: My Fiori Launchpad, select SAP Fiori Launchpad and click on Create.

A new tab with the Fiori Configuration Cockpit will open. Go back to the Site Directory tab.

Click on the arrow and select Publish.

In the confirmation window, click on Publish.

A confirmation message will appear:

Click on the Arrow and click on Set as Default.

Your Fiori LaunchPad site should have the default check:

 

4. Create a destination on HCP to access your OData service

When you create an SAPUI5 app that consumes an OData service using Web IDE, you need to create a destination on HCP to access this service. For this example, we will use the Suppliers and Products entity sets from a public OData service called Northwind.

On HCP cockpit, under the hamburger menu at left, click on Connectivity -> Destinations. Then click on New Destination.

Fill the destination configuration and additional properties as the following:

Name: Northwind
Type: HTTP
Description: Northwind OData Service
URL: http://services.odata.org
Proxy Type: NoAuthentication
Authentication: Internet
Additional Properties:
WebIDEEnabled / true
WebIDESystem / Northwind_Data
WebIDEUsage / odata_gen

Then click on Save button and on Check Connection. You should see a successful message.

5. Create a certificate for Mobile Secure

You will need to create a certificate that Fiori Mobile will use to publish your package for download.

Locate your keytool executable file inside the bin folder of you JAVA installation directory. For example, inside C:\Program Files\Java\jdk1.8.0_101\bin.

 

Open a cmd window and drag and drop the keytool executable file to the cmd window. A similar path should appear in your cmd window. You can do the same procedure in a Mac using the keytool command in a terminal if your path is correctly set.

Copy and paste the following parameters to generate the certificate and hit Enter.

C:\Users\i830336> “C:\Program Files\Java\jdk1.8.0_0_101\bin\keytool.exe” -genkey -v -keystore e2eworkshop.jks -keypass e2eworkshop -alias e2eworkshop -keyalg RSA -keysize 2048 -validity 9999

To generate the signing key, you will need to answer some questions.

You should have a .jks file in the folder where you have executed the keytool command. You will need it soon.

6. Enable HAT plugin

Still on HCP cockpit, under the hamburger menu at left, click on Services, look for SAP Web IDE and click on SAP Web IDE. If it is not enabled, enable it. Then click on Open SAP Web IDE.
On Web IDE, go into Tools -> Preferences.  Click on Plugins and enable Hybrid Application Toolkit.  Click on Save.

7. Create your SAPUI5 app

Let us finally create our app.

Still on Web IDE, select menu File -> New -> Project from Template.

Select SAP Fiori Master-Detail Application and click on Next.

Fill the Project Name field as FioriMobileEx and click on Next.

Warning: Enable as Mobile App was removed, because it is not necessary anymore.

On the Sources box at the left, click on Service URL. Click on the arrow of the system checkbox and select Northwind OData Service. Fill the next edit field with the following relative URL of the service: /v2/northwind/northwind.svc/. Then click on Test button to check if the OData service is correctly configured and working. Finally click on Next.

Fill the Template Customization screen with the following data:

Title: Suppliers and Products
Namespace: com.sap.northwind
Object Collection: Suppliers
Object Title: CompanyName
Object Unit of Measure: Country
Line Item Title: ProductName
Line Item Numeric Attribute: UnitPrice
Line Item Unit of Measure: QuantityPerUnit

Then click on Finish.

Check that your FioriMobileEx project was created. Select it and then click on the green play button to test it.

You should see something like this. Test and explore your app.

8. Deploy to HCP and register to Launchpad

Every time you want to package your SAPUI5 app after any change or for the first time, you need to deploy it to HCP first.

So, righ-click the FioriMobileEx project and select Deploy -> Deploy to SAP HANA Cloud Platform.

Click on Deploy button.

You should see a successful window. As you need to register your app to SAP Fiori Launchpad at least one time, click on Register to SAP Fiori launchpad button. Once done, next times when you deploy a new version of your app, you do not need to register to SAP Fiori Launchpad again.

Click on Next.

Give your app a title and a subtitle. If you want, change also the assigned icon, then click on Next.

Select the site that you marked as default in previous step. In our case, it is My Fiori LaunchPad. Leave other values as default, then click on Next.

Finally, click on Finish.

You should see a successful message. Click on OK.

9. Build packaged app with Fiori Mobile

The key step of this article has come. Let us package our app to use in an Android device.

Still on Web IDE, righ-click the FioriMobileEx project and select Fiori Mobile -> Build Packaged App.

If you want, insert a description and choose an icon for your app. Then click on Next.

Select the Android checkbox, click on the drop-down menu and select New Signing Profile. Then click on Next.

Enter any name you want. Import the signing key (jks file) you created in previous step, enter the password you defined when the signing key was generated and insert the KeyChain Alias: e2eworkshop. Finally, click on OK.

Click on Next and then on Build.

The build process will start and it will take a while. In the future, build time will be reduced.

Once the build process ends, a QR code should appear in your screen.

10. Download and install the app

With your Android device, use a QR Code reader app to read the generated QR code.

Open the read URL in a browser, enter your HCP credentials and click on Log On.

Download and install the generated apk file.
 

11. Test

The last step now is to test your app. So, open it.

Insert your HCP credentials and press Log On.

Press Disable Passcode or just define a password for your app.

Finally, you should see your app working. Play with it!
 

Congratulations! It’s done.

A last comment that I need to write here is that today, all Kapsel plugins are added to an app packaged by Fiori Mobile. This is why your app is that big. In the future, you will be able to choose wich pugins you want to add, what should decrease dramatically the size of your app.

To report this post you need to login first.

30 Comments

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

  1. Ravi Singhal

    Hi Daniel,

    Thankyou for the amazing work.

    How can i develop the apk for my custom app and how can to deploy it in production environment.

    Regards,
    Ravi

    (1) 
    1. Daniel Silva Post author

      Hi, Ravi.

      It’s the same procedure. You will only pick the iOS option on step 10, screen “Platforms & Signing keys” and create a new signing key. For that, you need an Apple Developer Certificate. I’ve never done before, but it should be simple.

      Regards,

      Daniel

      (1) 
  2. Tijo Simon

    Great Blog and share. Deploy/Package of apps using Fiori apps is definitely much better than using HAT.

    Would you expect non HAT based deploy to be obsolete going forward? Also, I am thinking it is best to build applications just using the Fiori template. What do you think?

    Regards,

    Tijo Simon

    (1) 
    1. Daniel Silva Post author

      Hey, Tijo.

      I think both solutions will remain and we will be able to pick the best for us. I also think using Fiori Mobile is easier and better.

      Regards,

      Daniel

      (0) 
  3. Parag Jain

    Hello Daniel,

    “Then go to Services, search mobile in the search input field. Scroll down, find the Fiori Mobile service in the Mobile Services area, then click on it. ”

    Is this available only in trial account ? We have a development account with HCPms license and do not find this option.

    Second question – the mobilized fiori app, can it also work “occasional offline” by using the technical cache.

    Regards,
    Parag.

    (1) 
    1. Daniel Silva Post author

      Hi, Parag.

      Probably your account does not have this service. Check with your channel in SAP how to add it.

      The right way of using offline capabilities is using SMP SDK (odata plugin) and HCP mobile services and operations. It’s not hard to develop.

      Regards,

      Daniel

      (0) 
  4. Catadman Lorbe

    Hello Daniel,

     

    Were you also able to run your application on an Android Emulator? I finished my application and it’s running successfully on a mobile device but not on an emulator.

    I initially got this error-

    Application Error – The connection to the server was unsuccessful. (file:///android_asset/www/index.html)

    After some tweaking and adding device configurations I ran the application again on an emulator and I got an empty screen.

    Would appreciate your reply.

     

    Thanks,

    Lorbe

     

    (1) 
    1. Daniel Silva Post author

      Hi, Catadman.

      I don’t recommend using Android emulators, because in general they’re slow and problematic. Are you behind any firewall?

      Regards,

      Daniel

      (0) 
  5. Dhara Patel

    Hi Daniel,

    I successfully installed FioriMobileEx.apk file in my mobile but when i tried to open the application.

    It shows below error,

    Service cannot be reached

    URL call was terminated because the corresponding service is not available.

    Note: The termination occurred in system with error code 404 and for the reason Not found.

    Please select a valid URL.

    HTTP 404-Not found.

    Thanks

    Dhara

     

    (0) 
    1. Daniel Silva Post author

      Hi, Dhara.

      That’s really weird. So, doesn’t the app even open? Are you behind any firewall? Is the service working when you test on Web IDE?

      Regards,

      Daniel

      (0) 
  6. Sandip Agarwalla

    Hello Daniel, @daniel.silva01

    Thanks for publishing this blog on the Fiori Mobile Service.

    Does it mean you can package a App completely on the cloud without the need of any infrastructure ( Mac ios for ios App and so on)? Also can this mobile service be used to package any UI5 App, lets standalone which does not connect to any SAP system? or, is it only used for fiori-type apps which are hosted on the Fiori Launchpad. Currently we use command line tools to create the hybrid app using Cordova, and maintaining all the softwares is a headache.

    Thanks for your inputs.

    Regards

    Sandip

    (1) 
    1. Daniel Silva Post author

      Hi, Sandip.

      Yes, totally packaged on Cloud without any installation need. Yes, any UI5 app can be packaged. However, the Launchpad is there, i.e. your app is inside Fiori Launchpad. However, if you have just one app, it goes directly to this app and you don’t see the tiles of your Launchpad. Unless you press back on main screen, then you’re going to see the tile of your app. I don’t see many disadvantages with that considering all the time you’re saving. Give it a try!

      Regards,

      Daniel

      (1) 
      1. Sandip Agarwalla

        Hello Daniel

        Many thanks for your inputs.

        The fiori mobile service does look promising,  we will surely be trying out soon.

        Just another question, is it mandatory that the App you are packaging be hosted on the launchpad initially? We do have few custom fiori apps which may not be hosted on the Launchpad. Can we use the could packaging for such Apps.

        Regards

        Sandip

        (0) 
        1. Daniel Silva Post author

          Hey, Sandip.

          You need to register it a to Fiori Launchpad, not necessarily to your default one (remembering you can have many Fiori Launchpads). It should not be a problem, should it?

          Regards,

          Daniel

          (0) 
    2. Daniel Silva Post author

      Sorry, Sandip.

      I meant any SAPUI5 project that has a manifest.json file.

      Let me know if you have questions.

      Regards,

      Daniel

      (0) 
  7. Sudhir Lenka

    Hi Daniel,

    I am trying this app in my HCP trial account but I am struggling at step-9 Build packaged app with Fiori Mobile. Every time I click this option I get one message that Not ready for Fiori Mobile build as attached. I can see the App is successfully registered with Fiori Launchpad and the Site is also published as default.

    Could you please guide me here to get the App packaged.

    One observation want to highlight, when I created the App/project at Step-7 I could not see any check box to enable the App as mobile App(screen shot attached-2).

     

    Thanks,

    Sudhir.

     

    (1) 
    1. Ludo Noens

      Hi Sudhir,

      We have simplified the mobile enablement in our 1703 release (available since 30 March). You no longer need to tick the box for “enable the app as mobile app”. We will do this behind the scenes, once you configure the mobile app.

      The menu item “Enable as Mobile App” was also removed.

      Regards,

      Ludo Noens

      Product Owner – Fiori Mobile DevX (incl. HAT)

      (1) 
      1. Sudhir Lenka

        Thanks Ludo.

        Now it makes clear.

        I tried for Android platform and it works perfectly fine.

        Is there any plan for Windows platform?

        Thanks,

        Sudhir.

        (1) 
        1. Ludo Noens

          Hi Sudhir,

          We are considering support for the Windows platform. It depends a bit on the customer demand for this.

          Cheers,

          Ludo

          (1) 
  8. Joel Provost

    Hi Daniel,

    I followed thoroughly the tutorial but still can’t figure out why my Fiori Mobile>Build is empty. I have no build options…

    Any hint of what would be the cause for this?

    Thanks!

    (1) 
    1. Zhigao Chen

      Hi Joel,

       

      Have you already enabled the Fiori Mobile service in SAP Cloud Platform cockpit? And also check if there is a “fiorimobileapi” destination is present in your account.

       

      Regards, Zhigao

       

      (2) 
      1. Joel Provost

        Hi Zhigao,

         

        The Fiori Mobile service was indeed enabled and I already had a ‘mobileservices’ destination. I just renamed it to ‘fiorimobileapi’ and it fixed the problem! I can now see the build option in the Fiori Mobile menu 🙂

         

        Thanks for the swift and accurate response!

        (1) 
  9. Ketan Badnore

    Hi,

    Great blog. i followed the step mentioned in your and able to create APK file of my application. I can see the link create to download that apk file but not able to dlwonload that file. On downloading it, it stops downloading after some time.

    Also I am able to see an application created in hcpmsadmin. When I clicked on that application, it gives me error “You are not authorized to access SAP Cloud Platform, mobile service for development and operations. Log in with the correct role, or contact system administrator.” Could you please share something related to configure roles and groups assigned to the user and related to hcpms and mobile secure / mobile place.

     

    Thanks,

    Ketan

    (0) 
  10. Kumar Jayant

    Hi,

    Having followed all the steps, i still dont see the “Build Packaged App“.

    As i understand, there should have been a destination “fiorimobileapi” which wasn’t there. Only destination available under Mobile packager was “webidetesting”. Anways, with some other blogs help, i created a new destination with the below details

    It did not help either. Not sure anymore what to to try out to fix this issue. Any help to resolve this would be appreciated.

    Thanks

    Jayant

    EDIT – The issue was resolved by creating the same destination i.e. “fiorimobileapi” under the subaccount .

    (0) 
  11. Ratan Kumar Pentela

    Helo Daniel

    Thank you very much. I have done this example and got one doubt that, how to create that .JKS file in Java. can you please explain that part also?

    (0) 

Leave a Reply