Skip to Content
Author's profile photo Ludo Noens

What’s new in Hybrid App Toolkit release 1807: Custom Fiori Client

Today we have released another increment of Hybrid Application Toolkit (version 1.31) that offers a couple of updates worth mentioning in a blog post:

  • Capability to create Custom Fiori Client apps
  • Added UI5 version 1.54.6 for packaged apps
  • Ability to download the complete project generated with our Cloud Build Service.

Custom Fiori Client

In mobile service for SAP Fiori (formerly known as Fiori Mobile), users had the ability to create Custom Fiori Client apps where you could add the Cordova plugins you needed. We have now added this capability to our developer experience provided in SAP Web IDE Full-Stack.

Let’s go through the steps here. To start, we create a new project from a template. We have added a template called Custom Fiori Client Application.

Give the project a name.

Provide App ID, App Name and some optional details.

And finally, provide the Fiori URL. This can be either a predefined Fiori destination that was already created in your landscape, or you can specify the Fiori Application URL manually.

 

Once you are done with the project creation wizard, you will have your project in the SAP Web IDE workspace. Note: you cannot preview this app, as it is basically an empty container project. Important to note is that you can further customise the project to your needs. E.g. by modifying the config.xml and/or appConfig.js file available in the project.

You can now select the Cordova plugins you like to add to this Fiori Client.

In this example, I’ve searched for NFC plugins available for both iOS as well as Android platforms.

Once your selection is saved, you can trigger a cloud build for this app.

Similar to building packaged apps, you can customise the application’s icon and splash screen, and the name as displayed on the mobile phone.

In the remaining steps, you can configure the signing profile, build options and push certificate. This is similar to Packaged apps, so I won’t repeat that here. Once the build is finished, a popup will show the QR code to download the app on your device. You can also download the app to your workstation with the link provided. In addition, you can download the project if you had selected that option. More on this topic later in this blog.

Take note that Fiori Client is a typical online app. It is basically an empty container that loads it’s content (web assets) from the specified URL. This type of app cannot support offline. Hence, the offline plugin is not included in this build.

UI5 update

Some users are keen on using controls recently added to UI5. Others want to ensure they have to latest bug fixes from UI5 (such as a fix for apps showing a blank screen on iOS). Our previous release was providing UI5 version 1.50.8 for Packaged Apps, which some consider to be a bit old by now. In this release we have added to option to include version 1.54.6 in the apps.

Download XCode or Android Studio project

Developing hybrid app in the cloud doesn’t require much to start with. The only thing you’ll need is a web browser. You don’t need to install, update and maintain a local development environment. However, some developers who build apps using our Cloud Build Service, will feel that they’ve lost some control on the project. The project is not built on their workstation and this makes it harder to debug issues that might pop up. We’ve thought about that and can now provide you a solution. You can start building your projects in the cloud, and when you really need to, download the project to your workstation for troubleshooting. By default, the option to save the project is disabled. In the build wizard, you’ll need to tick this option when you really want to save the project. Take note that this will increase the time it takes to build (actually, the additional time is related to storing the projects).

 

Once the build is finished, you will be notified with a popup dialog showing the QR code, the link to the app for downloading to your workstation and now also a link to the project.

The projects are downloaded as zip file and can be a several hundreds of MegaBytes in size. Unzip the projects in the folder of your choice. For iOS apps, you simply load the project in XCode. For Android apps, you load the project into Android Studio.

To open the Android project in Android Studio, open Android Studio and select to open an existing project.

Next, navigate to the folder where you have extracted the downloaded archive and select the android folder in the platforms folder.

When Android Studio recommends to update the Android Gradle Plugin, please do NOT update. Once our cloud build utilises the latest Mobile SDK, this will no longer be required.

Once the project is loaded, you can build the app to run on your device or emulator.

Note: if you are using a trial account, downloading the project(s) and the apps can take quite a bit of time. The reason is that trial accounts are hosted in Germany and depending on your location, network bandwidth influences the download times significantly.

 

By providing you a means to continue your development locally on your workstation, we have reached a point where we can move the HAT local add-on into “end of maintenance”. I’ve informed you about our plans in this blog. We will evaluate your feedback on this 1807 release and decide when to officially call for this end of maintenance.

As usual, feedback is welcome.

