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-Baum auswählen, lädt das Eigenschaften-Panel die zugehörigen Reiter.

Reiter im Überblick

Das Panel gliedert sich in sechs Reiter. Alle sind immer sichtbar; hat die selektierte Komponente in einem Reiter nichts anzubieten – Bindung gibt es nur bei Views, Ereignisse nur bei Komponenten mit Events –, meldet er das statt einer leeren Liste:

Reiter	Inhalt
Eigenschaften	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 Eigenschaften-Reiter.
Bindung	Aktionen zur Backend-ABAP-Klasse der View (generieren, prüfen, Konstanten-Attribute)
Ereignisse	Je Event ein Event-Schlüssel, den die gebundene ABAP-Klasse in on_pai auswertet
Beschreibung	Rich-Text-Beschreibung der Komponente für die App-übergreifende Doku
Dokumentation	Zusammengestellte Dokumentation der App aus allen Beschreibungen
Übersetzung	Übersetzungen der Texte je Sprache

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

Eigenschaften

Über den Reiter Eigenschaften 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, Back, Accept, Reject, Transparent, Ghost, Up, Unstyled, Emphasized, Critical, Negative, Success, Neutral, Attention), enabled, icon
Input	value, placeholder, type (Text, Date, Datetime, DatetimeLocale, Email, Month, Number, Tel, Time, Url, Week, Password), editable
Label	text, design (Standard, Bold)
List	items (Daten-Pfad), mode (None, SingleSelect, SingleSelectLeft, SingleSelectMaster, MultiSelect)

App- und View-Eigenschaften

Wählen Sie im Reiter App-Baum die App-Wurzel (Button App bearbeiten) oder eine View aus, zeigt das Panel deren Eigenschaften. Neben Layout-Attributen (App: pageWidth, pageHeight; View: 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.
View	pushInterval	Nur Cloud. Wie oft die View server-seitige Push-Nachrichten (push_refresh_by_client/_by_application) abholt, in Millisekunden, mindestens 500. 0 = die View empfängt keinen Push. Läuft nur, solange diese View angezeigt wird, und zählt nicht als Aktivität: Auto-Logout und Keepalive bleiben davon unberührt. Im On-Premise-Designer nicht vorhanden (dort ist Push ein WebSocket).

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 On-Prem bzw. Launchpad Cloud.

Bindung (Backend-Anbindung)

Eine View verbinden Sie mit einer ABAP-Klasse im Backend, indem Sie deren Namen in die View-Eigenschaft class eintragen (Reiter Bindung). Dieser Eintrag ist die Bindung. Die Klasse trägt die Anwendungslogik – Datenermittlung, Validierungen, Speichern, Senden.

Der Reiter Bindung bietet dazu drei Aktionen:

Aktion	Wirkung
Backend Klasse generieren	Legt eine neue ABAP-Klasse mit dem in class eingetragenen Namen im Paket der Applikation an, inklusive Standard-Methoden für die Anbindung.
Verbindung zur Backend-Klasse prüfen	Prüft, ob die in class eingetragene Klasse im Backend existiert und für die Mobile-Builder-Anbindung geeignet ist. Der Button ändert die Bindung nicht.
Backend Konstanten-Attribute generieren	Schreibt Konstanten-Attribute in die gebundene View-Klasse – für alle controlId-Werte und hinterlegten Event-Schlüssel. Ein Dialog listet die Attribute vorab, mit Suche und der Möglichkeit, einzelne Einträge zu entfernen. Es wird keine separate Klasse angelegt.

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.

Ereignisse

Events sind Mechanismen, mit denen Komponenten auf Benutzerinteraktionen reagieren. Im Reiter Ereignisse tragen Sie je Event einen Event-Schlüssel ein (z.B. login). Löst der Benutzer das Event aus, ruft die Runtime das Backend; dort wertet die gebundene ABAP-Klasse den Schlüssel in on_pai über me->get_event( )->get_event_key( ) aus.

Schlüssel in on_pai behandeln

Ein Event-Schlüssel ist kein Methodenname. Die an die View gebundene ABAP-Klasse muss den Schlüssel in on_pai auswerten (typisch per CASE) – sonst bleibt das Ereignis ohne Wirkung.

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

Event	Komponente
onPress	Button, Link, Icon, Image, GenericTag, Tile (inkl. Tile-Inhalte), SegmentedButtonItem
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
onNavButtonPress	View (Zurück-Button im Seitenkopf)

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

Beschreibung und Dokumentation

Über den Reiter Beschreibung öffnen Sie einen Rich-Text-Editor, in dem Sie eine Beschreibung für die Komponente hinterlegen. Der Reiter Dokumentation zeigt die daraus zusammengestellte Dokumentation der App; der Designer verwendet dieselben Texte für die App-übergreifende Dokumentation.

Übersetzung

Mit dem Designer pflegen Sie Übersetzungen für alle Komponenten mit Text zentral. Die Übersetzungen stehen der App zur Laufzeit zur Verfügung.

Im Dropdown-Menü wählen Sie die Sprache, in der Sie übersetzen möchten. Die Sprachliste stammt aus dem SAP-System (ISO-639-Sprachschlüssel) und wird beim Öffnen des Reiters geladen.

Übersetzungspaar manuell hinzufügen

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

Feld	Inhalt
Schlüssel	Aktueller Text der Komponente, deren Text übersetzt werden soll
Text	Ü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.

Über Hochladen importieren Sie außerdem eine vorhandene i18n-Datei; die enthaltenen Paare (Schlüssel und Text) prüfen Sie vor der Übernahme in einem Dialog.

Übersetzungspaar löschen

Beim Löschen eines Paars wird der Schlüssel aus allen Sprachen entfernt. Der Button Alle entfernen 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