Skip to Content
Author's profile photo Daniel Silva

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

Assigned tags

      65 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sudhanshu Srivastava
      Sudhanshu Srivastava

      Awesome !!

      Author's profile photo Ravi Singhal
      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

      Author's profile photo Daniel Silva
      Daniel Silva
      Blog 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

      Author's profile photo Ravi Singhal
      Ravi Singhal

      Hi Daniel,

      I have a custom app and i dont have any manifest.json file in it.  I dont have any option 'Build Packed App' enabled for my app as it says your project template does not support build packaged app.
      I have created a new discussion also if you can answer there it would be a great help..
      https://answers.sap.com/questions/93149/index.html

      Thanks,
      Ravi

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Daniel Silva
      Daniel Silva
      Blog 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

      Author's profile photo Parag Jain
      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.

      Author's profile photo Daniel Silva
      Daniel Silva
      Blog 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

      Author's profile photo Former Member
      Former Member

      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.

       

      Regards

      Reshma

      Author's profile photo Daniel Silva
      Daniel Silva
      Blog Post Author

      Yes, Reshma.

      Follow this blog article: https://blogs.sap.com/2017/03/22/make-offline-app-using-sap-cp-mobile-service-for-sap-fiori-part-1/

      Regards,

      Daniel

      Author's profile photo Former Member
      Former Member

      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

       

      Author's profile photo Daniel Silva
      Daniel Silva
      Blog 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

      Author's profile photo Former Member
      Former Member

      Hi Daniel,

       

      Thanks for the reply. What is recommended then? On your question, no.

       

      Lorbe

      Author's profile photo Daniel Silva
      Daniel Silva
      Blog Post Author

      Hi, Lorbe.

      Use a real device. It should work much better.

      Regards,

      Daniel

      Author's profile photo Former Member
      Former Member

      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

       

      Author's profile photo Daniel Silva
      Daniel Silva
      Blog 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

      Author's profile photo Sandip Agarwalla
      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

      Author's profile photo Daniel Silva
      Daniel Silva
      Blog 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

      Author's profile photo Sandip Agarwalla
      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

      Author's profile photo Daniel Silva
      Daniel Silva
      Blog 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

      Author's profile photo Daniel Silva
      Daniel Silva
      Blog Post Author

      Sorry, Sandip.

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

      Let me know if you have questions.

      Regards,

      Daniel

      Author's profile photo Sudhir Lenka
      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.

       

      Author's profile photo Sudhir Lenka
      Sudhir Lenka

      It's working fine now.

      First I did Build Developer Companion then I tried Build Packaged App.

      Thanks,

      Sudhir.

      Author's profile photo Ludo Noens
      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)

      Author's profile photo Sudhir Lenka
      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.

      Author's profile photo Ludo Noens
      Ludo Noens

      Hi Sudhir,

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

      Cheers,

      Ludo

      Author's profile photo Joel Provost
      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!

      Author's profile photo Zhigao Chen
      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

       

      Author's profile photo Joel Provost
      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!

      Author's profile photo Ketan Badnore
      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

      Author's profile photo Daniel Silva
      Daniel Silva
      Blog Post Author

      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.

      Regards,

      Daniel

      Author's profile photo Former Member
      Former Member

      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 .

      Author's profile photo Shyam Gangisetti
      Shyam Gangisetti

      Hello Kumar,

      I am also facing the same issue. Still unable to resolve since 2 days. Your help is much needed here.

      BR,

      Shyam K Gangisetti

      Author's profile photo Former Member
      Former Member

      Hi Shyam,

      As updated in my response itself, my issue was resolved by adding fiorimobileapi destination in the subaccount "Fiori Mobile". This was more than 6 months ago. I wouldn't be surprised if some changes has happened since then that is causing your issue. Probably if you detail out a bit, maybe me or others in this forum can help.

      Regards

      Jayant

       

      Author's profile photo Shyam Gangisetti
      Shyam Gangisetti

      Hello Jayant,

      I have followed updated response and able to progress. But now am facing some different error. Unable to get the solution for the same.the error speaks like below.

      ( https://webide-ixxxxxxtrial.dispatcher.hanatrial.ondemand.com/destinations/fiorimobileapi/product-api.svc/FioriApplicationServers('Fiori%20Cloud%20Edition')/pingFioriApplicationServer 403 (Forbidden))

      Please help me in this.

      BR,

      Shyam K Gangisetti

      Author's profile photo Mikael Gurenius
      Mikael Gurenius

      Hey! Did you solve this issue?

       

      Author's profile photo meirav weinstein
      meirav weinstein

      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!

      Meirav

      Author's profile photo Former Member
      Former Member

      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.

      Thanks

      Jayant

      Author's profile photo meirav weinstein
      meirav weinstein

      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?

      Thanks,

      Meirav

      Author's profile photo Ratan Kumar Pentela
      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?

      Author's profile photo Daniel Silva
      Daniel Silva
      Blog Post Author

      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.

      Regards,

      Daniel

      Author's profile photo Former Member
      Former Member

      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. http://services.odata.org/V2/OData/OData.svc/

      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,

      Author's profile photo Daniel Silva
      Daniel Silva
      Blog Post Author

      Sorry, Diego.

      Can you clarify what blog article are you referring to?

      Regards,

      Daniel

      Author's profile photo Former Member
      Former Member

      Hi Daniel,

      In this blog: https://blogs.sap.com/2015/08/27/different-rewrite-modes-require-different-service-root-urls/

      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.

      Regards,

      Diego

      Author's profile photo Candra Prabha Pradipta
      Candra Prabha Pradipta

      Hi Daniel

      Does this eligible for non-HANA application also ?  We have a Solution Manager 7.2 (non-HANA) would like to make it mobilize, does this method workable ?

      Thanks.

       

      Author's profile photo Daniel Silva
      Daniel Silva
      Blog Post Author

      Hi, Candra.

      Any backend that provides an OData service can be mobilized using this example.

      Regards,

      Daniel

       

      Author's profile photo Daniel Silva
      Daniel Silva
      Blog Post Author

      Hi, Candra.

      Any backend that provides an OData service can be mobilized using this example.

      Regards,

      Daniel

      Author's profile photo Virginie-Laure Werb
      Virginie-Laure Werb

      Hi,

      very helpful tutorial

      thanks,
      V

       

      Author's profile photo Former Member
      Former Member

      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”: [
      “www/resources/jquery-ui-position.js”,
      “www/resources/jquery-ui-datepicker.js”,
      “www/resources/jquery-ui-core.js”,
      “www/resources/sap-ui-testenv.js”,
      “www/resources/sap/ui/thirdparty/jqueryui/themes/base/jquery.ui.base.css”,
      “www/resources/sap/ui/thirdparty/jqueryui/themes/base/jquery.ui.core.css”,
      “www/resources/sap/ui/thirdparty/jqueryui/themes/base/jquery.ui.resizable.css”,
      “www/resources/sap/ui/thirdparty/jqueryui/themes/base/jquery.ui.selectable.css”,
      “www/resources/sap/ui/thirdparty/jqueryui/themes/base/jquery.ui.datepicker.css”,
      “www/resources/sap/ui/thirdparty/jqueryui/themes/base/jquery.ui.theme.css”,
      “www/resources/sap/ui/thirdparty/jqueryui/themes/base/jquery.ui.all.css”,
      “www/resources/sap/ui/core/library.dependencies.xml”,
      “www/resources/sap/ui/core/library.dependencies.json”,
      “www/resources/sap/ui/core/themes/base/LocalBusyIndicator.less”,
      “www/resources/sap/ui/core/themes/base/Icon.less”,
      “www/resources/sap/ui/core/themes/base/BlindLayer.less”,
      “www/resources/sap/ui/core/themes/base/img-RTL/1×1.gif”,
      “www/resources/sap/ui/core/themes/base/BusyIndicator.less”,
      “www/resources/sap/ui/core/themes/base/img-RTL/message/16×16/Message_Icon_Error.png”,
      “www/resources/sap/ui/core/themes/base/TechnicalInfo.less”,
      “www/resources/sap/ui/core/themes/base/Shadow.less”,
      “www/resources/sap/ui/core/themes/base/img-RTL/Busy.gif”,
      “www/resources/sap/ui/core/themes/base/img-RTL/message/32×32/Message_Icon_Error.png”,
      “www/resources/sap/ui/core/themes/base/img-RTL/message/32×32/Message_Icon_Information.png”,
      “www/resources/sap/ui/core/themes/base/img-RTL/message/16×16/Message_Icon_Warning.png”,
      “www/resources/sap/ui/core/themes/base/img-RTL/message/16×16/Message_Icon_Success.png”,
      “www/resources/sap/ui/core/themes/sap_hcb/BrowserScrollbar.less”,
      “www/resources/sap/ui/core/themes/sap_hcb/Icon.less”,
      “www/resources/sap/ui/core/themes/base/img-RTL/message/32×32/Message_Icon_Success.png”,
      “www/resources/sap/ui/core/themes/base/ScrollBar.less”,
      “www/resources/sap/ui/core/themes/base/img-RTL/message/32×32/Message_Icon_Warning.png”,
      “www/resources/sap/ui/core/themes/base/View.less”,
      “www/resources/sap/ui/core/themes/base/media.less”,
      “www/resources/sap/ui/core/themes/sap_belize/Icon.less”,
      “www/resources/sap/ui/core/themes/sap_hcb/LocalBusyIndicator.less”,
      “www/resources/sap/ui/core/themes/base/shared.less”,
      “www/resources/sap/ui/core/themes/sap_belize/Shadow.less”,
      “www/resources/sap/ui/core/themes/base/parameterClasses.less”,
      “www/resources/sap/ui/core/themes/base/img-RTL/message/16×16/Message_Icon_Information.png”,
      “www/resources/sap/ui/core/themes/sap_hcb/Shadow.less”,
      “www/resources/sap/ui/core/themes/sap_hcb/shared.less”,
      “www/resources/sap/ui/core/themes/sap_belize/DatePicker.less”,
      “www/resources/sap/ui/core/themes/sap_belize/parameterClasses.less”,
      “www/resources/sap/ui/core/themes/sap_belize/shared.less”,
      “www/resources/sap/ui/core/themes/sap_belize/BrowserScrollbar.less”
      ]
      },

      ….

      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.

      Thanks

      Jean

      Author's profile photo Former Member
      Former Member

      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?

       

      Thanks,
      Luca

      Author's profile photo Former Member
      Former Member

      Hi Daniel,

      In this blog: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=en

      you can to learn debugging at device.

      Regards,

      Ana

      Author's profile photo Former Member
      Former Member

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

      Thanks,

      John Rey

      Author's profile photo Ludo Noens
      Ludo Noens

      Fiori mobile app shows a blank screen with busy indicator

      Symptom

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

      Workaround:

      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.

      Author's profile photo Former Member
      Former Member

      Thanks Ludo! This works fine on me now. 🙂

      Author's profile photo Former Member
      Former Member

      Hi ,

       

      I am also facing the same issue , Please let me know   how to resolve it.

       

      thanks and Regards,

      Ashwini Damle

      Author's profile photo Former Member
      Former Member

      Hi All,

       

      It works now .  Thanks Ludo Noens.

       

      Regards,

      Ashwini Damle

      Author's profile photo Former Member
      Former Member

      Hi Daniel ,

      Thanks For This Detailed Blog.

       

      Thanks,

      Arun

       

       

       

      Author's profile photo Former Member
      Former Member
       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 .
      
      Regards,
      Ines Azouzi.
      
      
      Author's profile photo Venkatesh Machineni
      Venkatesh Machineni

      Hi Daniel,

      Awesome article.

      I followed all the steps, but when I am trying to Build App I am getting below error.

      Please guide me.

       

      Thanks,

      Venkatesh.

       

      Author's profile photo Shyam Gangisetti
      Shyam Gangisetti

      Hello Venkatesh,

       

      Were you able to close the issue?? If so needed your help in this.

       

      BR,

      Shyam K Gangisetti

      Author's profile photo Shyam Gangisetti
      Shyam Gangisetti

      Hello ,

      Nice Blog and Well Explained..

      While packaging the mobile application, i am facing the below error. I cross checked but no luck.

      https://webide-iXXXXXXtrial.dispatcher.hanatrial.ondemand.com/destinations/fiorimobileapi/product-api.svc/FioriApplicationServers('Fiori%20Cloud%20Edition')/pingFioriApplicationServer 

       

      Please help me in this to resolve.,

      BR,

      Shyam K Gangisetti

      Author's profile photo Jason Scott
      Jason Scott

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

       

      Author's profile photo Former Member
      Former Member

      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?

      Author's profile photo Jakub Plocki
      Jakub Plocki

      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 com.android.support:support-v4:26.0.2.
              Searched in the following locations:
                  file:/usr/local/android/android-sdk-linux/extras/android/m2repository/com/android/support/support-v4/26.0.2/support-v4-26.0.2.pom
                  file:/usr/local/android/android-sdk-linux/extras/android/m2repository/com/android/support/support-v4/26.0.2/support-v4-26.0.2.jar
                  file:/mnt/workspace/FioriMobileEx/platforms/android/sdk-manager/com/android/support/support-v4/26.0.2/support-v4-26.0.2.jar
              Required by:
                  project :

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

      Kind regards,

      Jakub

      Author's profile photo Kaleem Danish Mohammed
      Kaleem Danish Mohammed

      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?