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