Grundlagen

Die am häufigsten verwendeten Elemente

Ein einfacher Button mit Text und/oder Symbol.

Eine Schaltfläche, die mehrere Unterschaltflächen enthält, mit denen der Benutzer eine von vielen Optionen auswählen kann.

Einfaches Kontrollkästchen mit einer Beschriftung.

Ein DatePicker, einschließlich eines Popup-Kalenders zum Auswählen eines Datums.

Ein Dropdown-Feld, in dem Sie eine Option aus mehreren Optionen auswählen können.

Ein einfaches Symbol, das alle Symbole anzeigen kann, die im Icon Explorer von OpenUI5 verfügbar sind.

Zeigt ein Bild aus dem Abschnitt “Image Explorer/Assets” Ihrer Anwendung oder aus externen Quellen an.

Ein einfaches Eingabefeld, in das der Benutzer Werte (Text, Zahlen) einfügen kann.

Ein Hyperlink-Steuerelement, das zum Navigieren zu anderen Apps oder Webseiten oder zum Auslösen von Aktionen verwendet wird.

Ein Element zur Anzeige einer Nachricht, eingebettet in den Anwendungsbildschirm. Der Nachrichtencontainer kann auf bestimmte Zustände eingestellt werden (Information, Erfolg, Warnung und Fehler) und kann über eine Schaltfläche geschlossen werden.

Das RadioButton ist ein Steuerelement, das einem Kontrollkästchen ähnelt, aber es ermöglicht Ihnen, nur eine der vordefinierten Optionen auszuwählen.

Ein Switch ist ein Steuerelement, das einen binären Zustand darstellt, z. B. ein/aus oder wahr/falsch.

Das Text-Steuerelement kann zum Einbetten längerer Textabsätze, die einen Textumbruch erfordern, in die App verwendet werden

Der Textbereich dient zur Eingabe von mehreren Textzeilen. Wenn er leer ist, kann er einen Platzhalter ähnlich wie eine Eingabe enthalten. Sie können die Höhe und Breite des Textbereichs festlegen und auch ein bestimmtes Verhalten beim Umgang mit langen Texten bestimmen.

Ein einfacher, großformatiger Text mit expliziter Header-/Titelsemantik.

Karten

Eine Karte stellt eine App oder Seite dar. Es kann verwendet werden, um die App zu starten oder zum Seiteninhalt zu navigieren. Integrationskarten sind eine Möglichkeit, Anwendungsinhalte auf konsistente Weise für Endbenutzer verfügbar zu machen.

Eine Kachel, die im oberen Bereich ein Bild und im unteren Bereich einen Text und eine Fußzeile anzeigt.

Eine Karte, die wie eine Visitenkarte aufgebaut ist. Sie enthält das Profilbild eines Mitarbeiters, seinen Namen, Kontakt- und Unternehmensinformationen.

Diese Widget-Gruppe ist wie ein Kommentarbereich aufgebaut. Im oberen Teil können Sie Ihren Kommentar in das Feed Input Widget einfügen. Im unteren Teil zeigt ein Karten-Widget die vorhandenen Kommentare an.

Eine Karte, die die Details eines Produkts anzeigt. Die Karte enthält eine Kopfzeile mit einem Titel und einem Untertitel, einen Detailbereich mit einem Bild und Text und eine Fußzeile mit einer Aktionsschaltfläche.

Containerelement, das Kopfzeile, Unterüberschrift und einen anpassbaren Hauptbereich in einem Kachelformat anzeigt.

Charts

Verschiedene Arten von Diagrammen. Diagramme enthalten und zeigen große Mengen von Werten auf interaktive, reichhaltige und reaktionsschnelle Weise an.

Ein Balkendiagramm, um Ihre Daten in visueller Form darzustellen. Die Daten werden als vertikale Balken dargestellt.
Basierend auf der JavaScript-Bibliothek ChartJS (Version 3.9.1).

