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-w...
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.
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.
The Full Stack WebIDE Service is enabled by default on trial accounts. Navigate to the Service and launch the Full Stack WebIDE.
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.
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
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.
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
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
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.
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-w...
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.
- SAP Managed Tags:
11 Comments
