Scaffolding & Recorder

Der Tab im Überblick

Öffne die App und im Panel den Tab Scaffolding. Oben wählst du den Bereich: Automatisch (größte sichtbare View), eine bestimmte gerenderte View oder das im Inspector gewählte Control. Neu einlesen liest die View neu. Rechts steht, was erkannt wurde: View, Controller, Zahl der Controls und der Controller-Methoden. ab Pro

Die Karte Erste Schritte fasst den Weg in drei Schritten zusammen: aufzeichnen, generieren, ausführen. Jeder Bereich hat außerdem Mehr erfahren mit Voraussetzungen, Ablageort der Datei und nächsten Schritten, und neben jedem Code steht Code erklärt mit Sprüngen zu den Zeilen.

Page Object erzeugen

1. Bereich: welche View oder welcher Container beschrieben wird.
2. Die erkannte View mit Controller, Zahl der Controls und Controller-Methoden.
3. Die fünf Bereiche: Page Object, Journey, Unit-Test, Mockdaten, Snippets.
4. Die interaktiven Controls der View, jeweils mit Rolle und Selektor-Strategie. Der Haken bestimmt, ob ein Control ins Page Object kommt. Daneben Selektor kopieren als ….
5. Test-Framework: OPA5, wdi5 oder Playwright.
6. Kopieren und Herunterladen des Codes.

Für jedes Control wählt FrontTailor den stabilsten Selektor, den es gibt:

Listeneinträge adressiert der Code über die Liste und den Binding-Pfad des Eintrags. Eingegebene Werte von Eingabefeldern gehören nie zur Beschreibung der View.

Den Klickpfad aufzeichnen

Der Recorder ist eine gemeinsame Aufzeichnungsleiste. Sie steht im Bereich Journey, im Tab Problem melden und im Tab Health – alle drei zeigen dieselbe Aufzeichnung. Der Recorder selbst gehört zur Community-Edition; was du daraus machst, hat die Edition des jeweiligen Moduls. Community

1. Klicke Aufzeichnen – oder starte über die Befehlspalette mit Aufzeichnung starten/stoppen.
2. Bediene die App wie ein Nutzer. Klicks, Auswahl, Suchen und Navigation werden zu Schritten.
3. Klicke Stoppen. Schritte kannst du jetzt verschieben oder löschen.
4. Wähle unter Verwenden als …, was daraus werden soll.

1. Der Zustand: Aufzeichnung läuft … oder Aufzeichnung aus.
2. Schrittzähler und Zeit, jeweils mit Grenze: höchstens 200 Schritte und 10 Minuten. Endet eine Aufzeichnung an einer Grenze, sagt die Leiste das.
3. Stoppen, daneben Verwerfen.
4. Eingegebenen Text aufzeichnen (maskiert) – standardmäßig aus, siehe unten.
5. Die Schritte mit Art, Control und Zeitversatz; rechts verschieben und löschen.

Eingaben: Ohne Freigabe zeichnet der Recorder keinen eingegebenen Text und keine Suchbegriffe auf. Der Schritt trägt dann „Wert nicht aufgezeichnet“, der erzeugte Code die Stelle TODO: value not recorded. Mit Freigabe gilt sie nur für diese Aufzeichnung, und die Werte werden schon in der Seite mit den Datenschutz-Regeln von Problem melden maskiert, einschließlich der Pflichtregeln deines Administrators. Der Schlüssel einer Auswahl und der Zustand eines Schalters sind App-Daten und bleiben erhalten, ebenfalls maskiert.

Ist ein Modul nicht lizenziert, steht seine Ausgabe gesperrt mit Editions-Tag im Menü; ist es per Richtlinie abgeschaltet, fehlt sie. Unter Aufzeichnungen speicherst du Aufzeichnungen unter einem Namen im Browser (höchstens 20 pro Origin), lädst und löschst sie und tauschst sie als JSON-Datei aus.

Journey aus der Aufzeichnung

1. Schritte aus: Aufzeichnung oder Ausgewählten Controls (die Haken im Page Object).
2. Framework: OPA5 startet die Component mit iStartMyUIComponent, wdi5 mit wdi5.goTo, Playwright mit page.goto.
3. Kopieren und Herunterladen.

Prüfungen ergänzt du selbst: Der Code enthält TODO-Zeilen für das erwartete Ergebnis. Mit eingerichtetem KI-Assistenten schlägt Assertions vorschlagen welche vor.

Unit-Test für den Controller

Der Bereich Unit-Test erzeugt ein QUnit-Gerüst mit sap/ui/thirdparty/sinon: ein Test pro eigener Controller-Methode, View, Router und Owner Component gestubbt, Event-Handler bekommen ein oEvent-Stub. Quelltext lädt FrontTailor dafür nicht – die Methoden kommen aus der laufenden App.

Im Editor öffnen öffnet den Controller in VS Code (vscode://file/…). Dazu ordnest du einmal einen Namespace einem lokalen Ordner zu (Workspace-Ordner zuordnen); gespeichert werden nur Pfade. SAP Business Application Studio ist nicht abgedeckt.

Mockdaten

Quelle ist die Aufzeichnung der OData-Konsole in diesem Tab. Für OData V2 entstehen localService/metadata.xml, mockdata/<EntitySet>.json und ein mockserver.js; für OData V4 das Layout von @sap-ux/ui5-middleware-fe-mockserver mit ui5-mock.yaml. ZIP herunterladen lädt alles auf einmal.

• Expandierte Navigationen werden zu Zeilen ihres Entity-Sets, doppelte Zeilen entfallen.
• Geheimnisähnliche Felder (password, token …) werden ersetzt.
• Personenbezogene Daten maskiert FrontTailor mit den Regeln von Problem melden plus den Pflichtregeln der Richtlinie. Die Leiste nennt Regelsatz, Zahl der Regeln und der maskierten Werte.
• Schlüssel und UUIDs bleiben unverändert, damit Navigationen im Mockserver funktionieren. Prüfe die Daten deshalb vor dem Teilen.

Snippets

Der Bereich Snippets enthält 12 eingebaute Vorlagen – unter anderem Formatter, Dialog-Fragment, UI.LineItem, UI.FieldGroup, Common.ValueList, UI.HeaderInfo, CAP-Entity und -Handler, RAP-Projection und -Behavior, OPA5-waitFor. Platzhalter füllt FrontTailor aus dem gewählten Control und einem Entity-Set der aufgezeichneten Metadaten; offene Platzhalter bleiben sichtbar. Eigene Snippets legst du mit Neu an (höchstens 200, im Browser gespeichert) und tauschst sie über Importieren und Exportieren aus.

Typische Probleme