[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] Export to memory / Import from memory

Exporting:

DATA: l_p0001  TYPE p0001,
      l_return TYPE bapireturn1.

"...

DATA(l_guid) = cl_system_uuid=>create_uuid_c32_static( ).       
 
EXPORT p0001 = l_p0001 TO MEMORY ID l_guid.
SUBMIT z_hr_report WITH p_guid = l_guid AND RETURN.
IMPORT return = l_return FROM MEMORY ID l_guid.

Importing:

REPORT z_hr_report.

PARAMETERS p_guid TYPE sysuuid_c32.

DATA: l_p0001  TYPE p0001,
      l_return TYPE bapireturn1.

START-OF-SELECTION.

IMPORT p0001 = l_p0001 FROM MEMORY ID p_guid.
CHECK sy-subrc = 0.

"do stuff...
CALL FUNCTION 'BAPI_EMPLOYEE_ENQUEUE'
  EXPORTING
    number = l_p0001-pernr
  IMPORTING
    return = l_return.

IF l_return-type = 'E'.
  EXPORT return = l_return TO MEMORY ID p_guid.
  RETURN.
ENDIF.

[SAPUI5] Busy Dialog

onInit: function () {
	this._oModel = this.getOwnerComponent().getModel();
},

onButtonPress: function (oEvent) {
	//get Data
	var sPath = oEvent.getSource().getBindingContext().sPath;
	var oData = this.getView().getModel().getObject(sPath);
	var that = this;

	//busy on
	this._busyDialog = new sap.m.BusyDialog({});
	this._busyDialog.open();

	//create
	this._oModel.create("/DataSet", oData, {
			success: function (oData) {
					that._busyDialog.close();
					sap.m.MessageToast.show(that.getResourceBundle().getText("ok"));
			},
			error: function (oError) {
					that._busyDialog.close();
					sap.m.MessageToast.show(that.getResourceBundle().getText("nok"));
			}
	});
},

[HR] TMW – Time-Manager-Workplace BAdI

Transaktion: PTMW
BAdI: PT_BLP_USER

Badi Implementierung anlegen und Filter-Ausprägungen hinzufügen. Es muss für jede benötigte Filter-Ausprägung eine eigene BAdI Implementierung und Klasse angelegt werden.

Klasse anlegen und in der Interface Methode die Kundenlogik, wie in der Dokumentation empfohlen, in eine private Methode kapseln.
Bsp.:

  METHOD if_ex_pt_blp_user~process_data.


    CHECK i_record IS BOUND.

    IF  i_record->data->category = cl_pt_tmw_tdm_const=>cat_infty
    AND i_record->data->type     = '2001'.

      "hier die erforderliche Logik rein, z.B. weitere Prüfungen
      process_it2001( EXPORTING i_record    = i_record            " Aktueller Satz
                                i_time_data = i_time_data         " Aktuelle Zeitdaten
                      IMPORTING e_messages  = e_messages          " Ausgabemeldungen für die Transaktion
                                e_time_data = e_time_data   ).    " Neue und geänderte Daten

      "An den konkreten Infotypsatz kommt man z.B. folgendermaßen:
      DATA(record_data) = CAST cl_pt_td_it2001( i_record->data ).
      DATA(p2001)       = record_data->if_pt_td_it2001~p2001.

    ENDIF.


  ENDMETHOD.

[ABAP] OM – Lese Personen auf und unterhalb einer OE

Liefert unter einer Orgeinheit alle Personen. Auch in tieferen OE.

    DATA(lt_actor) = VALUE tswhactor( ).
    CALL FUNCTION 'RH_STRUC_GET'
      EXPORTING
        act_otype       = 'O'
        act_objid       = lv_oe
        act_wegid       = 'O-O-S-P'
        act_plvar       = '01'
        act_begda       = sy-datum
        act_endda       = sy-datum
        act_tflag       = space
        act_vflag       = space
        authority_check = space
      TABLES
        result_tab      = lt_actor
      EXCEPTIONS
        no_plvar_found  = 1
        no_entry_found  = 2
        OTHERS          = 3.
    IF sy-subrc <> 0.
      CONTINUE.
    ENDIF.

    " Nur Pernr's relevant
    DELETE lt_actor WHERE otype <> 'P'.
    " Doppelte Pernr's entfernen
    DELETE ADJACENT DUPLICATES FROM lt_actor.

[SAPUI5] MyInbox: Integration of Detail View – EmbedIntoDetail

https://launchpad.support.sap.com/#/notes/2305401 (App to App Navigation CookBook.pdf)

https://blogs.sap.com/2020/07/31/fiori-my-inbox-integration-of-custom-detail-page/

Target:

Go to /n/ui2/fpld_cust and define a second target for your App, i.e. approve.

The approve target needs the “emdedIntoDetails” parameter:

SWFVISU:

Add the new target for your WF Task. Here you have access to all attributes of your Workitem-Container. Pass all your mandatory fields you’ve defined in your oData Entity.

Some examples: https://blogs.sap.com/2016/05/31/my-inbox-open-task-swfvisu-configuration/

If your missing some parameters, just add them in your Workitem Task and pass the values directly into it right from your Workflow Container. This looks much better.

Manifest:

Add a route to navigate via Inbox. The pattern has to match your inbox url.

			"routes": [
				{
					"pattern": "",
					"name": "master",
					"target": "master"
				},
				{
					"pattern": "DataSet/{Pernr},{Datum},{Infty}",
					"name": "object",
					"target": [
						"master",
						"object"
					]
				},
				{
					"pattern": "detail/LOCAL_INBOX/{wfInstanceId}/{taskPath}",
					"name": "wfobject",
					"target": "object"
				}

Detail.Controller:

	onInit: function () {
			// Model used to manipulate control states. The chosen values make sure,
			// detail page is busy indication immediately so there is no break in
			// between the busy indication for loading the view's meta data
			var oViewModel = new JSONModel({
				busy: false,
				delay: 0
			});

			this.getRouter().getRoute("object").attachPatternMatched(this._onObjectMatched, this);

			//My Inbox Integration
			this.getRouter().getRoute("wfobject").attachPatternMatched(this._onWFObjectMatched, this);

			this.setModel(oViewModel, "detailView");

			this.getOwnerComponent().getModel().metadataLoaded().then(this._onMetadataLoaded.bind(this));

		},


		_onWFObjectMatched: function (oEvent) {
			this.getModel("appView").setProperty("/layout", "MidColumnFullScreen");
			var compData = this.getOwnerComponent().getComponentData();

			if (compData && compData.startupParameters && compData.startupParameters.PERNR && Array.isArray(compData.startupParameters.PERNR) &&
				compData.startupParameters.PERNR[0]) {

				var sPernr = compData.startupParameters.PERNR[0];
				var sDatum = compData.startupParameters.DATUM[0];
				var sInfty = compData.startupParameters.INFTY[0];

				this.byId("detailPage").addStyleClass("myInboxPage");

				this.getModel().metadataLoaded().then(function () {
					var sObjectPath = this.getModel().createKey("/DataSet", {
						Pernr: sPernr,
						Datum: sDatum,
                                          Infty: sInfty
					});
					this._bindView(sObjectPath);

				}.bind(this));
			}
		},