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.
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
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
Thanks Ludo.
The issue was with browser cache as it stored the error. I reloaded the browser & its working fine.
Thanks.
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
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
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
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
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
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
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
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.
Thank you so much Louis-Arnaud, you made my day !
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
You cannot add plugins in SCP mobile services.
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!
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!
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
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
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)??
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
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 .
Are you able to run the command "kapsel -v" on the command line ?
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
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
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
Hi Sam,
Two things to check:
Thanks,
Ludo
Thank Q Mr Ludo Noens for prompt reply.
Its working fine,Now am able to select custom SAP fiori client.
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
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
Hi Ludo Noens,
Thanks for a great blog.
Could you please help me with the below questions.
Regards
Phanipoorna Avula
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);
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
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
Thanks Ludo - will check. Is there is a developer license you are aware of ?
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....
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
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
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
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
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
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
Hi Sanjay,
Can you share the support ticket number?
Thanks,
Ludo
747372/2020
Thanks
Hi Ludo,
Did you get a chance to review the ticket and discuss with the engineers.
Thanks
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.