Intro

This little repo is based of the OpenUI5 basic template app using the UI5 Build and Development Tooling. It's basically a test for SW, IndexedDB and other "Offline"-capabilities.

Detailed information on SW & other stuff used:

• SAP Blog - UI5 Offline Application
• SAP Blog - OpenUI5 into PWA
• Stackoverflow - Reduce UI5 XHR
• Mozilla SW Documentation
• Google SW Documentation
• PWA Sample on Github
• Background Sync SW
• UI5Con 2019
• Localforage
• Fetch-API
• CORS Anywhere

ToDo:

• OData with Mocking Service for testing purposes
• Adjust Controller/UI Code - currently only for testing & learning purposes
• Synchronization between Front- and Backend (with SW and IDDB-Data to OData or others; Fetch)
• Bind IndexedDB Object Store as model to some list control

More information

• Live Demo
• Documentation
• UI5 Tooling
• OpenUI5

Prerequisites

The UI5 build and development tooling command line interface (UI5 CLI) has to be installed. For installation instructions please see Installing the UI5 CLI.

Setup

1. Clone the repository and navigate into it

   git clone https://github.com/SAP/openui5-basic-template-app.git 
   or        https://github.com/SAPMarco/UI5-Offline-PPoC.git
   
   cd openui5-basic-template-app                                  
   or cd UI5-Offline-PPoC

2. Install all dependencies

   npm install

3. Start a local server and run the application (http://localhost:8080/index.html)

   ui5 serve -o /index.html or npm start

For more build and development options please see: UI5 Build and Development Tooling

WebRfC SAP System

• SAP Blog
• WebRFC Programming Documentation

Function module declaration:

1. Overview of Function Module

   *"----------------------------------------------------------------------
   *"*"Lokale Schnittstelle:
   *"  TABLES
   *"      QUERY_STRING STRUCTURE  W3QUERY
   *"      HTML STRUCTURE  W3HTML
   *"      MIME STRUCTURE  W3MIME
   *"  CHANGING
   *"     VALUE(CONTENT_TYPE) LIKE  W3PARAM-CONT_TYPE DEFAULT
   *"       'APPLICATION/JSON'
   *"     VALUE(CONTENT_LENGTH) LIKE  W3PARAM-CONT_LEN
   *"     VALUE(RETURN_CODE) LIKE  W3PARAM-RET_CODE
   *"----------------------------------------------------------------------
   

2. Changing-Parameter

   Parametername   Type    Type                DEFAULT
   CONTENT_TYPE	LIKE	W3PARAM-CONT_TYPE   'APPLICATION/JSON'
   CONTENT_LENGTH	LIKE	W3PARAM-CONT_LEN	                     
   RETURN_CODE     LIKE	W3PARAM-RET_CODE	                     
   

3. Tables-Parameter

   Parametername   Type    Type                DEFAULT
   QUERY_STRING	LIKE	W3QUERY
   HTML	        LIKE	W3HTML
   MIME	        LIKE	W3MIME	                     
   

4. Example Code

   DATA: name TYPE string.
   
   SORT query_string DESCENDING.
   
   READ TABLE query_string WITH KEY name = '_name'.
   
   name = query_string-value.
   
   DATA: htmldoc LIKE LINE OF html.
   
   CONCATENATE '{"results": [ {"key": "name", "value": "' name '"}, {"key": "phone", "value": "911"}]}' INTO htmldoc-line.
   
   INSERT htmldoc INTO TABLE html.   
   

5. Expose Module via WebRfC with Transaction SMW0 (F7, Function Module)

6. Function Module can be called via:

   http(s)://<IP/Server>:<PORT>/sap/bc/webrfc?_FUNCTION=<Function_Module_Name>&<key=value>