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 ist in fünf Reiter unterteilt:

Reiter	Inhalt
Properties	Fachliche Eigenschaften: Text, Werte, Verhalten
Style	Optisches: Breite, Höhe, CSS-Klassen, Farben
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)

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, RadioButton, IconTabBar
onChange	Input, TextArea, ComboBox, Switch, StepInput
onSubmit	Input, TextArea (beim Drücken der Entertaste)
onSelectionChange	List, Table, ComboBox, RadioButtonGroup, 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