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.