Homelab, Linux, JS & ABAP (~˘▾˘)~
 

[SAPUI5] Copy Table Row

Button für das Kopieren einer Zeile hinzufügen.

<Table id="itemsTable" items="{oModel>/ITEMS}">
<columns>
      <Column id="splitColumn" hAlign="Center" demandPopin="false">
            <Text text="{i18n>SPLIT}"/>
      </Column>
</columns>
<items>
      <ColumnListItem>
            <cells>
                  <Button press="onSplitPressed" id="SPLIT_ROW" icon="{= ${oModel>CUSTOM_ITEM} === true ? 'sap-icon://delete' : 'sap-icon://add'}"/>
            </cells>
      </ColumnListItem>
</items>
</Table>

Nur neu hinzugefügte Zeilen sollen auch wieder gelöscht werden dürfen, daher werden manuell hinzugefügte Zeilen markiert mit CUSTOM_ITEM = True;
Via Expression Binding wird dann das erforderliche Icon bestimmt.

onSplitPressed: function (oEvent) {
		var oContext = oEvent.getSource().getBindingContext("oModel");
		var path = oContext.getPath();
		var oModel = oContext.getModel();
		var oItems = oModel.getProperty("/ITEMS");
		var index = path.substr(path.length - 1);

		//selektiertes Item lesen
		var oItem = oModel.getProperty(path);

		//was soll passieren? Zeile hinzufügen oder entfernen?
		if (oItem.CUSTOM_ITEM !== true) {

			//Neues Item anlegen
			var oNewItem = JSON.parse(JSON.stringify(oItem));
			//Markiere neue Zeile, da nur diese auch wieder gelöscht werden darf
			oNewItem.CUSTOM_ITEM = true;
			// +1 weil Zeile soll ja nach der Aktuellen einfügt werden
			index++; 
			oItems.splice(index, 0, oNewItem);

		} else {
			// Item löschen
			oItems.splice(index, 1);
		}

		oModel.setProperty("/ITEMS", oItems);
	},

[Fiori] Debug standard Fiori App

When opening the Dev-Tools for a SAP standard Fiori App, it will look like this:

You won’t see any controller.js to debug.
What to do? Close the Debugger-Tools and hit CTRL+ALT+SHIFT+P to open the Technical Information Dialog

Check the Checkbox (or choose a specific controller) and reload the app.

It reloads with a new URL parameter and if you open the Dev-Tools, you will now see the controller.js.

Other options to debug or at least to collect some information about your app are the UI5 Diagnostics (hit CTRL+ALT+SHIFT+S) and the UI5 Inspector which is a Brower Addon.

[SAPUI5] Formatting numbers

https://experience.sap.com/fiori-design-web/formatting-numbers/#usage
https://sapui5.netweaver.ondemand.com/sdk/#/topic/91f3145e6f4d1014b6dd926db0e91070
a few examples: https://github.com/brooklynb7/HTML5/blob/master/sapui5-dist-static/test-resources/sap/ca/ui/demokit/explored/views/type/number.view.xml

<ObjectListItem 
title="{income>Month}" 
number="{ model : 'income', path : 'Cost', type: 'sap.ui.model.type.Integer', formatOptions: {groupingEnabled: true} }"
numberUnit="EUR" />

[SAPUI5] Deploying the ui5 sample app on debian

I’m deploying the openui5-sample-app to a Linux Container running Debian Buster. First update the packages and install Node.js.

apt update && apt upgrade -y
apt install curl -y
curl -sL https://deb.nodesource.com/setup_12.x | bash -
apt install nodejs -y
nodejs --version

Install PM2 (process manager to manage Node.js applications) and the UI5 Tooling

npm install pm2 -g
npm install --global @ui5/cli

Now clone the openui5-sample-app and build it

apt install git
git clone https://github.com/SAP/openui5-sample-app.git
cd openui5-sample-app/
ui5 build -a
cd ..

Run your project on port 8000. With “startup” it will automatically create a systemd script.

pm2 serve openui5-sample-app/dist/ 8000
pm2 startup
pm2 save
systemctl start pm2-root
systemctl status pm2-root

[SAPUI5] local ui5 development

1. Install node.js

2. Install UI5 Tooling

npm install --global @ui5/cli

3. Install Easy UI5 Generator, create a project and run it on your localhost

npm install -g yo generator-easy-ui5
yo easy-ui5
cd <your project name> 
npm start

4. Set up a Github project and do your initial push

git add .
git commit -m "Initial commit"
git remote add origin https://github.com/user/myUI5App.git 
git push origin master

5. Install your favorite Editor, e.g. Visual Studio Code or Atom, and open your project to edit it

[SAPUI5] Versioning

SAPUI5 follows Semantic Versioning.

MAJOR.MINOR.PATCH (e.g. 1.71.9)

  • Patches are mostly bug fixes.
  • Minor releases bring new features.
  • Major contains incompatible API changes.

Version overviews:
https://sapui5.hana.ondemand.com/versionoverview.html
https://openui5.hana.ondemand.com/versionoverview.html

Find detailed patchinfos here:
https://sapui5.hana.ondemand.com/X.XX.X/patchinfo.html (where X.XX.X is the SAPUI5 version number)
https://openui5.hana.ondemand.com/X.XX.X/patchinfo.html (where X.XX.X is the OpenUI5 version number)

Note: “sap.ui.core and sap.m are special, because they are OpenUI5 libraries. Currently, OpenUI5 libraries are always released as a whole. This means that whenever there is a change to be released for any of the OpenUI5 libraries, the new patch includes them all.”

[Fiori] Transactions and Reports

SE38:

  • /UI2/START_URL
  • /UI2/START_TCODE
  • /UI2/FLP_ADMIN_UI

SICF:

  • Frontend-Services: /sap/bc/ui5_ui5/sap/
  • Backend-Services: /sap/opu/odata/sap/ und /sap/bc/bsp/sap/

Tcodes:

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/iwfnd/cache_cleanupBereinigung des Gateway-Modellcache (Frontend)
/n/ui2/custCustomizing für UI-Technologien
/n/ui2/flpSAP Fiori Launchpad
/n/ui2/flcSAP Fiori Launchpad – Prüfungen
/n/ui2/fliaFiori Launchpad: Absichtsanalyse
/n/ui2/flpd_custFiori Launchpad: Designer (mandantenüber.)
/n/ui2/flpd_confFiori Launchpad: Designer (mandantenabh.)
/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