{"id":48386,"date":"2024-07-24T11:22:11","date_gmt":"2024-07-24T09:22:11","guid":{"rendered":"https:\/\/community.simplifier.io\/doc\/widget-gruppen\/"},"modified":"2025-12-11T15:25:47","modified_gmt":"2025-12-11T13:25:47","slug":"widget-gruppen","status":"publish","type":"manual_documentation","link":"https:\/\/community.simplifier.io\/de\/doc\/widget-gruppen\/","title":{"rendered":"Widget-Gruppen"},"content":{"rendered":"

[vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column]

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
<\/svg><\/div> <\/div> <\/div><\/div><\/div>[\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column][vc_column_text]<\/p>\n

Grundlagen<\/h1>\n

Die am h\u00e4ufigsten verwendeten Elemente[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”48390″ title=”Button”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein einfacher Button mit Text und\/oder Symbol.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”48393″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50147″ title=”ButtonSegmented”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Button, der mehrere Sub-Buttons enth\u00e4lt, sodass der Benutzer eine von vielen Optionen ausw\u00e4hlen kann.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34738″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50143″ title=”CheckBox”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Einfache Checkbox mit einer Beschriftung.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34739″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50141″ title=”DatePicker”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein DatePicker, einschlie\u00dflich eines Popup-Kalenders zur Auswahl eines Datums.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34740″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50139″ title=”Dropdown”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Dropdown-Feld, das die Auswahl einer Option aus mehreren Optionen erm\u00f6glicht.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34741″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50134″ title=”Icon”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein einfaches Icon, das alle Icons anzeigen kann, die im OpenUI5 Icon Explorer verf\u00fcgbar sind.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34742″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50133″ title=”Image”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Zeigt ein Bild aus dem Image Explorer\/Assets-Bereich Ihrer Anwendung oder aus externen Quellen an.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34743″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50131″ title=”Eingabe”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein einfaches Eingabefeld, in dem der Benutzer Werte (Text, Zahlen) eingeben kann.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34744″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34808″ title=”Link”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Hyperlink-Steuerelement, mit dem zu anderen Apps oder Webseiten navigiert oder Aktionen ausgel\u00f6st werden.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34746″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34807″ title=”Message”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Element zur Anzeige einer Nachricht, die auf dem Anwendungsbildschirm eingebettet ist. Der Message-Container kann auf bestimmte Zust\u00e4nde (Information, Success, Warning und Error) eingestellt und \u00fcber eine Schaltfl\u00e4che geschlossen werden.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34748″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50122″ title=”RadioButton”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Der RadioButton ist ein Steuerelement, das einer Checkbox \u00e4hnelt, aber es erm\u00f6glicht Ihnen, nur eine der vordefinierten Optionen auszuw\u00e4hlen.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34749″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50117″ title=”Switch”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Switch ist ein Steuerelement, das einen bin\u00e4ren Zustand darstellt, wie z. B. ein\/aus oder wahr\/falsch.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34750″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50113″ title=”Text”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Das Text-Steuerelement kann verwendet werden, um l\u00e4ngere Textabschnitte, die einen Textumbruch ben\u00f6tigen, in Ihre App einzubetten[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34751″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50112″ title=”TextArea”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Der Textbereich wird verwendet, um mehrere Textzeilen einzugeben. Wenn er leer ist, kann er einen Platzhalter \u00e4hnlich einer Eingabe enthalten. Sie k\u00f6nnen die H\u00f6he und Breite des Textbereichs definieren und auch ein bestimmtes Verhalten bei der Verarbeitung langer Texte festlegen.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34752″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50110″ title=”Title”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein einfacher, gro\u00dfformatiger Text mit expliziter Header-\/Titel-Semantik.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34753″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column][vc_column_text]<\/p>\n

Cards<\/h1>\n

Eine Card repr\u00e4sentiert eine App oder Seite. Sie kann verwendet werden, um die App zu starten oder zum Seiteninhalt zu navigieren. Integrationskarten sind eine M\u00f6glichkeit, Anwendungs-Content den Endbenutzern auf konsistente Weise zur Verf\u00fcgung zu stellen.[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34756″ title=”CardWithImage”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Eine Card, die ein Bild im oberen Bereich und einen Text und eine Fu\u00dfzeile im unteren Bereich anzeigt.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34757″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34759″ title=”ContactCard”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Eine Card, die wie eine Visitenkarte aufgebaut ist. Sie zeigt das Profilbild, den Namen, die Kontakt- und die Firmeninformationen eines Mitarbeiters an.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34760″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50167″ title=”FeedbackCard”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Diese Widget-Gruppe ist wie ein Kommentarbereich aufgebaut. Im oberen Teil k\u00f6nnen Sie Ihren Kommentar in das Feed Input-Widget einf\u00fcgen. Im unteren Teil zeigt ein Card-Widget vorhandene Kommentare an.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”50168″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34806″ title=”ProductCard”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Eine Card, die die Details eines Produkts anzeigt. Die Card enth\u00e4lt einen Header mit einem Titel und Untertitel, einen Detailbereich mit einem Bild und Text sowie eine Fu\u00dfzeile mit einer Aktionsschaltfl\u00e4che.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34761″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34720″ title=”Tile”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Container-Element, das Header, Subheader und einen anpassbaren Hauptbereich in einem Kachelformat anzeigt.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34762″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column][vc_column_text]<\/p>\n

Charts<\/h1>\n

Verschiedene Arten von Charts. Charts enthalten und zeigen gro\u00dfe Mengen von Werten auf interaktiv reichhaltige und responsive Weise an.[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34764″ title=”BarChart”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Balkendiagramm, um Ihre Daten in visueller Form darzustellen. Die Daten werden als vertikale Balken dargestellt.
\nBasiert auf der JavaScript-Bibliothek ChartJS (Version 3.9.1).[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34763″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34765″ title=”DoughnutChart”][\/vc_column][vc_column width=”1\/3″][vc_column_text]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\u00fccke eines Donuts aus.
\nBasiert auf der JavaScript-Bibliothek ChartJS (Version 3.9.1).[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34766″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50144″ title=”LineChart”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Liniendiagramm, um Ihre Daten in visueller Form darzustellen. Die Daten werden als Datenpunkte auf einer Linie dargestellt.
\nBasiert auf der JavaScript-Bibliothek ChartJS (Version 3.9.1).[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34767″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50171″ title=”PieChart”][\/vc_column][vc_column width=”1\/3″][vc_column_text]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\u00fccke eines Kuchens aus.
\nBasiert auf der JavaScript-Bibliothek ChartJS (Version 3.9.1).[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”50172″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”48392″ title=”RadarChart”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Radar-Diagramm, um Ihre Daten in visueller Form darzustellen. Die Daten werden als Datenpunkte auf Linien um einen Mittelpunkt herum dargestellt.
\nBasiert auf der JavaScript-Bibliothek ChartJS (Version 3.9.1).[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”48391″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column][vc_column_text]<\/p>\n

Dialogs<\/h1>\n

[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50173″ title=”DateTimePicker”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Eine Datums- und Uhrzeitauswahl, einschlie\u00dflich eines Popup-Kalenders zur Auswahl eines Datums und einer Uhrzeit.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”50174″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50140″ title=”Dialog”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Popup-Dialog zur Anzeige von Nachrichten oder anderem Content, wie z. B. Formularen, in einer Bildschirmeinblendung.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34768″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50123″ title=”PopupMessage”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein einfacher Dialog mit einem Titel, einer Textnachricht und einer OK-Schaltfl\u00e4che.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34769″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50177″ title=”PopupToast”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein kleines, nicht st\u00f6rendes Popup f\u00fcr Nachrichten, das nach einigen Sekunden automatisch verschwindet[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34770″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column][vc_column_text]<\/p>\n

Forms<\/h1>\n

Ein Formular wird verwendet, um Daten dem Benutzer zu pr\u00e4sentieren und Benutzern zu erm\u00f6glichen, Daten auf strukturierte Weise einzugeben.
\nDas Formular dient als Container f\u00fcr andere UI-Elemente (wie z. B. Beschriftungen, Eingabefelder, Checkboxen und Schieberegler), w\u00e4hrend diese in einem bestimmten Layout strukturiert werden.[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50137″ title=”FormAddress”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein einfaches Formular zur Anzeige einer Adresse.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34771″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50136″ title=”FormContact”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein einfaches Formular zur Anzeige von Kontaktdaten (z. B. E-Mail, Telefon, Mobiltelefon).[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34772″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50119″ title=”SimpleForm”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Das Simple Form bietet eine einfache M\u00f6glichkeit, 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.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34773″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column][vc_column_text]<\/p>\n

Layouts<\/h1>\n

Layouts werden verwendet, um Anwendungsseiten zu erstellen und zu strukturieren.[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34712″ title=”AppHeader”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Eine Kopfzeile f\u00fcr Ihren Anwendungsbildschirm, die einen Titel, einen Avatar und eine Abmeldeschaltfl\u00e4che enth\u00e4lt.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34774″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34713″ title=”BaseLayout”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein 3-spaltiges Basis-Layout f\u00fcr Ihre Anwendung. Enth\u00e4lt au\u00dferdem eine Kopf- und eine Fu\u00dfzeile.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”48389″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34714″ title=”BlockLayout”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Layout, das aus responsiven Bl\u00f6cken unterschiedlicher Gr\u00f6\u00dfe besteht. Sie k\u00f6nnen Bilder, Texte usw. in die Bl\u00f6cke platzieren.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34776″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34715″ title=”ContainerCenter”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Center-Layout zur Positionierung eines Elements in der Mitte eines Anwendungsbildschirms.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34777″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34716″ title=”DynamicPage”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Die Dynamic Page ist eine Basisstruktur f\u00fcr Ihre Anwendung, die mit leeren Content-Containern (Seitenkopf, Seiteninhalt) und integriertem responsivem Verhalten ausgestattet ist.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34778″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34717″ title=”GridLayout”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Basis-Layout zum Anordnen von Content in einer gitterartigen Struktur. Verwenden Sie diese Widget-Gruppe, um flexible, responsive Anwendungslayouts zu erstellen.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34779″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34718″ title=”HorizontalLayout”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Basis-Layout zur Anzeige von Elementen in einer Zeile (horizontal).[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34780″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50124″ title=”Panel”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Container mit Scroll-Funktionalit\u00e4t, der f\u00fcr Text und andere Steuerelemente (z. B. Buttons) verwendet werden kann. Das Panel layoutet die eingebetteten Steuerelemente nicht.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34781″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34719″ title=”SideMenu”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Layout, das in drei Teile unterteilt ist: die Toolbar, das Seitenmen\u00fc und der Main Content.
\nBasierend auf der ‘tnt.ToolPage’ von OpenUI5 mit ‘tnt.SideNavigation’.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34782″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50114″ title=”Tabs”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Die Widget-Gruppe Tabs stellt eine Sammlung von Tabs mit zugeh\u00f6rigem Content zum Navigieren und Strukturieren von Content dar, ohne Bildschirme zu wechseln.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34783″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34722″ title=”ThreeColumnLayout”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Layout, das in drei Spalten unterteilt ist, die durch einen kleinen Abstand getrennt sind.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34784″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50138″ title=”ToolbarFooter”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Eine Fu\u00dfzeile f\u00fcr Ihre Anwendungsbildschirme. Enth\u00e4lt eine Schaltfl\u00e4che zum Ausl\u00f6sen einer Aktion.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34786″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50150″ title=”ToolbarHeader”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Eine Kopfzeile mit einem linken, mittleren und rechten Bereich, in dem Content platziert werden kann.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34785″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34723″ title=”TwoColumnLayout”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Layout, das in zwei Spalten unterteilt ist, die durch einen kleinen Abstand getrennt sind.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34787″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34724″ title=”VerticalLayout”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Basis-Layout zur vertikalen Anzeige von Elementen in einer Spalte.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34788″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column][vc_column_text]<\/p>\n

Lists<\/h1>\n

Enth\u00e4lt Tabellen, Listen und mehr. Enth\u00e4lt in der Regel homogene Daten, die in Zeilen angezeigt werden.[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50129″ title=”Liste”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Eine einfache Liste zur Anzeige mehrerer Dateneintr\u00e4ge.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34789″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50121″ title=”ScanAndSearchBar”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Element zum Suchen von Werten, mit einer zus\u00e4tzlichen Option zum Scannen eines Barcodes (nur auf Mobilger\u00e4ten).[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34790″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50120″ title=”SearchField”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Eingabefeld zur Suche nach einem bestimmten Wert.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34791″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50116″ title=”Tabelle”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Tabelle zur Anzeige mehrerer Datens\u00e4tze, mit Filter- und Sortierfunktionen – optimiert f\u00fcr responsive Designs auf Mobilger\u00e4ten.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34792″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column][vc_column_text]<\/p>\n

Maps<\/h1>\n

Karten werden verwendet, um Daten auf einfache und intuitive Weise zu visualisieren. Eine Karte ist eine symbolische visuelle Darstellung von Gebieten, Regionen und Themen.[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50175″ title=”Map”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Eine mobilfreundliche und interaktive Karte, die auf der JavaScript-Bibliothek Leaflet basiert.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”50176″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column][vc_column_text]<\/p>\n

Medien<\/h1>\n

[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50146″ title=”Carousel”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Ein Element zur Pr\u00e4sentation von Bildern und anderem Content wie eine Diashow.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34793″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”50132″ title=”ImageLightBox”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Zeigt ein Bild an, das anklickbar ist. Das angezeigte Bild wird bei Anklicken in einem Dialog ge\u00f6ffnet.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34794″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34726″ title=”Video”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Verwenden Sie diese Widget-Gruppe, um Videos von bekannten Videoanbietern (z. B. YouTube) einzubetten.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34795″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column][vc_column_text]<\/p>\n

Wizard<\/h1>\n

[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34801″ title=”Wizard”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Erm\u00f6glicht es Benutzern, ein einzelnes Ziel zu erreichen, das aus mehreren Teilaufgaben besteht. F\u00fchrt den Benutzer Schritt f\u00fcr Schritt durch diese Teilaufgaben.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”48388″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34730″ title=”WizardStepDatePicker”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Stellt eine Teilaufgabe in der Widget-Gruppe Wizard dar.
\nDieser Container enth\u00e4lt eine DatePicker, so dass der Benutzer beispielsweise einen Termin oder sein Geburtsdatum ausw\u00e4hlen kann.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34798″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34732″ title=”WizardStepForm”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Stellt eine Teilaufgabe in der Widget-Gruppe Wizard dar.
\nDieser Container enth\u00e4lt ein Formular, so dass der Benutzer beispielsweise seine Kontaktdaten eingeben kann.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34799″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34800″ title=”WizardStepInformation”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Stellt eine Teilaufgabe in der Widget-Gruppe Wizard dar.
\nDieser Container enth\u00e4lt mehrere Texte, die verwendet werden k\u00f6nnen, um dem Benutzer einige Informationen\/Anweisungen zu geben.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34803″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34734″ title=”WizardStepList”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Stellt eine Teilaufgabe in der Widget-Gruppe Wizard dar.
\nDieser Container enth\u00e4lt eine Liste, um dem Benutzer einen \u00dcberblick \u00fcber alle verf\u00fcgbaren Optionen zur Auswahl zu geben.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34804″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row][vc_row row_content_display=”in_grid” row_content_display_align=”left” row_type=”row” stretch_row_type=”yes”][vc_column width=”1\/3″][vc_single_image image=”34735″ title=”WizardStepOptions”][\/vc_column][vc_column width=”1\/3″][vc_column_text]Stellt eine Teilaufgabe in der Widget-Gruppe Wizard dar.
\nDieser Container enth\u00e4lt RadioButtons, Checkboxes und Dropdown-Men\u00fcs, die alle verwendet werden k\u00f6nnen, um den Benutzer eine\/mehrere Optionen ausw\u00e4hlen zu lassen.[\/vc_column_text][\/vc_column][vc_column width=”1\/3″][vc_single_image image=”34805″ img_size=”medium” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Entdecken Sie vielseitige UI-Elemente von benutzerfreundlichen Buttons, CheckBoxes und DatePickers bis hin zu responsiven Cards und Charts. Erstellen Sie strukturierte Formulare, wenden Sie intuitive Layouts an, generieren Sie informative Listen und integrieren Sie interaktive Karten. Betten Sie Multimedia-Content ein und f\u00fchren Sie Benutzer mit Wizard-Schritten. <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":50099,"menu_order":114,"template":"","format":"standard","class_list":["post-48386","manual_documentation","type-manual_documentation","status-publish","format-standard","hentry","manualdocumentationcategory-aktueller-release","manual_doc_tag-grundlegend-105"],"yoast_head":"\nWidget-Gruppen - Simplifier Makers Club<\/title>\n<meta name=\"description\" content=\"Entdecken Sie vielseitige UI-Elemente von benutzerfreundlichen Buttons, CheckBoxes und DatePickers bis hin zu responsiven Cards und Charts. Erstellen Sie strukturierte Formulare, wenden Sie intuitive Layouts an, generieren Sie informative Listen und integrieren Sie interaktive Karten. Betten Sie Multimedia-Content ein und f\u00fchren Sie Benutzer mit Wizard-Schritten.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/community.simplifier.io\/de\/doc\/widget-gruppen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Widget-Gruppen - Simplifier Makers Club\" \/>\n<meta property=\"og:description\" content=\"Entdecken Sie vielseitige UI-Elemente von benutzerfreundlichen Buttons, CheckBoxes und DatePickers bis hin zu responsiven Cards und Charts. Erstellen Sie strukturierte Formulare, wenden Sie intuitive Layouts an, generieren Sie informative Listen und integrieren Sie interaktive Karten. Betten Sie Multimedia-Content ein und f\u00fchren Sie Benutzer mit Wizard-Schritten.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/community.simplifier.io\/de\/doc\/widget-gruppen\/\" \/>\n<meta property=\"og:site_name\" content=\"Simplifier Makers Club\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/simplifier.io\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-11T13:25:47+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@simplifier_io\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"28\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/widget-gruppen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/widget-gruppen\\\/\"},\"author\":{\"name\":\"Chris Bouveret\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#\\\/schema\\\/person\\\/4e80618add686271435728dd07f9e595\"},\"headline\":\"Widget-Gruppen\",\"datePublished\":\"2024-07-24T09:22:11+00:00\",\"dateModified\":\"2025-12-11T13:25:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/widget-gruppen\\\/\"},\"wordCount\":5679,\"publisher\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#organization\"},\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/widget-gruppen\\\/\",\"url\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/widget-gruppen\\\/\",\"name\":\"Widget-Gruppen - Simplifier Makers Club\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#website\"},\"datePublished\":\"2024-07-24T09:22:11+00:00\",\"dateModified\":\"2025-12-11T13:25:47+00:00\",\"description\":\"Entdecken Sie vielseitige UI-Elemente von benutzerfreundlichen Buttons, CheckBoxes und DatePickers bis hin zu responsiven Cards und Charts. Erstellen Sie strukturierte Formulare, wenden Sie intuitive Layouts an, generieren Sie informative Listen und integrieren Sie interaktive Karten. Betten Sie Multimedia-Content ein und f\u00fchren Sie Benutzer mit Wizard-Schritten.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/widget-gruppen\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/widget-gruppen\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/widget-gruppen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"App Builder Anleitung\",\"item\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/app-builder-leitfaden\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Design\",\"item\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/entwurf\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Widget-Gruppen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/\",\"name\":\"Simplifier Makers Club\",\"description\":\"Where Ideas become Digital Reality - Simplifier Documentation, Knowledgebase, Forum, Courses and Marketplace\",\"publisher\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#organization\",\"name\":\"Simplifier AG\",\"url\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/simplifier-logo.png\",\"contentUrl\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/simplifier-logo.png\",\"width\":651,\"height\":150,\"caption\":\"Simplifier AG\"},\"image\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/simplifier.io\\\/\",\"https:\\\/\\\/x.com\\\/simplifier_io\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/simplifier-ag\\\/\",\"https:\\\/\\\/www.youtube.com\\\/c\\\/Simplifier\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#\\\/schema\\\/person\\\/4e80618add686271435728dd07f9e595\",\"name\":\"Chris Bouveret\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/avatars\\\/1\\\/1713192263-bpfull.png\",\"url\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/avatars\\\/1\\\/1713192263-bpfull.png\",\"contentUrl\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/avatars\\\/1\\\/1713192263-bpfull.png\",\"caption\":\"Chris Bouveret\"},\"description\":\"Hi, I\u2019m Chris, Co-Founder and CIO of Simplifier. I\u2019m passionate about revolutionizing how businesses build and deploy applications using low-code technology. I focus on ensuring our platform is secure, robust, and constantly evolving to meet your needs. At Simplifier, we're committed to empowering you with the tools and support necessary to streamline your processes and drive innovation within your organization.\",\"sameAs\":[\"https:\\\/\\\/www.simplifier.io\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/christopher-bouveret\",\"https:\\\/\\\/x.com\\\/chrisbouveret\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Widget-Gruppen - Simplifier Makers Club","description":"Entdecken Sie vielseitige UI-Elemente von benutzerfreundlichen Buttons, CheckBoxes und DatePickers bis hin zu responsiven Cards und Charts. Erstellen Sie strukturierte Formulare, wenden Sie intuitive Layouts an, generieren Sie informative Listen und integrieren Sie interaktive Karten. Betten Sie Multimedia-Content ein und f\u00fchren Sie Benutzer mit Wizard-Schritten.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/community.simplifier.io\/de\/doc\/widget-gruppen\/","og_locale":"de_DE","og_type":"article","og_title":"Widget-Gruppen - Simplifier Makers Club","og_description":"Entdecken Sie vielseitige UI-Elemente von benutzerfreundlichen Buttons, CheckBoxes und DatePickers bis hin zu responsiven Cards und Charts. Erstellen Sie strukturierte Formulare, wenden Sie intuitive Layouts an, generieren Sie informative Listen und integrieren Sie interaktive Karten. Betten Sie Multimedia-Content ein und f\u00fchren Sie Benutzer mit Wizard-Schritten.","og_url":"https:\/\/community.simplifier.io\/de\/doc\/widget-gruppen\/","og_site_name":"Simplifier Makers Club","article_publisher":"https:\/\/www.facebook.com\/simplifier.io\/","article_modified_time":"2025-12-11T13:25:47+00:00","twitter_card":"summary_large_image","twitter_site":"@simplifier_io","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"28\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/community.simplifier.io\/de\/doc\/widget-gruppen\/#article","isPartOf":{"@id":"https:\/\/community.simplifier.io\/de\/doc\/widget-gruppen\/"},"author":{"name":"Chris Bouveret","@id":"https:\/\/community.simplifier.io\/de\/#\/schema\/person\/4e80618add686271435728dd07f9e595"},"headline":"Widget-Gruppen","datePublished":"2024-07-24T09:22:11+00:00","dateModified":"2025-12-11T13:25:47+00:00","mainEntityOfPage":{"@id":"https:\/\/community.simplifier.io\/de\/doc\/widget-gruppen\/"},"wordCount":5679,"publisher":{"@id":"https:\/\/community.simplifier.io\/de\/#organization"},"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/community.simplifier.io\/de\/doc\/widget-gruppen\/","url":"https:\/\/community.simplifier.io\/de\/doc\/widget-gruppen\/","name":"Widget-Gruppen - Simplifier Makers Club","isPartOf":{"@id":"https:\/\/community.simplifier.io\/de\/#website"},"datePublished":"2024-07-24T09:22:11+00:00","dateModified":"2025-12-11T13:25:47+00:00","description":"Entdecken Sie vielseitige UI-Elemente von benutzerfreundlichen Buttons, CheckBoxes und DatePickers bis hin zu responsiven Cards und Charts. Erstellen Sie strukturierte Formulare, wenden Sie intuitive Layouts an, generieren Sie informative Listen und integrieren Sie interaktive Karten. Betten Sie Multimedia-Content ein und f\u00fchren Sie Benutzer mit Wizard-Schritten.","breadcrumb":{"@id":"https:\/\/community.simplifier.io\/de\/doc\/widget-gruppen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/community.simplifier.io\/de\/doc\/widget-gruppen\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/community.simplifier.io\/de\/doc\/widget-gruppen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/community.simplifier.io\/de\/"},{"@type":"ListItem","position":2,"name":"App Builder Anleitung","item":"https:\/\/community.simplifier.io\/de\/doc\/app-builder-leitfaden\/"},{"@type":"ListItem","position":3,"name":"Design","item":"https:\/\/community.simplifier.io\/de\/doc\/entwurf\/"},{"@type":"ListItem","position":4,"name":"Widget-Gruppen"}]},{"@type":"WebSite","@id":"https:\/\/community.simplifier.io\/de\/#website","url":"https:\/\/community.simplifier.io\/de\/","name":"Simplifier Makers Club","description":"Where Ideas become Digital Reality - Simplifier Documentation, Knowledgebase, Forum, Courses and Marketplace","publisher":{"@id":"https:\/\/community.simplifier.io\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/community.simplifier.io\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/community.simplifier.io\/de\/#organization","name":"Simplifier AG","url":"https:\/\/community.simplifier.io\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/community.simplifier.io\/de\/#\/schema\/logo\/image\/","url":"https:\/\/community.simplifier.io\/wp-content\/uploads\/2024\/09\/simplifier-logo.png","contentUrl":"https:\/\/community.simplifier.io\/wp-content\/uploads\/2024\/09\/simplifier-logo.png","width":651,"height":150,"caption":"Simplifier AG"},"image":{"@id":"https:\/\/community.simplifier.io\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/simplifier.io\/","https:\/\/x.com\/simplifier_io","https:\/\/www.linkedin.com\/company\/simplifier-ag\/","https:\/\/www.youtube.com\/c\/Simplifier\/"]},{"@type":"Person","@id":"https:\/\/community.simplifier.io\/de\/#\/schema\/person\/4e80618add686271435728dd07f9e595","name":"Chris Bouveret","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/community.simplifier.io\/wp-content\/uploads\/avatars\/1\/1713192263-bpfull.png","url":"https:\/\/community.simplifier.io\/wp-content\/uploads\/avatars\/1\/1713192263-bpfull.png","contentUrl":"https:\/\/community.simplifier.io\/wp-content\/uploads\/avatars\/1\/1713192263-bpfull.png","caption":"Chris Bouveret"},"description":"Hi, I\u2019m Chris, Co-Founder and CIO of Simplifier. I\u2019m passionate about revolutionizing how businesses build and deploy applications using low-code technology. I focus on ensuring our platform is secure, robust, and constantly evolving to meet your needs. At Simplifier, we're committed to empowering you with the tools and support necessary to streamline your processes and drive innovation within your organization.","sameAs":["https:\/\/www.simplifier.io","https:\/\/www.linkedin.com\/in\/christopher-bouveret","https:\/\/x.com\/chrisbouveret"]}]}},"_links":{"self":[{"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/docs\/48386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/types\/manual_documentation"}],"author":[{"embeddable":true,"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":5,"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/docs\/48386\/revisions"}],"predecessor-version":[{"id":73897,"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/docs\/48386\/revisions\/73897"}],"up":[{"embeddable":true,"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/docs\/50099"}],"wp:attachment":[{"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/media?parent=48386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}