Eigenschaften der ausgewählten Komponente

Über das Eigenschaften-Panel auf der rechten Seite passen Sie Komponenten an: Sie verändern das Aussehen über Attribute, fügen Navigationsmöglichkeiten hinzu und verbinden Views mit dem SAP-Backend.

Sobald Sie eine Komponente auf der Landefläche oder im View-Tree auswählen, lädt das Eigenschaften-Panel die zugehörigen Reiter.

Reiter im Überblick

Das Panel gliedert sich in vier Reiter:

Reiter	Inhalt
Properties	Fachliche Eigenschaften (Text, Werte, Verhalten) und optische Attribute (Breite, Höhe, Farben, CSS-Werte). Es gibt keinen separaten Style-Reiter – Darstellungs-Attribute stehen mit im Properties-Reiter.
Binding	Anbindung an die Backend-ABAP-Klasse
Events	Event-Handler – Methoden im Backend, die auf Benutzeraktionen reagieren
Documentation	Beschreibung der Komponente für die App-übergreifende Doku

Welche Properties verfügbar sind, hängt vom Typ der Komponente ab.

Properties

Über den Reiter Properties verändern Sie Komponenten-Attribute. Die Veränderung sehen Sie in Echtzeit auf der Landefläche.

Beispiele typischer Properties:

Komponente	Wichtige Properties
Button	text, type (Default, Emphasized, Transparent, Reject, Accept), enabled, icon
Input	value, placeholder, type (Text, Number, Email, Password), editable
Label	text, design (Standard, Bold)
List	items (Daten-Pfad), mode (None, SingleSelect, MultiSelect)

App- und View-Eigenschaften

Wählen Sie die App-Wurzel (oberster Knoten im View-Tree) oder eine View aus, zeigt das Panel deren Eigenschaften. Neben Layout-Attributen (pageWidth, pageHeight, pageZoom) und den FLP-Feldern gibt es Eigenschaften für das Session-Verhalten:

Ebene	Property	Bedeutung
App	autoLogoutMinutes	Automatische Abmeldung nach X Minuten Inaktivität. 0 = aus.
App	autoLogoutWarningSeconds	Vorwarn-Countdown vor der Abmeldung (Sekunden). Standard 30.
App	logoffUrl	Ziel-URL für den Logoff. Leer = SAP-Standard /sap/public/bc/icf/logoff. Im Fiori-Launchpad wird stattdessen der Shell-Logout verwendet.
View	keepaliveInterval	Hält die Session offen, solange die View aktiv ist (Sekunden). 0 = aus. Muss kleiner als autoLogoutMinutes × 60 sein – der Keepalive-Ping setzt den Inaktivitäts-Timer zurück und pausiert damit den Auto-Logout.

Vorschau

In der Designer-Vorschau löst der Auto-Logout keinen echten Redirect aus, sondern zeigt nur einen Hinweis – beim Testen werden Sie nicht aus SAP abgemeldet.

Für den Seitenkopf und die Zurück-Navigation einer View gibt es:

Ebene	Property	Bedeutung
View	title	Titel der View im Seitenkopf; im Fiori-Launchpad erscheint er stattdessen in der FLP-Kopfzeile.
View	showHeader	Seitenkopf der View ein-/ausblenden.
View	showNavButton	Zurück-Button im Seitenkopf anzeigen.
View	onNavButtonPress	Server-Event beim Zurück-Navigieren; ohne Event navigiert die Runtime zur zuvor angezeigten View.

Verhalten im Fiori-Launchpad

Läuft die App im FLP, blendet die Runtime den Seitenkopf automatisch aus, wenn er nur Standard-Inhalte trägt (Icon, Titel, Zurück-Button) – die FLP-Kopfzeile zeigt stattdessen bei jedem View-Wechsel den Titel der aktiven View (Fallback: App-Titel). Die Zurück-Taste der FLP-Shell übernimmt dabei die Logik des Zurück-Buttons (onNavButtonPress bzw. vorherige View); zeigt die View keinen Zurück-Button oder gibt es nichts zurückzunavigieren, führt sie wie gewohnt zur Launchpad-Übersicht. Details: Fiori Launchpad.

