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 zum Anzeigen einer Meldung, das in den Anwendungsbildschirm eingebettet ist.
Der Meldungscontainer kann auf bestimmte Zustände (Information, Erfolg, Warnung und Fehler) gesetzt und per 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 wird verwendet, um mehrere Textzeilen einzugeben.
Wenn es leer ist, kann es einen Platzhalter enthalten, der einer Eingabe ähnelt.
Sie können die Höhe und Breite des Textbereichs festlegen und auch ein bestimmtes Verhalten beim Umgang mit langen Texten festlegen.

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 den Endbenutzern auf konsistente Weise zur Verfügung zu stellen.

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.
Es zeigt das Profilbild, den Namen, die Kontakt- und Unternehmensinformationen eines Mitarbeiters an.

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

Eine Karte, auf der die Details eines Produkts angezeigt werden.
Die Karte enthält eine Kopfzeile mit einem Titel und einem Untertitel, einen Detailbereich mit einem Bild und Text sowie 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 Kreisdiagramm, 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 wird verwendet, um dem Benutzer Daten zu präsentieren und Benutzern die strukturierte Eingabe von Daten zu ermöglichen.
Das Formular fungiert als Container für andere UI-Elemente (z. B. Beschriftungen, Eingabefelder, Kontrollkästchen und Schieberegler) und strukturiert diese in ein bestimmtes 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, grundlegende Formulare zu erstellen.
Ein Label innerhalb des Formulars gibt eine neue Zeile an, und alle anderen Steuerelemente, die auf das 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. innerhalb der Blöcke 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 zum Anordnen von Inhalten in einer rasterartigen Struktur.
Verwenden Sie diese Widget-Gruppe, um flexible, reaktionsschnelle Anwendungslayouts zu erstellen.

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

Ein Container mit Scroll-Funktion, der für Text und andere Steuerelemente (z. B. Schaltflächen) verwendet werden kann.
Der Bereich erstellt kein Layout der eingebetteten Steuerelemente.

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ßzeile 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 beim Anklicken in einem Dialog geöffnet.

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

Zauberer

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

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.