SAP Fiori (SAPUI5) Applikationen mit VSCode entwickeln

Benötigte Extensions installieren

SAP Fiori Tools - Extension Pack

Die wichtigste Extension, um mit der Entwicklung von SAP Fiori Applikationen mit VSCode zu beginnen ist das SAP Fiori Tools - Extension Pack. Dieses Erweiterungspaket vereint mehrere VSCode-Erweiterungen, welche dich bei der Entwicklung von SAP-Fiori-Apps unterstützen. Hier ist eine Übersicht über die Extensions, welche darin enthalten sind:

• Application Wizard: Mit dieser Erweiterung lässt sich mithilfe eines Wizards eine Verbindung zu dem SAP-System herstellen, mit dem du arbeiten möchtest. Zudem lassen sich damit Applikations-Strukturen basierend auf verschiedenen SAP Fiori Templates generieren.

• SAP Fiori Tools - Application Modeler: Ermöglicht das grafische Anzeigen und Ändern von Seiten, Navigation und Serviceentitäten der Anwendung. Sie können neue Navigationsziele und Seiten hinzufügen, Seiten löschen und zu den entsprechenden Bearbeitungstools navigieren.

• SAP Fiori Tools - Service Modeler: Bietet eine grafische Ansicht der verwendeten OData-Services inklusive der Annotations aus dem Backend sowie der lokalen Annotationen.

• SAP Fiori Tools - XML Annotation Language Server: Bietet Code-Vervollständigung, Snippets und i18n-Unterstützung während der Entwicklung von XML-Views und -Fragmenten.

• UI5 Language Assistant: Stellt den Sprachsupport für SAPUI5-Applkationen zur Verfügung.

• XML Toolkit: Ermöglicht es XML-Dateien zu validieren.

Anmerkung: Im Erweiterungspaket sind noch einige weitere Extensions inkludiert, diese werden während dieses Tutorials aber nicht verwendet und sind deshalb auch nicht beschrieben.

ESLint

Beim generieren einer neuen SAP Fiori Applikation wird eine vordefinierte Konfigurationsdatei für ESLint (.eslintrc) mitgeliefert. ESLint wird zur statischen Analyse der Codebasis verwendet, um schnell Probleme zu finden, die zu Laufzeitfehlern führen können. Um ESLint in VSCode zu integrieren, sollte die ESLint Erweiterung installiert werden.

Prettier - Code formatter

Zusätzlich zu ESLint empfehle ich die Installation der Prettier - Code formatter Extension. Prettier ist ein Tool zur Code-Formattierung, der den Codestil einer Applikation sauber und konsistent hält, indem er Formattierungs-Fehler anzeigt und diese direkt im konfigurierten Stil formatiert.

Eine Verbindung zum SAP-System erstellen

Bevor wir mit der Generierung der Applikation beginnen, muss eine Verbindung zum SAP-System hergestellt werden, mit welcher gearbeitet werden möchte. Für dieses Tutorial wird eine On Premise ABAP-Umgebung verwendet.

1. Öffne die SAP Fiori-Ansicht in VSCode (Klicke dazu in der Hauptnavigation auf der linken Seite auf SAP Fiori).

2. Klicke auf "Add SAP System" in der "SAP SYSTEMS"-Ansicht auf der linken Seite.

3. Wähle den Typ des SAP-Systems. Dies kann entweder eine selbst-gehostete SAP-Instanz sein (ABAP On Premise) oder eine Cloud-Instanz basierend auf der Business Technology Platform (ABAP Environment on SAP Business Technology Platform). Wie schon erwähnt wählen wir für dieses Tutorial eine "ABAP On Premise"-Instanz.

