Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Set a custom AppID for your SAPUI5 Hybrid Mobile Project (Android)

maximilian_olzinger
Explorer
‎06-17-2021 7:00 PM

Introduction


In this blog I want to show you how to set up a custom Application ID for your SAPUI5 Hybrid Mobile Project, Android-only, via the SAP Hybrid App Toolkit (SAP HAT).

The reason I'm writing this blog is because some Cordova-Plugins like the Anyline Scanner SDK manage their license based on the Application ID of the Apps in which they are used.

After the first build of a Hybrid Application, an Application Container gets added to the SAP Mobile Services. This Container includes all informations about the newly built Hybrid App like the automatically generated Application ID (this is where the root of my problem sits),Features like Cloud Build and Connectivity or the application binaries.

My Problem was the automatically generated Application ID considering that I needed to provide a custom Application ID for licensing purposes and now I want to present my solution.

A big thank you goes to lnoens (the product owner of the SAP HAT) for supplying us with many great blogs about the Hybrid App Toolkit, (e.g.: Best practices, FAQ and tips for developing hybrid apps with Hybrid App Toolkit ) and zhigao.chen for helping me out with my problem.

Setup and requirements



  • SAP BTP Neo Stack

  • SAP WebIDE

  • SAP Mobile Services(Consumer- or User-Edition)

  • An Android Device


Additional Ressources



Step 1 - Create an Application Container


Log in to your SAP Business Technology Platform (SAP BTP) - Subaccount and open the Mobile Services (Consumer- or Users-Edition).




  1. Navigate to Mobile Applications and select the Native/Hybrid-Tab.

  2. Create a new Application Container on pressing New.


Then provide all necessary Application Informations:




  1. Select Hybrid as your Configuration Template.

  2. Provide your custom Application ID.

  3. Give your Application a name

  4. Press Save to create your Application Container.


You see now your newly generated Application Container. There you can now customize your application further but bare in mind, this container has no application jet. The creation of our Hybrid Application needs to be done in the next steps.

Step 2 - Create a new SAPUI5 Application


Log in to your subaccounts WebIDE.

First of all, you need to check if you have the Hybrid Application Toolkit enabled.




  1. Go to the Preferences-Panel.

  2. Then select Extensions to manage all extensions in your WebIDE.

  3. Check if the Hybrid App Toolkit-Extension is enabled. If not, switch it to true and restart your WebIDE.


Create a new SAPUI5 Application:




  • Go to File->New.

  • Select Project from Template start the setup of an application.


We create a new SAPUI Application.The SAPUI5 Version does not matter that much, I used 1.84.


 

Provide the basic Appplication Informations:




  1. Set your Projectname, I used SAPBlogApp.

  2. Provide your applications namespace. Here i used my Application ID I set in the Mobile Services: at.clouddna.appidblog.


For the sake of this sample, leave the next wizard step as it is (you could set a name for the initial View) and generate the application via the Finish-button.

Now we need to enable our app as an Hybrid Mobile Project and start the Cloud Build.




  1. Open the context menu of your app and hover on Mobile.

  2. Click on Enable as Hybrid Mobile Project.


The application is now set as an Hybrid App Project and a new folder (mobile) and a file (config.xml) was added.

Now you can add your coding, additional Cordova Plugins and do your general development.

 

Step 3 - Start the Cloud Build


After your application development we create a new Cloud Build which builds our application and deploys it to the Mobile Services.

Your can leave the mobile->appConfig.js as it is for now.




  1. Open the context menu of your app and go to Mobile.

  2. Press Build Packaged App to start the Cloud Build Process.


 

For the sake of presentation, you can skip over the first wizard step and start with the second one (Platform).




  1. Select Android as your target Platform and provide a Signing Profile.

  2. Then click Next and finishe the Build.


 

You can now see that the Cloud Build Process has been started when looking in the Console.

When opening the appConfig.js file, you will notice, that the configuration has been changed.


The appID-Parameter was auto-generated and a new project in the Mobile Services with this appID was created.


 

At the first build, the app gets built against the newly auto-generated Mobile Service Application. But each subsequent build will be made against our manually create Mobile Service Application with our custom Application ID.

To make this work, we need to manually change the appName and appID in the appConfig.js file to our matching Mobile Service Parameters.

 

Step 4 - Change the application configurations


To make things simpler, just use the Advanced Repository Search to replace the auto-generated appID with the one you set in the Mobile Service project.




  1. Open the Advanced Repository Search Tab and replace the auto-generated appID on a project-scope with your appID defined in the Mobile Services. Mine was at.clouddna.appidblog .


I also changed the appName-Parameter so it matches the Project Name in the Mobile Services.


Then restart the Cloud Build via the context Menu on your app->Mobile->Build Packaged App.

But now we set the flag Manually update configuration files to true. Normally this only has an impact when you want to adapt your HAT apps into a Cloud Foundy scenario (how to do that), but we can take advantage of that for our custom appID scenario.


Trigger the Build and wait for it to finish with a QR-Code thats leads to the downloadable app. This may take some time.



Step 5 - Start the Application


After a sucessful build, download the app and register yourself.

In my case I got an almost empty View with just the default Title, but everything works so far.

Here's a blog on how to debug your Android app via Google Chrome: Debug Android App on Chrome


If you switch now to the Mobile Services and go to your app with the custom appID, you'll see that your user has been registered to this application and not to the automatically generated one, hurray 🙂


Now we've intertwined the two Mobile Services Projects so that our application runs with the right Application ID.

I'wont recommend deleting the Mobile Services Project with the generated Application ID, because this project contains our application binaries. After each Cloud Build, the app gets stored in the auto-generated Application ID Project. When you delete this project, a new one with a new ID is created. The Mobile Service Project with our custom Application ID however is the one where our Application is registered, where our application log runs and so on.

 

iOS Remark


If you want to set a custom Application ID for your iOS-Build, just set the ID via your Apple Signing Profile, because the Signing Profile on iOS is built around an Application ID, whereas the Android Signing Profile is more connected to a Developer rather than to a single Application.

 

Closure


Thanks for taking your time reading this blog and I hope that you have learned something, although this one is more about a nieche theme than a general insight into the SAP HAT.

Feel free to ask any questions that have come up during reading this blog, possible corrections to my statements or just general additional informatinos down below in the comments.

Regards, Max

 
3 Comments
Labels in this area
Popular Blog Posts