Skip to Content

How to mobilize your HTML5/SAPUI5 app with Fiori Mobile

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

You must be Logged on to comment or reply to a post.
    • 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.



  • 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?


    Tijo Simon

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



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


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



      • Hi Daniel,

        Can the above method be used to develop complete offline apps without using HAT? As you had mentioned using HAT is a real pain.




        • Yes, Reshma.

          Follow this blog article:



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





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




    • 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?



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



    • 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!



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



        • 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?



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





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


      Ludo Noens

      Product Owner - Fiori Mobile DevX (incl. HAT)

      • Thanks Ludo.

        Now it makes clear.

        I tried for Android platform and it works perfectly fine.

        Is there any plan for Windows platform?



        • Hi Sudhir,

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



  • 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?


    • 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


      • 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!

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




    • Hi, Ketan.

      You cannot edit anything in Development & Operations service because everything should be configured under Fiori Mobile service. Go there and you'll find your apps under Apps menu.

      The download I also have sometimes. My only advise is keep trying. Maybe the server is too busy.



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



    EDIT - The issue was resolved by creating the same destination i.e. "fiorimobileapi" under the subaccount .

    • Hi Kumar,


      I am facing the same issue , but i dont fully understand your EDIT of solution:

      1. Creating same destination: meaning creat destination with what url? the application url?
      2. Under "subaccount" - what do you mean? where is it? in SAP HANA CLOUD? in SAP Mobile Service for Development and Operations?

      Your help will be very much appreciated!


      • Hi Meirav,


        Back then, there used to be "Fiori Mobile" service with the destination fiorimobileapi already available. I manually created the mentioned destination i.e. fiorimobileapi under my subaccount(SCP Trial account top level) with the details same as the destination in "Fiori Mobile" service.

        I can see that things have changed since then. All the best!

        FYI - I am planning to revisit the packaging in SAP in the next few weeks. In case i find something of interest related to your questions, i will let you know.



        • Hi Jayant,


          Thank you very much for your reply.

          It seems that things are changing rapidly and it's almost impossible to track the changes...

          Can I ask you, from your personal expirience and knowledge, what is the best way to build SAPUI5 offline oData based app these days?



    • Hi, Ratan.

      The command to generate the jks file is above, but not necessary anymore. During the process of building the app, when you need to give the certificate, you have the option to create one through the UI. So, it's much easier today.



  • Hi Daniel,

    In one of your previous blogs you mentioned issues with URL Rewriting for CRUD apps. I'm experiencing that issue in this Fiori Mobile scenario, using the CRUD version of the service used in your example.

    Do you know, how to set up the rewriting rule for it? I've tried everything that you mentioned in your blog, as well as in the official SAP help document and nothing works.

    Thanks in advance,

      • Hi Daniel,

        In this blog:

        I only get this error when I package and deploy the app using Fiori Mobile. When I use the hybrid application toolkit there is no issue since I can control all the parameters in Mobile Services.



  • Hi Daniel

    Firstly thanks for a great tutorial. However, I have a big issue. After following all your steps, my app still doesn’t work.  The issue I have is that it doesn’t load the resources when building as you can see from the log:

    “missing_resources”: [
    “resourceType”: “library”,
    “resourceId”: “sap.ui.core”,
    “resourcePath”: [


    It doesn’t load any of the resorces and when I launch my app it’s just a blank screen. Any help would be much appreciated.



  • Hi Daniel,

    thanks for the tutorial. I have just a problem: when I run the app in an android device (i tried to use three different devices), in the last step, instead to see the app developed ,a white screen appears and remains. How can I do?



    • Hi Daniel,

      In this blog:

      you can to learn debugging at device.



      • Hello Ana,

        I encountered the same issue experienced by Luca. When I run the app in my Android Device, a white screen with a busy loading appears and remains. I debug my device using the link you provided above and I got these errors.

        Can you please help me solve this issue? Thanks. ?


        John Rey

        • Fiori mobile app shows a blank screen with busy indicator


          Fiori Mobile app shows a blank screen with busy indicator after the enable/disable passcode screen.


          1. In the SAP Cloud Platform cockpit, choose Start of the navigation path Services Next navigation step Portal Next navigation step Go to Service End of the navigation path.

          2. Click Site Directory.

          3. Hover the mouse over the default site tile and click Edit. The Fiori Configuration Cockpit opens up.

          4. In the left pane of the cockpit, click Settings.

          5. In the bottom right corner, click Edit.

          6. Under the System Settings change the SAPUI5 Version from Innovation to Custom. Also, choose a version of 1.46.x. Click Save.

          7. In the top right corner, click Publish site. In the dialog box that opens up, click Publish. You can see that the status of the site appears "Published" with a green color icon.

          8. Rebuild the app in SAP Web IDE.

  •  Hi ALL ,
    Thank you Daniel for the tutorial .
    I have  a problem when I run the application from the mobile device ,the debugger show the following error.
    Could anyone help me out?
    Thank you .
    Ines Azouzi.
  • /
  • Hello ,

    Nice Blog and Well Explained..

    While packaging the mobile application, i am facing the below error. I cross checked but no luck.'Fiori%20Cloud%20Edition')/pingFioriApplicationServer 


    Please help me in this to resolve.,


    Shyam K Gangisetti

  • Great blog post! I’ve built a test app and provisioned it on an iOS device  what I’m wondering though is how to remove the FLP header so that it’s purely my webide app.the flp header takes up unnecessary screen real estate.

    i know there’s a URL parameter when you’re running you app in the browser to go headerless - but I don’t seem to have access to the URL that’s used when building an app as in this blog?.


  • Hi

    Great post indeed!

    I have build an extension on an existing UI5 application so that I could package it using the HAT.
    Build succeeds and I can run the application on my Android device.

    However, the theming seems to be falling back to sap_hcb instead of the sap_belize which I put in the index.html (of both the extension and parent app)

    Do you have any idea where this could be coming from?

  • Hello experts,

    I tried to reproduce all the steps using SAP Web IDE Full-Stack (Fiori Mobile was disabled on previous version of Web IDE), after successful deployment to CP, registration to Fiori Launchpad and application build I have a problem when trying to build packaged application.

    Following error is displayed in the log:

    Error: /mnt/workspace/FioriMobileEx/platforms/android/gradlew: Command failed with exit code 1 Error output:
    FAILURE: Build failed with an exception.
    * What went wrong:
    A problem occurred configuring root project 'android'.
    > Failed to notify project evaluation listener.
       > Could not resolve all dependencies for configuration ':_debugApkCopy'.
          > Could not find
            Searched in the following locations:
            Required by:
                project :

    Can you advise, how can I build and run mobile app ?

    Kind regards,


  • Hello experts,

    I am creating ESS and MSS hybrid apps, I am new to mobile development, How do we enable SSO via an IDP server for all users using the  hybrid apps created in web ide full stack?