[OpenUI5] SAP Fiori elements add-on for OpenUI5 using an OData V4 service

Recently I found this blog post about the new SAP Fiori elements add-on for OpenUI5.
https://blogs.sap.com/2020/12/21/now-available-sap-fiori-elements-add-on-for-openui5/
It includes a little exercise to try it out for yourself. I wrote down all steps I had to make on my Linux Mint 20 installation.
These two links also helped me a lot.
https://github.com/sap-samples/cloud-cap-samples
https://cap.cloud.sap/docs/get-started/

Prerequisites (Node.js, Visual Studio Code, SAP Fiori tools, Git)

curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -
sudo apt-get install -y nodejs
node --version
npm -v 

Change npm’s default directory to prevent permission errors.
https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
mkdir ~/.npm-global/lib
#add the following line to your .bashrc or .profile or .zshrc
export PATH=~/.npm-global/bin:$PATH

Step 1: Provide an OData V4 service

git clone https://github.com/sap-samples/cloud-cap-samples remote-odata-service
cd remote-odata-service
npm i 
npm i -g @sap/cds-dk
cds watch fiori

Step 2: Generate a SAP Fiori elements List Report Object Page (LROP) app with Fiori tools

1. Open VSC, press Ctrl + P and search for > Fiori: Open Application Generator

2. Choose SAP Fiori elements application
In my case there was no default generator, so first I had to install it.

npm install -g @sap/generator-fiori-elements@latest

This can also be done directly in VSC.

3. Select List Report Object Page
4. Select Connect to an OData Service as Data source and enter as URL http://localhost:4004/browse
5. Choose Books as the Main entity and texts as Navigation entity
6. Complete the mandatory information module name (e.g. bookshop) and Project folder path for storing your app. Of course, you can also fill in the optional information.

Step 3: Make changes in package.json and ui5.yaml required for using OpenUI5

package.json

{
	"name": "fiorielements_openui5",
	"version": "0.0.1",
	"private": true,
	"sapux": true,
	"description": "A Fiori application.",
	"keywords": [
		"ui5",
		"openui5",
		"sapui5"
	],
	"main": "webapp/index.html",
	"scripts": {
		"start": "fiori run --open index.html",
		"start-local": "fiori run --config ./ui5-local.yaml --open index.html",
		"build": "ui5 build -a --clean-dest --include-task=generateManifestBundle generateCachebusterInfo",
		"deploy": "fiori add deploy-config"
	},
	"devDependencies": {
		"@sap/ux-specification": "latest",
		"@sap/ux-ui5-tooling": "1",
		"@ui5/cli": "2.5.0",
		"@ui5/fs": "2.0.1",
		"@ui5/logger": "2.0.0"
	},
	"ui5": {
		"dependencies": [
			"@sap/ux-ui5-tooling",
			"@sap/open.fe"
		]
	},
	"dependencies": {
		"@sap/open.fe": "1.85.0"
	}
}

ui5.yaml

specVersion: '2.2'
metadata:
  name: 'fiorielements_openui5'
type: application
framework:  
  name: OpenUI5  
  version: "1.85.0"  
  libraries:   
  - name: sap.m  
  - name: sap.ui.core  
  - name: sap.uxap
  - name: themelib_sap_fiori_3
server:
  customMiddleware:
  - name: fiori-tools-proxy
    afterMiddleware: compression
    configuration:
      ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted
      backend:
      - path: /browse
        url: http://localhost:4004
  - name: fiori-tools-appreload
    afterMiddleware: compression
    configuration:
     port: 35729
     path: webapp

Step 4: Run the V4 application

cd ~/projects/fiorielements_openui5
npm i
npm start

Now http://localhost:8080/index.html should be opened in your browser.
“Note: Clicking on the Go button in List Report application might request  user and password. Please enter user alice, no password.”
Finally I got my list items.

[ABAP Env] Create Data Model & OData Service

Recently I worked through the tutorial on creating a travel bookings app in the SAP Cloud Platform ABAP Environment.

Find a good introduction and overview on this topic here: Getting Started with ABAP in the Cloud – Part I
And the travel bookings app tutorial here: Getting Started with ABAP in the Cloud – Part II

These are my notes on the steps needed to create the data model and publish it as oData service.

#LayerNomenclatureDescription
1Database TableZTABLEPlace your raw data first
2Data Definition (Interface View)ZI_Relation between different tables (e.g. currency or text table)
3Projection View (Consumption View)ZC_Configure the UI depending on your scenario.
Use different projection views for different usages of the same interface view and the same physical table.
4Service DefinitionZSD_Expose the projection view (and underlying associations like currency, country…) as service
5Service BindingZSB_How to we want to make the service available? Defines the binding type (OData V2 / OData V4)
Activate it with the “Activate” Button within the editor window.
Select the Entity and hit “Preview…” to see whtat we defined in our projection view.

If you’ve done this, you are able to view the data in a generated Fiori Elements app. But if you also want to create, edit, delete data, you’ll have to add some behavior functionality.

6Behavior Definition on Data DefinitionZI_Created on top of the Data Definition. Will get the same name es the Data Definition.
Implementation Type: Managed
Defines the operations create, delete, edit.
7Behavior Implementation on Definition ViewZBP_I_The code for the behavior… For the travel app tutorial, some logic for a generated unique key and field validation.
The class inherits from cl_abap_behavior_handler.
8Behavior Definition on Projection ViewZC_Created on top of the Projection View. Will get the same name es the Projection View.
Defines the operations create, delete, edit.

[Fiori] Transactions

sicfPflege des HTTP-Service-Baums
(SAP Internet Communication Framework)
segwSAP Gateway Service Builder
/n/iwbep/view_logSAP Gateway Protokoll-Viewer
/n/iwfnd/gw_clientSAP Gateway Client
/n/iwfnd/apps_logSAP Gateway Anwendungsprotokoll-Viewer
/n/iwfnd/error_logSAP Gateway Fehlerprotokoll
/n/iwfnd/maint_serviceServices aktivieren und verwalten
/n/ui2/custCustomizing für UI-Technologien
/n/ui2/flpSAP Fiori Launchpad
/n/ui2/fliaFiori Launchpad: Absichtsanalyse
/n/ui2/flpd_custFiori Launchpad: Designer
/n/ui2/flpd_confFiori Launchpad: Designer
/n/ui2/flpcm/custFLP-Content-Manager
/n/ui2/flpcm/confFLP-Content-Manager
/n/ui2/semobjSemantisches Objekt definieren – Kunde
/n/ui2/semobj_sapSemantisches Objekt definieren – SAP
/n/ui2/theme_designerUI Theme Designer
swfvisuWorkflow Visualisierungs-Metadaten
swfvmd1Workflow Visualisierungs-Metadaten