Skip to Content
Technical Articles

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.

 

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

    • 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

      • 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

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

  • 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

  • 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