Binding (Backend-Anbindung)

Im Reiter Binding verbinden Sie die ausgewählte View mit einer ABAP-Klasse im Backend. Diese Klasse trägt die Anwendungslogik – Datenermittlung, Validierungen, Speichern, Senden.

Sie haben zwei Möglichkeiten:

Aktion	Wirkung
Generieren	Legt eine neue ABAP-Klasse mit dem angegebenen Namen im Paket der Applikation an, inklusive Standard-Methoden für die Anbindung.
Verbinden	Bindet eine bereits existierende ABAP-Klasse an die View.
Konstanten-Klasse	Generiert eine Hilfsklasse mit Konstanten – z.B. allen controlId-Werten der View –, damit Sie diese im Backend typsicher referenzieren können.

Pro View eine Klasse

Üblich ist eine eigene ABAP-Klasse pro View. So bleiben Logik und View klar verbunden und leicht testbar.

Details zur Backend-Anbindung finden Sie unter Backend-Anbindung.

Events

Events sind Mechanismen, mit denen Komponenten auf Benutzerinteraktionen reagieren. Im Designer verknüpfen Sie eine Event-Methode der zuvor angebundenen ABAP-Klasse mit einer Komponente.

Methode in der gebundenen Klasse

Die hinterlegte Event-Methode muss in der ABAP-Klasse existieren, die zur View gebunden ist – sonst wird sie zur Laufzeit nicht gefunden. Tragen Sie unter dem Reiter Events den Methodennamen ein.

Verfügbare Event-Arten (komponentenabhängig):

Event	Komponente
onPress	Button, Link, GenericTag
onSelect	CheckBox, RadioButtonGroup, IconTabBar
onChange	Input, TextArea, ComboBox, Switch, StepInput, TimePicker, List
onSubmit	Input (beim Drücken der Entertaste)
onSelectionChange	Table, UITable, SegmentedButton
onScanSuccess	BarcodeScannerButton
onScanFail	BarcodeScannerButton
onClose	MessageStrip
onSave	SignaturePad

Eine ausführliche Beschreibung finden Sie unter Event-Methoden.

Documentation / Beschreibung

Über den Tab Documentation öffnen Sie einen Rich-Text-Editor, in dem Sie eine Beschreibung für die Komponente hinterlegen können. Der Designer verwendet diese Texte automatisch für die App-übergreifende Dokumentation.

Übersetzung

Mit dem Designer pflegen Sie Übersetzungen für alle Komponenten mit Text zentral. Am Ende wird eine i18n-Datei pro Sprache erzeugt, die in die App eingebettet wird.

Im Dropdown-Menü wählen Sie die Sprache, in der Sie übersetzen möchten. Aktuell verfügbar:

• Deutsch (DE)
• Englisch (EN)
• Spanisch (ES)

Übersetzungspaar manuell hinzufügen

Sie können ein Key-Value-Paar manuell hinzufügen:

Feld	Inhalt
Key	Aktueller Text der Komponente, deren Text übersetzt werden soll
Value	Übersetzter Text in der gewählten Sprache

i18n-Datei generieren lassen

Alternativ lassen Sie eine i18n-Datei generieren. Bereits hinzugefügte Übersetzungspaare tauchen darin nicht mehr auf. Paare, die Sie nicht übersetzen möchten, lassen sich vor dem Speichern entfernen.

Übersetzungspaar löschen

Beim Löschen eines Paars wird der Schlüssel aus allen Sprachen entfernt. Eine Option Alle löschen entfernt sämtliche Schlüssel über alle Sprachen.

Nächste Schritte

• Backend-Anbindung – View an Klasse binden
• Backend-Anbindung – Event-Methoden
• Meta-Funktionen – Dokumentation, Build, Vorschau