Skip to Content

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.

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

        • 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

           

  • 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

      •  

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

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

         

          •  

            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:

      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

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

    • 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

      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.

       

  • 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