SAP Offline Application in Cordova

Cordova Setup for Hybrid Application Development

Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript, so that we can build one code base which will be used on all platforms. It allows us to avoid platform specific developments.

Let us see the step by step procedure,

Step 1: Install Cordova dependencies. Download and install from the given link:

1. Java jdk
   https://www.oracle.com/in/java/technologies/javase-downloads.html
2. Android Studio
   https://developer.android.com/studio
3. Gradle
   https://gradle.org/install/
4. Node.js
   https://nodejs.org/en/download/

Step 2: Once installed its time to set up your environment variables. The below information, gives you an idea to set up your variables.

System Variable:

Step 3: To confirm whether the dependencies installed properly, you just need to open a command prompt and type ‘Cordova requirements’.

Also check the versions of all the dependencies

Step 4: Let’s install Cordova from Node Package Manager. Type the below command. -g should be given to install cordova globally to access in any folder.

If npm needs to be installed in the specific folder you can avoid using -g,

Step 5: Once done with Cordova installation, let’s check its version in command prompt

All set and installed to create the Hybrid App.

Creating Basic Cordova App 

Step 1: Create Cordova project

Go to the directory where you need to create your app. Here I am choosing C drive.

Step 2: Add Platforms

Go to project directory (i.e. Sample) and add the platforms as below,

Add all the targeted platforms of your app with the below commands,

Cordova platform add android

Cordova platform add iOS, etc…

In order to add a platform with specified version,

Cordova platform add android@6.2.3

Step 3: Run the App

Make sure whether your device is connected properly by typing ‘adb devices’ in your cmd.

If you can’t find your device in the attached list, Enable the developer option and allow USB debugging in your mobile/tab. Added to that you need to enable file transfer.

Now go to project directory (i.e. Sample) and type ‘Cordova run’.

You can see the application launched in your connected devices and will display a screen as in below screenshot.

Step 4: Find the Generated APK in below path.

Debugging

Step 1: Type chrome://inspect. You can see your WebView of your app under remote target. Click on the inspect.

Using Cordova plugins in SAP UI5 – Hybrid App.

Lets make use of the button added in the previous topic. Here we are going to see the functionality of camera plugin.

Step 1: Now go to project directory and add a camera plugin by using the below command

cordova plugin add cordova-plugin-camera

Added plugins you can see in the Plugin folder

• Creation if Table in Cordova
• Deletion of table in Cordova
• Read Table in Cordova

Creation of table in Cordova:

• Creation of table will follow the SQL Queries
• Each table should be assigned with the unique table name and filed name ,
• Each table name should have primary key to process it

STEP – 1 : Creation and Opening up the Database

this.Postingoffline = window.sqlitePlugin.openDatabase({
					name: 'Postingoffline.db',
					location: 'default',
				});

This is the syntax for Creating the database , here name specify the table name and were its going to get stored

Pushing up of values inside the Local DB Table

Here we are using SQL Quries to create this

tx.executeSql('CREATE TABLE IF NOT EXISTS subFunct (SuperiorFL,SubFLoc,SubFLocDes)');
							for (var i = 0; i < oData.d.results.length; i++) {
								tx.executeSql('INSERT INTO subFunct VALUES (?1,?2,?3)', [oData.d.results[i].SuperiorFL, oData.d.results[i].SubFLoc, oData.d
									.results[i].SubFLocDes
								]);
							}

Deletion of table

Here is the Code Snippet for deletion of table

This will delete entire table data

window.sqlitePlugin.deleteDatabase({
							name: 'reportedBy.db',
							location: 'default'
						});

In order to delete exact record from table we need to write SQL Queries to delete from table

this.Postingoffline.transaction(function (tx) {
					var query = "DELETE FROM Postingoffline WHERE DATE ='" + date + "'"
					tx.executeSql(query, [],
						//On Success
						function (tx, result) {

							//alert('Delete Header successfully');
						},
						//On Error
						function (error) {
							//alert('Something went Wrong');
						});
				}.bind(this));

Here is the code snippet in this I am deleteing based on Date from the PostingOffline table

Reading values from table

Here I am reading every value from the table using Select Statement (SQL)

.

				this.PlantF4.executeSql('SELECT * FROM PlantF4', [], function (resultSet) {
					var PlantF4 = [];
					for (var i = 0; i < resultSet.rows.length; i++) {
						PlantF4.push(resultSet.rows.item(i))
					}
					this.globalModel.setProperty("/PlantF4", PlantF4)
				}.bind(this));

Installation Setup (ios)

Step 1: Scan the barcode and install the App

Step 2: (NOTE: MAKE SURE DEVICE IS CONNECTED TO  VPN)

Step 3: Now App is ready to use

Installation Setup (Android)

Step 1: Download the APK file in the android device

Step 2: (NOTE: MAKE SURE DEVICE IS CONNECTED TO VPN)

Step 3: Now App is ready to use

Wrapping up

To summaries, I have developed an offline based application using Cordova platform , this helps user to use the application both in online and offline mode and can save data too .

I hope you like this developer experience. We are planning to add some more options for you in future releases, while creating this in the Web ide using mobile service  so we can further improve your developer experience.

If this feature/blog post is useful for you, please leave a like.

Cordova Set Up Link blog post : https://cordova.apache.org/docs/en/10.x/guide/cli/index.html

Regards,

Sam Hilton . P – SAP UI5 / Fiori Consultant