Assigned tags

      45 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Abdul Waheed
      Abdul Waheed

      Hi Noens,

      Thanks for the excellent blog.

      It seems there is some issue with app id, Its not accepting any app id. can you look into this please

       

      Regards,

      Abdul Waheed

       

      Author's profile photo Ludo Noens
      Ludo Noens
      Blog Post Author

      Hi Abdul,

      This error indicates that you already have an app in SAP mobile service using the same App ID. Please make sure you enter an App ID that is unique.

      Thanks,
      Ludo

      Author's profile photo Abdul Waheed
      Abdul Waheed

      Thanks Ludo.

      The issue was with browser cache as it stored the error. I reloaded the browser & its working fine.

      Thanks.

      Author's profile photo Tim Schomaker
      Tim Schomaker

      Hello Ludo,

      this problem still seems to occur, even with clearing the cache and without having another mobile service with the same App ID.

      We tried it on different Web IDE Full-Stacks and it always prompts this error message.

      Best regards and thanks,

      Tim

       

      Author's profile photo Olivier Souksamran
      Olivier Souksamran

      Dear Tim Schomaker

      Have you solved your issue ? It seems I get the same error, no matter i clear the cache...

      Thanks for your feedback.

      Regards,

      Olivier

      Author's profile photo Suryabhan Maurya
      Suryabhan Maurya

      Hi Tim,

      is this issue resolved I am still facing this issue?

      I have cleared the cache number of times but no good.

       

      Best Regards and thanks,

      Suryabhan

      Author's profile photo Olivier Souksamran
      Olivier Souksamran

      Dear Ludo Noens , dear Tim Schomaker ,

      The issue is still there... I guess this is a global WebIDE bug and I wander how this is actually possible... Are Suryabhan Maurya and I the only ones who are trying to get this working?

      I can't believe only two of us are using this cloud service?!

      Regards,

      Olivier

      Author's profile photo Ludo Noens
      Ludo Noens
      Blog Post Author

      Hi,

      have you checked the apps in SAP Mobile Services and confirmed the app id is not in use already ?

      Are you using a trial account ?

      Thanks,
      Ludo

      Author's profile photo Olivier Souksamran
      Olivier Souksamran

      Dear Ludo Noens ,

      Thank you for your answer. Actually, This is my first app I try to create and I am not familiar with SAP Mobile Services... I just can't get why there are 3 entries named "Mobile Services, preview", "Mobile Services, users" and "Mobile Services, consumer" under Services of my SCP account...

      Do you have any links you can provide in order to get me started please? It would be a great help for me because I am totally lost.

      I am using a productive SCP account.

      Thank you !

      Olivier

       

      Author's profile photo Ludo Noens
      Ludo Noens
      Blog Post Author

      To understand the difference in versions, please check this blog: https://blogs.sap.com/2017/09/08/understanding-difference-between-productive-vs-preview-edition-of-sap-cloud-platform-mobile-service-for-development-operations/

      To find out which apps you've already created: in SAP Web IDE, go to menu Tools > SAP Cloud Platform Cockpit.

      In the SAP Cloud Platform Cockpit, select Destinations and find the mobileservices destination. This destination is used by SAP Web IDE and will point to a specific version of Mobile Services.

      In the SAP Cloud Platform Cockpit, select Services > Mobile Services (<version used in mobileservices destination>).

      Select Go to Service. Go to Mobile Applications > Native/Hybrid. The testapplication with app id this.is.a.test should be listed here. If you want to recreate it in SAP Web IDE, please delete it here.

      Hope this helps !

      Regards,
      Ludo

      Author's profile photo Louis-Arnaud BOUQUIN
      Louis-Arnaud BOUQUIN

      Hi Olivier,

       

      Please make sure that you have followed the prerquisite https://help.sap.com/viewer/8e5c63b6470a4255861c259f3b2d9b41/Cloud/en-US/aa8715ac0a914f12b90fbb8865612c71.html.

      The roles need to be assigned to your sap WebIde user, not to the cockpit user.

      Author's profile photo Olivier Souksamran
      Olivier Souksamran

      Thank you so much Louis-Arnaud, you made my day !

      Author's profile photo Thilak Balachandiran
      Thilak Balachandiran

      Thanks Ludo. I couldn't find any difference between doing the same in SCP mobile services. Could you please let me know what is the difference? Thanks, Thilak

      Author's profile photo Ludo Noens
      Ludo Noens
      Blog Post Author

      You cannot add plugins in SCP mobile services.

      Author's profile photo ferdaouss ahan-nuk
      ferdaouss ahan-nuk

       

      hello Ludo, I have a problem whit the version 1.29.7 of SAP_HAT_LOCAL when I want to add a platform android in cordova , I think because of versions are not compatibles .

      so I want to download the latest version of SAP_HAT_LOCAL but I couldn’t find the .zip to download it .

      there are the versions that I have :

      node -v
      v5.4.1

      npm -v
      3.3.12

      bower -v
      1.8.4

      cordova -v
      6.5.0

      and there is the error that I have when I want to execute the command : cordova platform add android@6.2.1 :

      ERROR:

      cordova add android platform error!

      Error: Failed to fetch platform android@6.2.1
      Probably this is either a connection problem, or platform spec is incorrect.
      Check your connection and platform name/version/URL.
      Error: connect ETIMEDOUT 3.28.29.241:88
      please can you help me to resolve this problem .
       thank you.
      
      Author's profile photo ferdaouss ahan-nuk
      ferdaouss ahan-nuk

      hello everybody , I have a problem whit the version 1.29.7 of SAP_HAT_LOCAL when I want to add a platform android in cordova , I think because of versions are not compatibles .

      so I want to download the latest version of SAP_HAT_LOCAL but I couldn't find the .zip to download it .

      there are the versions that I have :

      node -v
      v5.4.1

      npm -v
      3.3.12

      bower -v
      1.8.4

      cordova -v
      6.5.0

      and there is the error that I have when I want to execute the command : cordova platform add android@6.2.1 :

      ERROR:

      cordova add android platform error!

      Error: Failed to fetch platform android@6.2.1
      Probably this is either a connection problem, or platform spec is incorrect.
      Check your connection and platform name/version/URL.
      Error: connect ETIMEDOUT 3.28.29.241:88
      please can you help me to resolve this problem .
      thank you.
      
      
      Author's profile photo Ludo Noens
      Ludo Noens
      Blog Post Author

      There is no newer version of HAT local add-on. Maybe this helps ?  https://stackoverflow.com/questions/44263477/failed-to-fetch-platform-cordova-android6-2-2

       

       

      Author's profile photo ferdaouss ahan-nuk
      ferdaouss ahan-nuk

      Mr.Ludo thank u for responding to me

      what is the latest version of HAt? and what is the version of nodejs that is compatible with? because I have this problem cus I have an old version of node js

      I try in other laptop to execute those command(npm install -g cordova & cordova platform add android) with the latest version of nodejss .. it worked well , but with my version of nodejs itsn't working (v5.4.1)

      Thank u for ur help

      Author's profile photo ferdaouss ahan-nuk
      ferdaouss ahan-nuk

      I work with SAP_HAT_LOCAL 1.29.7 , so can u please tell me what are versions of (node , npm , cordova must I work with)??

      Author's profile photo Ludo Noens
      Ludo Noens
      Blog Post Author

      Online documentation is here.

      We have validated the local add-on based on node version 5.4.1 and Cordova 6.5.0, with Mobile SDK 3.0 SP15. If you run into issues with bower, please update bower (npm install -g bower).

      If you are wondering whether these versions are kind of dated: they are; and no, we have no plans to update. More on that in an upcoming blog post.

      Regards,
      Ludo

       

      Author's profile photo ferdaouss ahan-nuk
      ferdaouss ahan-nuk

      thank you for your help , that helped me to resolve the problem , after install the HAT now I have problem when I want to deploy application in preparin hybrid application toolkit .

      this is my problem .. I hope that you help me to resolve it 

      thank you for your help .

       

      Author's profile photo Ludo Noens
      Ludo Noens
      Blog Post Author

      Are you able to run the command "kapsel -v" on the command line ?

       

      Author's profile photo ferdaouss ahan-nuk
      ferdaouss ahan-nuk

       

      yes I'm .

      I resolved the problem by creating an application in the service development & operations , and after that I created an application in web ide in the same package .

      So I deploy the application in preparing hybrid application toolkit and I run it with the device mobile .

      so the problem now is that : ( I'm sure that my username and the password are correct)

      regards,

      Ferdaouss

      Author's profile photo VIKAS TRIVEDI
      VIKAS TRIVEDI

      Hi Ferdaouss,

      Even I am facing the same issue. When I run the app in my device, it says "Please check your credentials".

      How did you resolve it?

       

      Regards,

      Vikas

      Author's profile photo sam jon
      sam jon

      Hi Ludo Noens,

       

      I am not getting Custom Fiori Client in In selection Category.

      Im using full stack sap web ide tril version on sap cloud.

      pls help me for find this.

       

      Thanks and Regards,

      SAM

      Author's profile photo Ludo Noens
      Ludo Noens
      Blog Post Author

      Hi Sam,

      Two things to check:

      1. Is the Hybrid App Toolkit feature enabled in your SAP Web IDE Full-Stack ? See Preferences
      2. Is the service Development and Operations enabled in your SAP Cloud Platform trial Cockpit

      Thanks,
      Ludo

      Author's profile photo sam jon
      sam jon

      Thank Q Mr Ludo Noens for prompt reply.

      Its working fine,Now am able to select custom SAP fiori client.

      Author's profile photo Tom Verbeeck
      Tom Verbeeck

      Hi,

       

      Is 1.297 the latest release of the HAT because I can't find the zip file for the 1.31 version.

      Also when I look in the SAP web IDE full-stack, they speak of a HAT version 1.31.3.

       

      You also speak about the 1.31 version in this blog but in the comments you say that the latest version is the 1.29.7.

      Can someone say what the latest version is and if there is a newer version than 1.29.7, give a download link because in the sap store I can't find any product versions of the HAT.

       

      Thanks in advance!

      Tom

      Author's profile photo Ludo Noens
      Ludo Noens
      Blog Post Author

      Hallo Tom,

      HAT is released as multiple components. The version number visible in SAP Web IDE is the version of the feature available there.

      What you are referring to is a zip file of the HAT local add-on, for which the version number is not in sync with the SAP Web IDE feature (previously known as plugin). Version 1.29.7 is the latest version.

      Take note that in this blog post, I have announced end-of-maintenance for the HAT local add-on. We don’t plan to provide any more updates. So this version 1.29.7 will stay for a while…

      UPDATE 11 Jan 2019: we have published the LAST and FINAL version of HAT local add-on, version 1.29.8 on the SAP Store in December 2018. We will also proceed to REMOVE this package from the SAP Store.

      Regards,
      Ludo

       

      Author's profile photo Phanipoorna Avula
      Phanipoorna Avula

      Hi Ludo Noens,

       

      Thanks for a great blog.

      Could you please help me with the below questions.

      • We are suppose to use On-premise (SSO enabled) FIORI launchpad for push notifications on FIORI client using SCP Mobile services for getting push notfications and also to navigate into the Notification workitem on FIORI client. For this case can the Custom FIORI client template in this tool is helful to get all the solution build?
      • Should we use any other approach to build the same. Expectation is that we will send the notification calls using Rest API from backend which should come into the FIORI client built on SCP mobile services. Kindly put your pointers.
      • Do any customization needed or just using cloud build (without plugins) suffices this requirement.

      Regards

      Phanipoorna Avula

      Author's profile photo Ludo Noens
      Ludo Noens
      Blog Post Author
      1. Yes, this is possible, assuming you are using SAP Cloud Connector. Since we are exposing all relevant source code in SAP Web IDE, you can customize the Fiori Client to your specific needs.
      2. I think this blog post explains most of it: https://blogs.sap.com/2017/03/22/how-to-enable-push-notifications-%EF%BC%88part1/
        However, this blog is based on creating the Fiori Client from Mobile Services cockpit. When implementing Fiori Client from SAP Web IDE, the push handler registration should be in the onSapLogonSuccess handler.document.addEventListener("onSapLogonSuccess", onSapLogonSuccess, false);
      3. Just use cloud build and configure push notifications in the build wizard. That's it.

       

      Author's profile photo Razi Syed
      Razi Syed

      Hi Ludo

       

      Thanks for the clear instructions. Very helpful as we start to explore development through the Web IDE.

       

      I was able to customize the client with the Neo trial license. We have SAP Web IDE full stack subscription as well. However when trying to do the same outside of the trial I am not able to proceed beyond step 2.

       

      Is there a seperate purchase for the mobile services needed. We have our own mdm and just having the apk file generated suffices for us. These are the mobile services that show as options.

       

       

      Do we have to subscribe to any of these or the apk from the trial suffices? We dont intend to use smp or HCPms.

      What are our options? Are there developer licenses for these services?

       

      Appreciate your help.

       

      Thanks

      Razi

      Author's profile photo Ludo Noens
      Ludo Noens
      Blog Post Author

      Hi Razi,

      Yes, you will need a Mobile Services subscription in order to build the app. Also, the app requires Mobile Services. Please contact your SAP Account Executive.

      Thanks,
      Ludo

      Author's profile photo Razi Syed
      Razi Syed

      Thanks Ludo - will check. Is there is a developer license you are aware of ?

      Author's profile photo Jan Nyfeler
      Jan Nyfeler

      When I try to add cordova plugins, the list keeps being busy but no plugins are displayed (we have a couple of custom plugins…):

       

      Edit:

      where can I find that role in mobile services is required to do this?  A lot of the steps require specific permissions in order to proceed....

      Author's profile photo Ludo Noens
      Ludo Noens
      Blog Post Author

      Hi Jan,

      The prerequisites are mentioned here: https://help.sap.com/viewer/8e5c63b6470a4255861c259f3b2d9b41/Cloud/en-US/aa8715ac0a914f12b90fbb8865612c71.html

      in case you have custom plugins, you might want to read this blog: https://blogs.sap.com/2019/11/22/adding-third-party-or-custom-cordova-plugins-to-a-hybrid-app-in-sap-web-ide/

      Regards,
      Ludo

      Author's profile photo Sanjay Kunala
      Sanjay Kunala

      Hello Ludo,

      Thanks for the great blog. We recently have developed a new HAT(1.32.9) mobile application in Neo. The application loads with blank screen waiting for the authentication (SAML) screen to show up. The same app when launched via Fidler tool works fine. We are noticing this behavior for all HAT applications. Fiori client, MDK apps developed in the subaccount are working fine. Would you have any insights on this issue.

       

      Thanks in advance

      Author's profile photo Ludo Noens
      Ludo Noens
      Blog Post Author

      Hi Sanjay,

      Can you explain how you are running your app with Fiddler ?

      Also, can you check in the SAP Mobile Services cockpit whether your app is configured to use SAML and, if applicable, whether the fioriUrl is correct ?

      Thanks,
      Ludo

      Author's profile photo Sanjay Kunala
      Sanjay Kunala

      Hello Ludo,

      I really appreciate your prompt reply. App is configured to use SAML in mobile cockpit. Followed the instructions specified in SAP note : https://launchpad.support.sap.com/#/notes/1766704 to  capture the http(s) trace logs.

       

       

      Thanks

      Author's profile photo Ludo Noens
      Ludo Noens
      Blog Post Author

      Hi Sanjay,

      Is this issue only with one particular app?

      Did you already experience this issue before using Fiddler? We are just wondering to what extent Fiddler is influencing the results here.

      Does the app report any errors via the console log when you hook up a debugger (Chrome devtools or Safari devtools) ?

      Thanks,
      Ludo

      Author's profile photo Sanjay Kunala
      Sanjay Kunala

      Hi Ludo,

      This is issue is with HAT Android apps only. iOS version of the HAT apps and other mobile apps (MDK, Fiori client etc..) are working fine. A simple HAT app with no destination etc.. behaves the same.

      When the issue was reported to SAP, we were asked to provide Fiddler trace logs and that is when we realized it works fine via Fiddler proxy. On comparing the fiddler logs of the working and non-working apps, it was noticed the step after /SAMLAUNCHER is erroring with 404 but the app is still able to proceed to next step and launch the ADFS login screen.

      I just got back response from SAP support. They believe the intermediate certificate on our ADFS site (digicert TLS RSA SHA256 2020 CA1) is causing the issue. Certs were updated 1st week of DEC which coincides with the time the issue was discovered. I am still not convinced as to how other apps are working with the same cert chain. ADFS site launches fine with no errors in all the browsers. If it was cert issue all the apps Company wide and other SAP mobile apps (HAT iOS version, MDK, FIORI client etc.. ) would have errored.

      Your insights in this matter will be extremely helpful.

      Thanks

       

       

      Author's profile photo Ludo Noens
      Ludo Noens
      Blog Post Author

      Hi Sanjay,

      Can you share the support ticket number?

      Thanks,
      Ludo

      Author's profile photo Sanjay Kunala
      Sanjay Kunala

      747372/2020

       

      Thanks

      Author's profile photo Sanjay Kunala
      Sanjay Kunala

      Hi Ludo,

      Did you get a chance to review the ticket and discuss with the engineers.

       

      Thanks

      Author's profile photo Sanjay Kunala
      Sanjay Kunala

      Hi Ludo,

      I have an update. .As SAP suggested, the reported issue was resolved by installing the missing intermediate certificate on our proxy server.

       

      Thanks for looking at this.