Wenn Sie sich dafür entscheiden, ein neues OpenUi5-Widget zu erstellen, müssen Sie einen Blick auf die Details des Konstruktors in der API-Referenz werfen.
Hier finden Sie die OpenUi5 API aller Widgets und eine Beschreibung, wann sie verwendet werden sollen.

Anfangen

Lassen Sie uns eine mobile Version eines Panels erstellen. Suchen Sie zunächst nach new sap.m.Panel in der API-Referenz. In diesem Fall werden die unterstützten Einstellungen angezeigt: Eigenschaften, Aggregationen und Ereignisse.  

 

 

• Eigenschaften beschreiben die verschiedenen Attribute eines Elements (z.B. Breite oder Höhe).
• Aggregationen beschreiben, welche anderen Elemente das Widget enthalten kann (z.B. besteht ein Panel aus einer Kopf- und Info-Symbolleiste und Inhalten). Abhängig von dem Steuerelement, das in der API angezeigt wird, können Sie jedes oder nur bestimmte Steuerelemente verwenden (z. B. sap.ui.core.Control vs. sap.m.Toolbar)
• Ereignisse beschreiben die möglichen direkten Interaktionen für den Benutzer (z.B. das Panel erweitern).

Schritt 1

Benennen Sie im ersten Schritt Ihr Widget, schreiben Sie eine kurze Beschreibung und wählen Sie eine Kategorie auf der Registerkarte Widget aus. Darüber hinaus haben Sie jetzt die Möglichkeit, dem Widget benutzerdefinierte Tags hinzuzufügen.
Sie können im Suchfeld der Widget-Übersichtsliste und im Widget-Suchfeld des UI-Designers nach Widget-Tags suchen und filtern.

Schritt 2

Klicken Sie auf die Registerkarte OpenUI5, um die spezifischen Parameter auszufüllen.
Der Widget-Typ muss mit dem Namen des UI5-Steuerelements identisch sein.
In diesem Fall: sap.m.Panel

API-Referenz

Widget-Typ “Vereinfachung”

 

Schritt 3

Füllen Sie die Vorlage für das Widget aus.
Es stellt einen Bauplan des Widgets dar, der vom Simplifier verwendet werden kann.
Die OpenUI5-Vorlagen sind in JSON mit Mustache-Platzhaltersyntax geschrieben.
Der Simplifier unterstützt drei verschiedene Typen:

• Zeichenfolge: “{{&placeholderName}}”
• Boolescher Wert: {{placeholderName}}
• Aggregation: [{{#placeholderName}}”{{&}}”,{{/placeholderName}}]

Der placeholderName wird verwendet, um Eigenschaften, Ereignisse usw. zu deklarieren.
Es empfiehlt sich, die OpenUI5-Namen zu verwenden. Für SAP Controls (z.B. sap.m.BackgroundDesign) können Sie den Datentyp “String” verwenden.

Schritt 4

Alle Attribute, die mit einem Schnurrbartwert in der Vorlage deklariert sind, müssen ebenfalls im Bereich Eigenschaften / Ereignisse / etc. darunter deklariert werden, damit Sie später im Prozess im UI Designer mit ihnen arbeiten können. Sie können konstante Werte anstelle von Schnurrbart verwenden, z. B. wenn Sie nicht möchten, dass eine Eigenschaft bearbeitet werden kann.

• Eigenschaften: Geben Sie den Namen (Ihre Vorlage placeholderName), eine Beschreibung (optional), den Standardwert und den Datentyp (wie in der API-Referenz geschrieben) ein.
  Wenn eine Eigenschaft übersetzbar sein soll, müssen Sie dies hier überprüfen.
• Ereignisse: Tragen Sie einfach den Namen (wieder das Template placeholderName) in die Liste ein.
• Aggregation: Übertragen Sie Ihren VorlagenplatzhalterName und den Inhaltstyp (API-Referenz).
  Wenn Ihre Aggregation mehr als nur ein Steuerelement enthalten soll, aktivieren Sie das Kontrollkästchen “Mehrere”.

Schritt 5

Wenn alle Eigenschaften aufgelistet sind, können Sie die Standard-Bindungseigenschaft festlegen, bei der es sich um die priorisierte Widget-Eigenschaft handelt, die im Bearbeitungsmodus einer User Story (Process Designer) verwendet wird.

Ende

Nachdem Sie auf die Schaltfläche “Speichern” geklickt haben, haben Sie erfolgreich ein Panel-Widget für Ihre Anwendung erstellt.