Skip to Content
Technical Articles
Author's profile photo Martin Koch

Integrating the Anyline SDK into a SAPUI5 / Fiori App built on FullStack WebIDE

In this blog I am showing how easy it is to integrate native device capabilities into a SAPUI5 / Fiori Application using the Anyline SDK. There are two blogs on SCN I posted on this topic in 2017 based on the HAT.

https://blogs.sap.com/2017/09/02/integrating-the-native-anyline-mrz-scanner-into-a-sap-fiori-app/

https://blogs.sap.com/2017/09/11/adding-native-utility-meter-reading-capabilities-into-a-fiori-app-with-anyline/

As both underlying tools, the WebIDE and the local HAT were deprecated (please find more details here), I am writing this new blog showing on how to use the new technologies for creating hybrid apps. The Full Stack WebIDE can now be used for building hybrid apps. The development process is ways easier than it was on the old technologies.

Activate the required Services in SAP Cloud Platform

Logon the the SAP Cloud Platform. You can also use the trial account to evaluate the services required in this blog. Check if the Mobile Services are enabled. The Mobile Services are used to perform the build of the Hybrid App out of the Full Stack WebIDE.

If they are not enabled click on the service and enable them.

 

Launch the Full Stack WebIDE

The Full Stack WebIDE Service is enabled by default on trial accounts. Navigate to the Service and launch the Full Stack WebIDE.

Activate the required plugins

Open the Settings pane

Click on the Extensions

Activate the Hybrid App Toolkit

Save the settings and restart the WebIDE to activate the new extensions / plugins.

Create a new Project

Click on the New Project from Template button

Use the SAPUI5 Application template

Provide a project name and details as it is done in any SAPUI5 development project.

Add an initial XML View e.g. named Main

 

Enable the Project as Hybrid Mobile Project

The HAT plugin allows you to add mobile capabilities to any SAPUI5 application. Use the context menu of the project to enable it as Hybrid Mobile Project.

A new folder named mobile will be added to your project.

 

Add the required Cordova Plugins

Use the context menu of the mobile folder to add the required Cordova Plugins.

 

Search for the Anyline plugin

Click on the Add action

Select the platforms (iOS / Android) that you would like to support

 

Develop the Application

Open the Main.view.xml and adjust to your needs. I have used a simple form and a Button in the footer toolbar.

 

Add the viewConfig as JSON file to the model folder

Open the manifest.json, add a JSON Model  (sap.ui.model.json.JSONModel) as default model and reference to the viewConfig.json in the URI field.

Open the Main.controller.js and add the business logic

 

Perform a Build

Use the context menu of the webapp folder to Build a Packaged App

Configure the Mobile Build Settings

Select the target platforms and select a Signing Profile. The signing profiles are loaded from the mobile services. You can create a new Signing Profile directly within this Wizard.

Perform the build by clicking the Build button

The build takes a few minutes. When the build is finished you will get the option to scan a QR Code from your mobile device or download the binaries.

You can now run the application on your mobile device.

 

Assigned tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Minh Tri Le
      Minh Tri Le

      Hi Martin,

      I follow your steps to Add the required Cordova Plugins and can’t find the plugin Anyline.

      Update: I tried my trial account and it showed the plugin in WebIDE. But it doesn't show in my company account's web ide.

      Regards,

      Tri

      Author's profile photo Martin Koch
      Martin Koch
      Blog Post Author

      HI Tri,

      did you select the public tab in the cordova plugin selection ?

      I just tried it out with a new project and it worked again.

      BR,

      Martin

      Author's profile photo Minh Tri Le
      Minh Tri Le

      Hi Martin,

      I selected the public tab but it showed in my trial web ide, not my company's SAP WebIDE.

      Does it have anything to do with the sub account in NEO?

      Regards,

      Tri

      Author's profile photo rakesh singh
      rakesh singh

      Hi Minh / Martin,

      I am also facing same issue as Minh. I am unable to find anyline Cordova plugin in customer WEB-IDE full stack. I have tried as mentioned above, but all in vain.

      Were you able to sort this out? Do i need to import anything manually for this plugin?

      Please suggest.

      Thanks! in Advance.

      Regards,

      Rakesh

      Author's profile photo Doglas Oliveira
      Doglas Oliveira

      Hi Martin,

      I've been using UI5 and cordova for hybrid applications, a few years ago I tried the cloud but couldn't. Thanks for the post, I'll try again.

      Author's profile photo Chester Eugene Arellano
      Chester Eugene Arellano

      Very informative blog Martin,

      My concern is when I built the apk, it took me minimum of 10minutes and tried to download it, the file size is about 100MB+, why is that? Is that normal cosidering I have 1 view only?

       

      Thanks,

      Chester

      Author's profile photo Chester Eugene Arellano
      Chester Eugene Arellano

      Hello Martin,

       

      Upon installation and running the app, the app requires certificate, specifically, this is the prompt:

      "You can install certificates from a PKCS#12 file with a .pfx or a .p12 extension located in external storage."

      Where can I get certificate?

       

      Appreciate you guide here,

      Thanks,

      Chester

      Author's profile photo rakesh singh
      rakesh singh

      Hi Minh / Martin,

      I am also facing same issue as Minh. I am unable to find anyline Cordova plugin in customer WEB-IDE full stack. I have tried as mentioned above, but all in vain.

      Were you able to sort this out? Do i need to import anything manually for this plugin?

      Please suggest.

      Thanks! in Advance.

      Regards,

      Rakesh

      Author's profile photo Ludo Noens
      Ludo Noens

      Hi Rakesh,

      I am still able to find the mentioned plugin.

      If you are still facing issues, please raise a support ticket for component CA-WDE-MOB.

      Thanks,
      Ludo

      Author's profile photo rakesh singh
      rakesh singh

      Hi Ludo,

      Thanks! for the prompt response. Unfortunately I have nothing in public tab as shown below (tried searching using multiple tags, but no output).

      As you suggested I'll raise a OSS Message to sap for this.

      Regards,

      Rakesh

      Author's profile photo Maximilian Olzinger
      Maximilian Olzinger

      Hi rakesh singh,

      If you still see no entries in the public section regardless of filters, it might have something to do with your Mobile Service Permissions.

      First, open the developers tools(F12 on Google Chrome in my case) after you opened the "Select Cordiva Plugins"-Dialog. If an error regarding some Permissions is shown in the console, your User might not have the right permissions.

      So go to your subaccount->services->Mobile Services (does not matter if Consumer- or User-Edition) -> Configure Mobile Services -> Roles.

      Then check if your User is assigned to either one of those roles: Administrator/Developer,..

      This did the thing for me. For the sake of avoiding session-problems, log out of the WebIDE and close all browser tabs. Then re-enter the WebIDE and check if the plugins are loading in the dialog.

       

      Regards, Max