4. Trage die Systeminformationen und Zugangsdaten ein und klicke auf "Save"
   - System Name: Kann frei gewählt werden. Dieser Name wird lediglich zur Wiedererkennung des SAP-Systems in VSCode verwendet.
   - URL: Die Verbindungs-URL zur On Premise Instanz (zB. https://my-onprem-system.com:4430)
   - Client: Der Mandant welcher für die Verbindung verwendet werden soll (zB. 200)
   - Username & Password: Zugangsdaten für die Instanz

5. Falls die Verbindung erfolgreich erstellt werden konnte, siehst du das System nun unter "SAP SYSTEMS" in der linken Spalte.

VSCode ist nun mit deinem SAP-System verbunden und wir können unsere erste Fiori Applikation erstellen.

SAP Fiori Application scaffolden

Wir können nun damit beginnen unsere erste SAP Fiori-Application in VSCode zu scaffolden. Dafür bietet die bereits installierte "Application Wizard"-Extension eine gute Schritt-für-Schritt Anleitung. 

1. Klicke mit der rechten Maustaste auf das SAP-System, welches du im letzten Kapitel erstellt hast und wähle "Create SAP Fiori Application"

2. Der SAP Fiori Generator öffnet sich

3. Wähle ein passendes Template für die zu erstellende Applikation. Für dieses Tutorial wählen wir das "Basic"-Template, welches das Gerüst für eine Freestyle-Applikation erstellt. Klicke auf "Next".

4. Nun kannst du bei Bedarf einen OData-Service auswählen, welchen du in der SAP Fiori-Applikation verwenden wirst. Einfachheitshalber wählen wir hier "None".

5. Nun kannst du den Namen der Root-View der Applikation eingeben. Wir tragen hier "MyView" ein.

6. Im letzten Schritt musst du einige projektspezifische Angaben eintragen::
   - Module name: Der Name des Moduls (zB. myproject)
   - Application title: Der Titel der Applikation, welcher dem Benutzer angezeigt werden soll (zB. First SAP Fiori App with VSCode)
   - Application namespace: Der verwendete Namespace der Applikation. Dies ist ein sehr wichtiger Wert, da dieser verwendet wird, um verschiedene Teile deiner Applikation zu verbinden. Es sollte eine einzigartige Bezeichnung sein und dem Java Package Notation-Standard folgen. (zB. ch.neovo.myproject)
   - Description: Ein kurzer Text, welche die Funktionalität der Applikation beschreibt.
   - Project folder path: Wähle hier das Root-Verzeichnis, in welches die Applikation gespeichert werden soll. Der Wizard wird darin einen Unterordner erstellen, welcher heisst, wie der "Module name", welcher zuvor eingetragen wurde.
   - Minimum SAPUI5 version: Wähle hier die SAPUI5-Version, welche von deinem SAP-System unterstützt wird.
   - Enable TypeScript: JA bitte!
   - Add deployment configuration: Nein (wird für dieses Tutorial nicht verwendet)

7. Beim Klick auf "Finish" wird die Applikation in das gewählte Root-Verzeichnis erstellt.

Sobald der Vorgang beendet ist, solltest du die neu generierte Applikation in deinem Workspace sehen (in der "Explorer"-Ansicht).

Prettier-Konfiguration hinzufügen

Neben einer ESLint-Konfiguration empfehle ich eine Prettier-Konfiguration zu erstellen, um deinen Code-Stil konsistent zu halten.

1. Erstelle eine .prettierrc-Datei im Projekt-Rootverzeichnis.

2. Füge die folgende Konfiguration ein:
   {
"tabWidth": 4,
"trailingComma": "none",
"arrowParens": "avoid"
}

3. Öffne die "Text-Editor"-Einstellungen "Code > Preferences > Settings > Text Editor" und wähle "Prettier - Code formatter" als "Editor: Default Formatter".

4. Nun kannst du den Code der Applikation formatieren, indem du entweder mit der rechten Maustaste auf ein File klickst und "Format document" wählst oder indem du die Tastenkombination CMD + Shift + F (in macOS) / Ctrl + Shift + F (in Windows) drückst.

Versteckte Features

Das "SAP Fiori Tools - Extension Pack" beinhaltet noch einige eher versteckte aber sehr nützliche Funktionalitäten.

Rechtsklick auf das manifest.json

Wenn du mit der rechten Maustaste auf das webapp/manifest.json-File klickst siehst du zwei zusätzliche Aktionen im Kontextmenü:

• Open Annotation File Mananger: Öffnet eine Ansicht, in der du im Projekt neue Annotations hinzufügen und vorhandene konfigurieren kannst.

• Open Service Manager: Öffnet eine Ansicht, in welcher OData-Services hinzugefügt sowie konfiguriert werden können.

Weitere Features in der VSCode Command Palette

Wenn du die VSCode Command Palette (macOS: CMD + Shift + P / Windows: Ctrl + Shift + P) öffnest, findest du noch viele weitere hilfreiche Tools, welche alle mit "Fiori" beginnen. Das bedeutet, du kannst einfach "Fiori" in das Suchfeld eingeben und so ev. noch weitere Tools finden, welche dich bei der Entwicklung deiner Applikation unterstützen können.

Geschafft!

Du hast VSCode nun vollständig für die Entwicklung von SAP Fiori-Applikationen eingerichtet und kannst mit der Umsetzung deiner ersten Applikation beginnen!