This blog will highlight the key features of a hybrid SAPUI5 offline mobile application.
In this application we have simulated a scenario , where a user can fill the form provided in the application built using SAPUI5 on a mobile device or desktop and then can submit it to the SAP back end system. This application can work in no network areas also.
Our main focus is to leverage the capabilities of indexedDB to provide an integrated SAPUI5 application that can work both offline and online.
We have taken Work Order(Aufnr field from AUFK table in SAP) as a primary key for showing this example. The value from other fields in the application will get attached to this work order in the back-end.
This hybrid SAPUI5 application has been developed for android platform which can work on both desktop and mobile devices.
This application uses SAP back-end to store data and can be used even in offline mode, which allows users to fill and submit their data in case of no network connection. An offline database is used to save the form details while there is no network and it can be synced to SAP back-end database once the device comes in network range.
Once data gets synced to the SAP back end server, PDF file will be generated and attached against maintenance order provided in form.
Process flow for this SAPUI5 application with system components (SAP)---
This application is built on Android Studio platform as a hybrid application and .APK file that gets generated is then downloaded and installed on the mobile device. It appears as an icon on the mobile device which when clicked will open application.
An oData Service was prepared in SAP backend and registered to SAP Fiori Gateway server.
This oData gets called when the data from the application is to be synced to backend.
In order to generate “.PDF” file of the form, data corresponding to primary key(Work order for example), sent from the application through oData call is populated in an SAP ABAP Smart form having same template as that of the application.
When the User will click on the “Sync” button in application, data for a maintenance order gets saved as well as PDF is generated and saved at DMS server.
Offline Database used:
The offline database that has been used in this application is a type of IndexedDB.
It is an open-source JavaScript database that is designed to run well within the mobile devices and browsers.
It was created to help web developers build applications that work as well offline as they do online.
It enables applications to store data locally while offline and compatible servers when the application is back online, keeping the user's data in sync no matter where they next login.
It is fully tested and supported on –
- Firefox 29+ (including Firefox OS and Firefox for Android)
- Chrome30+
- Android4.0+
- iOS7.1+
- Windows Phone8+
It also runs in Cordova, NW.js, Electron, and Chrome apps. It is framework-agnostic, and you can use it with Angular, React, Ember, Backbone, or your framework of choice.
Following figure shows the process flow of our offline application---
- Initially the user will login to device and open the application. He will select work order(primary key) field. The Area/Location field will get automatically populated once work order field is populated
- Once all the details related to the Work Order has been filled in application, user will save the form in the offline database by clicking on “Store Offline” button
- If the device is in network range, user can click on “SYNC” button in order to store data to SAP back-end
- Once “SYNC” button is clicked oData will get called from application and work order data to be synced to back-end will be compared with the list of orders already present at back-end
- In case work order is not already present at back-end, version field for this work order will be set to 0 in back-end
- Data for that work order will be stored in back-end table
- “.PDF” file will be generated for the form and attached to work order in DMS server
- If work order saved in offline database is present at SAP back-end table then version of order records will be incremented by 1 and step 6 and step 7 will follow this step
For generating “.PDF” file corresponding to a given maintenance order details, SAP ABAP Smart form has been used for generating a template similar to that in the UI5 application.
At time of data syncing, this smart form will fetch data from the back end tables and populate the corresponding smartform at back-end. This form is then attached to DMS server after PDF conversion.
Software used:
- Eclipse IDE (Mars 4.5.2) for SAPUI5 application development
- Cordova (7.0.1) for wrapping the SAPUI5 app in an android package
- Android Studio 2.3.3 for building the “.APK” file from the Cordova app
- Backend SAP ECC system for oData creation
- Fiori Gateway Server for registering the oData Service
Benefits:
- There is no need of any 3rd party integration as the application uses oData service to store data in the backend
- This application can work even in offline mode. Because of the use of Indexed DB, even if device is in no network area, application allows the users to fill the forms and save it in offline database.Once the device gets connected to network, the data can be synced to SAP back end
- SAPUI5 is easily extendable
- No new licenses are required to implement this application
To summarize ,
This Application has been implemented on android platform and can be deployed on mobile devices, which allows users to fill and keep track of the inspection reports more easily. Instead of doing manual entries in the form, user can simply open the application on his/her device and fill and submit multiple forms more quickly.The support for offline functionalities allows the users to continue their work irrespective of the mobile device being in network range or not.The automated PDF file generation corresponding to all work order details also removes extra efforts in the maintenance supervisor’s part.
- SAP Managed Tags:
1 Comment