Ein Ringdiagramm, um Ihre Daten in visueller Form darzustellen. Das Diagramm ist in Segmente unterteilt, der Bogen jedes Segments zeigt den proportionalen Wert jedes Datenelements. In einem Ringdiagramm sehen die Datensegmente wie die Teile eines Ringrings aus.
Basierend auf der JavaScript-Bibliothek ChartJS (Version 3.9.1).

Ein Liniendiagramm, um Ihre Daten in visueller Form darzustellen. Die Daten werden als Datenpunkte auf einer Linie dargestellt.
Basierend auf der JavaScript-Bibliothek ChartJS (Version 3.9.1).

Ein Tortendiagramm, um Ihre Daten in visueller Form darzustellen. Das Diagramm ist in Segmente unterteilt, der Bogen jedes Segments zeigt den proportionalen Wert jedes Datenelements. In einem Kreisdiagramm sehen die Datensegmente wie die Stücke eines Kreises aus.
Basierend auf der JavaScript-Bibliothek ChartJS (Version 3.9.1).

Ein Radardiagramm, um Ihre Daten in visueller Form darzustellen. Die Daten werden als Datenpunkte auf Linien um einen Mittelpunkt dargestellt.
Basierend auf der JavaScript-Bibliothek ChartJS (Version 3.9.1).

Dialoge

Eine Datums- und Uhrzeitauswahl, einschließlich eines Popup-Kalenders zum Auswählen eines Datums und einer Uhrzeit.

Ein Popup-Dialogfeld zum Anzeigen von Nachrichten oder anderen Inhalten, wie z. B. Formularen, in einem Bildschirm-Overlay.

Ein einfacher Dialog mit einem Titel, einer Textnachricht und einem OK-Button.

Ein kleines, unterbrechungsfreies Popup für Nachrichten, das nach einigen Sekunden automatisch verschwindet

Formt

Ein Formular dient dazu, dem Benutzer Daten zu präsentieren und ihm die Möglichkeit zu geben, Daten auf strukturierte Weise einzugeben.
Das Formular dient als Container für andere UI-Elemente (wie Beschriftungen, Eingabefelder, Kontrollkästchen und Schieberegler) und strukturiert diese in einem bestimmten Layout.

Ein einfaches Formular zum Anzeigen einer Adresse.

Ein einfaches Formular zur Anzeige von Kontaktdaten (z. B. Mail, Telefon, Handy).

Das Einfache Formular bietet eine benutzerfreundliche Möglichkeit, einfache Formulare zu erstellen. Ein Label innerhalb des Formulars zeigt eine neue Zeile an, und alle anderen Steuerelemente, die dem Label folgen, werden in derselben Zeile platziert.

Layouts

Layouts werden verwendet, um Anwendungsseiten zu erstellen und zu strukturieren.

Eine Kopfleiste für Ihren Anwendungsbildschirm, die einen Titel, einen Avatar und eine Schaltfläche zum Abmelden enthält.

Ein 3-spaltiges Basislayout für Ihre Anwendung. Enthält auch eine Kopf- und eine Fußzeile.

Ein Layout, das aus responsiven Blöcken unterschiedlicher Größe besteht. Sie können Bilder, Texte usw. in den Blöcken platzieren.

Ein Center-Layout zum Positionieren eines Elements in der Mitte eines Anwendungsbildschirms.

Die dynamische Seite ist eine Basisstruktur für Ihre Anwendung, die mit leeren Inhaltscontainern (Seitenkopf, Seiteninhalt) und integriertem responsivem Verhalten ausgestattet ist.

Ein Basislayout für die Anordnung von Inhalten in einer rasterähnlichen Struktur. Verwenden Sie diese Widget-Gruppe, um flexible, reaktionsfähige Anwendungslayouts zu erstellen.

Ein Basislayout, um Elemente in einer Reihe (horizontal) anzuzeigen.

