Grundlagen

Die am häufigsten verwendeten Elemente

Ein einfacher Button mit Text und/oder Symbol.

Ein Button, der mehrere Sub-Buttons enthält, sodass der Benutzer eine von vielen Optionen auswählen kann.

Einfache Checkbox mit einer Beschriftung.

Ein DatePicker, einschließlich eines Popup-Kalenders zur Auswahl eines Datums.

Ein Dropdown-Feld, das die Auswahl einer Option aus mehreren Optionen ermöglicht.

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

Zeigt ein Bild aus dem Image Explorer/Assets-Bereich Ihrer Anwendung oder aus externen Quellen an.

Ein einfaches Eingabefeld, in dem der Benutzer Werte (Text, Zahlen) eingeben kann.

Ein Hyperlink-Steuerelement, mit dem zu anderen Apps oder Webseiten navigiert oder Aktionen ausgelöst werden.

Ein Element zur Anzeige einer Nachricht, die auf dem Anwendungsbildschirm eingebettet ist. Der Message-Container kann auf bestimmte Zustände (Information, Success, Warning und Error) eingestellt und über eine Schaltfläche geschlossen werden.

Der RadioButton ist ein Steuerelement, das einer Checkbox ähnelt, aber es ermöglicht Ihnen, nur eine der vordefinierten Optionen auszuwählen.

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

Das Text-Steuerelement kann verwendet werden, um längere Textabschnitte, die einen Textumbruch benötigen, in Ihre App einzubetten

Der Textbereich wird verwendet, um mehrere Textzeilen einzugeben. Wenn er leer ist, kann er einen Platzhalter ähnlich einer Eingabe enthalten. Sie können die Höhe und Breite des Textbereichs definieren und auch ein bestimmtes Verhalten bei der Verarbeitung langer Texte festlegen.

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

Cards

Eine Card repräsentiert eine App oder Seite. Sie kann verwendet werden, um die App zu starten oder zum Seiteninhalt zu navigieren. Integrationskarten sind eine Möglichkeit, Anwendungs-Content den Endbenutzern auf konsistente Weise zur Verfügung zu stellen.

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

Eine Card, die wie eine Visitenkarte aufgebaut ist. Sie zeigt das Profilbild, den Namen, die Kontakt- und die Firmeninformationen eines Mitarbeiters an.

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 Card-Widget vorhandene Kommentare an.

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

Container-Element, das Header, Subheader und einen anpassbaren Hauptbereich in einem Kachelformat anzeigt.

Charts

Verschiedene Arten von Charts. Charts enthalten und zeigen große Mengen von Werten auf interaktiv reichhaltige und responsive Weise an.

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

Ein Donut-Diagramm, 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 Donut-Diagramm sehen die Datensegmente wie die Stücke eines Donuts aus.
Basiert 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.
Basiert 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 Kuchens aus.
Basiert auf der JavaScript-Bibliothek ChartJS (Version 3.9.1).

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

Dialogs

Eine Datums- und Uhrzeitauswahl, einschließlich eines Popup-Kalenders zur Auswahl eines Datums und einer Uhrzeit.

Ein Popup-Dialog zur Anzeige von Nachrichten oder anderem Content, wie z. B. Formularen, in einer Bildschirmeinblendung.

Ein einfacher Dialog mit einem Titel, einer Textnachricht und einer OK-Schaltfläche.

Ein kleines, nicht störendes Popup für Nachrichten, das nach einigen Sekunden automatisch verschwindet

Forms

Ein Formular wird verwendet, um Daten dem Benutzer zu präsentieren und Benutzern zu ermöglichen, Daten auf strukturierte Weise einzugeben.
Das Formular dient als Container für andere UI-Elemente (wie z. B. Beschriftungen, Eingabefelder, Checkboxen und Schieberegler), während diese in einem bestimmten Layout strukturiert werden.

Ein einfaches Formular zur Anzeige einer Adresse.

Ein einfaches Formular zur Anzeige von Kontaktdaten (z. B. E-Mail, Telefon, Mobiltelefon).

Das Simple Form bietet eine einfache Möglichkeit, grundlegende Formulare zu erstellen. Eine Beschriftung innerhalb des Formulars kennzeichnet eine neue Zeile, und alle anderen Steuerelemente, die auf die Beschriftung folgen, werden in derselben Zeile platziert.

Layouts

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

Eine Kopfzeile für Ihren Anwendungsbildschirm, die einen Titel, einen Avatar und eine Abmeldeschaltfläche enthält.

Ein 3-spaltiges Basis-Layout für Ihre Anwendung. Enthält außerdem eine Kopf- und eine Fußzeile.

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

Ein Center-Layout zur Positionierung eines Elements in der Mitte eines Anwendungsbildschirms.

Die Dynamic Page ist eine Basisstruktur für Ihre Anwendung, die mit leeren Content-Containern (Seitenkopf, Seiteninhalt) und integriertem responsivem Verhalten ausgestattet ist.

Ein Basis-Layout zum Anordnen von Content in einer gitterartigen Struktur. Verwenden Sie diese Widget-Gruppe, um flexible, responsive Anwendungslayouts zu erstellen.

Ein Basis-Layout zur Anzeige von Elementen in einer Zeile (horizontal).

Ein Container mit Scroll-Funktionalität, der für Text und andere Steuerelemente (z. B. Buttons) verwendet werden kann. Das Panel layoutet die eingebetteten Steuerelemente nicht.

Ein Layout, das in drei Teile unterteilt ist: die Toolbar, das Seitenmenü und der Main Content.
Basierend auf der ‘tnt.ToolPage’ von OpenUI5 mit ‘tnt.SideNavigation’.

Die Widget-Gruppe Tabs stellt eine Sammlung von Tabs mit zugehörigem Content zum Navigieren und Strukturieren von Content dar, ohne Bildschirme zu wechseln.

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

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

Eine Kopfzeile mit einem linken, mittleren und rechten Bereich, in dem Content platziert werden kann.

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

Ein Basis-Layout zur vertikalen Anzeige von Elementen in einer Spalte.

Lists

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

Eine einfache Liste zur Anzeige mehrerer Dateneinträge.

Ein Element zum Suchen von Werten, mit einer zusätzlichen Option zum Scannen eines Barcodes (nur auf Mobilgeräten).

Ein Eingabefeld zur Suche nach einem bestimmten Wert.

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

Maps

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 mobilfreundliche und interaktive Karte, die auf der JavaScript-Bibliothek Leaflet basiert.

Medien

Ein Element zur Präsentation von Bildern und anderem Content wie eine Diashow.

Zeigt ein Bild an, das anklickbar ist. Das angezeigte Bild wird bei Anklicken in einem Dialog geöffnet.

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

Wizard

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

Stellt eine Teilaufgabe in der Widget-Gruppe Wizard dar.
Dieser Container enthält eine DatePicker, so dass der Benutzer beispielsweise einen Termin oder sein Geburtsdatum auswählen kann.

Stellt eine Teilaufgabe in der Widget-Gruppe Wizard dar.
Dieser Container enthält ein Formular, so dass der Benutzer beispielsweise seine Kontaktdaten eingeben kann.

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

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

Stellt eine Teilaufgabe in der Widget-Gruppe Wizard dar.
Dieser Container enthält RadioButtons, Checkboxes und Dropdown-Menüs, die alle verwendet werden können, um den Benutzer eine/mehrere Optionen auswählen zu lassen.