Ein Container mit Bildlauffunktion, der für Text und andere Steuerelemente (z. B. Schaltflächen) verwendet werden kann. Das Panel layoutet die eingebetteten Steuerelemente nicht.

Ein Layout, das in drei Teile unterteilt ist: die Symbolleiste, das Seitenmenü und den Hauptinhalt.
Basierend auf OpenUI5’s ‘tnt. ToolPage” mit ‘tnt. SideNavigation”.

Die Widget-Gruppe Tabs stellt eine Sammlung von Tabs mit zugeordneten Inhalten dar, mit denen Sie Inhalte navigieren und strukturieren können, ohne den Bildschirm wechseln zu müssen.

Ein Layout, das in drei Spalten unterteilt ist, die durch einen kleinen Rand getrennt sind.

Eine Fußleiste für Ihre Anwendungsbildschirme. Enthält eine Schaltfläche zum Auslösen einer Aktion.

Eine Kopfleiste mit einem linken, mittleren und rechten Bereich, in dem Inhalte platziert werden können.

Ein Layout, das in zwei Spalten unterteilt ist, die durch einen kleinen Rand getrennt sind.

Ein Basislayout, um Elemente vertikal in einer Spalte anzuzeigen.

Listet

Enthält Tabellen, Listen und mehr. Enthält in der Regel homogene Daten, die in Zeilen angezeigt werden.

Eine einfache Liste, um mehrere Dateneinträge anzuzeigen.

Ein Element für die Suche nach Werten mit einer zusätzlichen Option zum Scannen eines Barcodes (nur auf mobilen Geräten).

Ein Eingabefeld, um nach einem bestimmten Wert zu suchen.

Tabelle zur Darstellung mehrerer Datensätze, mit Filter- und Sortierfunktionen – optimiert für responsive Designs auf mobilen Endgeräten.

Landkarten

Karten werden verwendet, um Daten auf einfache und intuitive Weise zu visualisieren. Eine Karte ist eine symbolische visuelle Darstellung von Gebieten, Regionen und Themen.

Eine für Mobilgeräte optimierte und interaktive Karte, die auf der JavaScript-Bibliothek Leaflet basiert.

Medien

Ein Element, um Bilder und andere Inhalte wie eine Diashow zu präsentieren.

Zeigt ein Bild an, das angeklickt werden kann. Das angezeigte Bild wird in einem Dialog geöffnet, wenn es angeklickt wird.

Verwenden Sie diese Widget-Gruppe, um Videos von bekannten Videoanbietern (z. B. YouTube) einzubetten.

Zauberer

Ermöglicht es dem Benutzer, ein einziges Ziel zu erreichen, das aus mehreren Teilaufgaben besteht. Führt den Benutzer Schritt für Schritt durch diese Teilaufgaben.

Stellt eine Unteraufgabe in der Widget-Gruppe “Assistent” dar.
Dieser Container enthält einen DatePicker, mit dem der Benutzer z. B. ein Termindatum oder sein Geburtsdatum auswählen kann.

Stellt eine Unteraufgabe in der Widget-Gruppe “Assistent” dar.
Dieser Container enthält ein Formular, in das der Benutzer z. B. seine Kontaktdaten eingeben kann.

Stellt eine Unteraufgabe in der Widget-Gruppe “Assistent” dar.
Dieser Container enthält mehrere Texte, die verwendet werden können, um dem Benutzer einige Informationen/Anweisungen zu geben.

Stellt eine Unteraufgabe in der Widget-Gruppe “Assistent” dar.
Dieser Container enthält eine Liste, um dem Benutzer einen Überblick über alle verfügbaren Optionen zur Auswahl zu geben.

Stellt eine Unteraufgabe in der Widget-Gruppe “Assistent” dar.
Dieser Container enthält RadioButtons, Kontrollkästchen und Dropdown-Menüs, die alle verwendet werden können, um dem Benutzer die Auswahl einer oder mehrerer Optionen zu ermöglichen.