{"id":49935,"date":"2024-07-24T11:46:07","date_gmt":"2024-07-24T09:46:07","guid":{"rendered":"https:\/\/community.simplifier.io\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/design-bildschirm\/"},"modified":"2025-12-11T15:40:18","modified_gmt":"2025-12-11T13:40:18","slug":"design-bildschirm","status":"publish","type":"manual_documentation","link":"https:\/\/community.simplifier.io\/de\/doc\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/","title":{"rendered":"Design-Bildschirm"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row row_content_display=&#8221;in_grid&#8221; row_content_display_align=&#8221;left&#8221; row_type=&#8221;row&#8221; stretch_row_type=&#8221;yes&#8221;][vc_column][vc_column_text]<\/p>\n<h3>Widgets zum Bildschirm hinzuf\u00fcgen<\/h3>\n<p>Um Ihren Bildschirm mit UI-Elementen wie Textfeldern, Diagrammen oder Aktionsschaltfl\u00e4chen zu f\u00fcllen, verwenden Sie das Widget oder das Widgetgruppen-Panel auf der linken Seite. W\u00e4hlen Sie zuerst die OpenUI5-Version aus. <\/p>\n<p>\u00dcber den Filter werden nur die kompatiblen Widgets angezeigt, die mit der gespeicherten UI5-Version der Anwendung \u00fcbereinstimmen.<\/p>\n<p>Suchen Sie nach einem bestimmten Widget oder einer Widgetgruppe anhand des Namens oder durchsuchen Sie einfach die Liste und f\u00fcgen Sie sie dann \u00fcber das Pluszeichen hinzu oder ziehen Sie sie per Drag  Drop in die Struktur oder die Vorschau. Das Widget oder die Widgetgruppe wird im Content-Bereich des ausgew\u00e4hlten Bildschirms angezeigt. <\/p>\n<p><iframe loading=\"lazy\" title=\"Add Widgets to Screen\" src=\"https:\/\/player.vimeo.com\/video\/604663386?dnt=1&amp;app_id=122963\" width=\"700\" height=\"394\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe><\/p>\n<h3>Widgets in der richtigen Reihenfolge sortieren<\/h3>\n<p>Verwenden Sie die <strong>Pfeiltasten<\/strong>, um die Widgets in der Bildschirm-Content-Struktur in einer Hierarchie zu strukturieren. Alternativ k\u00f6nnen Sie <strong>WASD<\/strong> auf Ihrer Tastatur verwenden oder die Widgets oder Widgetgruppen per Drag  Drop verschieben. <\/p>\n<p><iframe loading=\"lazy\" title=\"Sort Widgets\" src=\"https:\/\/player.vimeo.com\/video\/604665624?dnt=1&amp;app_id=122963\" width=\"700\" height=\"394\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe><\/p>\n<p>Sie k\u00f6nnen auch die <strong>Pfeiltasten<\/strong> verwenden, um die Widgets in der Bildschirm-Content-Struktur in einer Hierarchie zu strukturieren, oder alternativ <strong>WASD<\/strong> auf Ihrer Tastatur verwenden (das Widget muss ausgew\u00e4hlt sein).<\/p>\n<table>\n<tbody>\n<tr>\n<td style=\"width: 85px;\"><strong>W<\/strong> oder<a href=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/arrow-up.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-13114 alignright\" style=\"margin: 0px;\" src=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/arrow-up.png\" alt=\"\" width=\"21\" height=\"24\"><\/a><\/td>\n<td>verschiebt das Widget nach oben<\/td>\n<\/tr>\n<tr>\n<td><strong>A <\/strong>oder<a href=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/arrow-left.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-13115 alignright\" style=\"margin: 0px;\" src=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/arrow-left.png\" alt=\"\" width=\"22\" height=\"19\"><\/a><\/td>\n<td>hebt die Verschachtelung des Widgets auf<\/td>\n<\/tr>\n<tr>\n<td><strong>S <\/strong>oder<a href=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/arrow-down.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-13116 alignright\" style=\"margin: 0px;\" src=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/arrow-down.png\" alt=\"\" width=\"20\" height=\"22\"><\/a><\/td>\n<td>verschiebt das Widget nach unten<\/td>\n<\/tr>\n<tr>\n<td><strong>D<\/strong> oder<a href=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/arrow-right.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-13117 alignright\" style=\"margin: 0px;\" src=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/arrow-right.png\" alt=\"\" width=\"24\" height=\"20\"><\/a><\/td>\n<td>verschachtelt das Widget unter dem dar\u00fcber liegenden (falls m\u00f6glich)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Mit den <strong>Pfeiltasten auf Ihrer Tastatur<\/strong> k\u00f6nnen Sie wie folgt durch die Bildschirm-Content-Struktur navigieren:<\/p>\n<table style=\"height: 110px;\" width=\"100%\">\n<tbody>\n<tr>\n<td><strong>Nach oben \u2191<\/strong><\/td>\n<td>Navigiert nach oben<\/td>\n<\/tr>\n<tr>\n<td><strong>Nach unten \u2193<\/strong><\/td>\n<td>Navigiert nach unten<\/td>\n<\/tr>\n<tr>\n<td><strong>Rechts \u2192<\/strong><\/td>\n<td>\u00d6ffnet das aktuell ausgew\u00e4hlte Strukturelement (falls m\u00f6glich)<\/td>\n<\/tr>\n<tr>\n<td><strong>Links \u2190<\/strong><\/td>\n<td>Schlie\u00dft das aktuell ausgew\u00e4hlte Strukturelement (falls m\u00f6glich)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Widgets innerhalb des Screen Contents kopieren<\/h3>\n<div>\n<table style=\"border-collapse: collapse; width: 100%;\" border=\"0\">\n<tbody>\n<tr>\n<td style=\"width: 31.0732%;\">\n<div class=\"fgallery\"><a href=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/screenshots\/copywidgets.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-28380 size-full\" src=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/screenshots\/copywidgets.png\" alt=\"\" width=\"1920\" height=\"937\"><\/a><\/div>\n<\/td>\n<td style=\"width: 68.9268%;\">Sie k\u00f6nnen Widgets kopieren und auf einem anderen Bildschirm oder sogar in einer anderen Anwendung einf\u00fcgen. Verwenden Sie dazu die Funktionen Kopieren, Ausschneiden und Einf\u00fcgen. <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3>Widget-Eigenschaften bearbeiten<\/h3>\n<p>Jedes Widget verf\u00fcgt \u00fcber Eigenschaften, mit denen konfiguriert wird, wie sich das Widget verh\u00e4lt. Im folgenden Beispiel werden die Eigenschaften eines Button-Widgets gezeigt. <\/p>\n<div>\n<table style=\"border-collapse: collapse; width: 100%;\" border=\"0\">\n<tbody>\n<tr style=\"height: 199px;\">\n<td style=\"width: 31.809%; height: 199px;\">\n<div class=\"fgallery\"><a href=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/screenshots\/widgetproperties.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-28382 size-full\" src=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/screenshots\/widgetproperties.png\" alt=\"\" width=\"1920\" height=\"937\"><\/a><\/div>\n<\/td>\n<td style=\"width: 68.191%; height: 199px;\">Jedes Widget verf\u00fcgt \u00fcber Eigenschaften, mit denen konfiguriert wird, wie sich das Widget verh\u00e4lt.<\/p>\n<p>Links sehen Sie ein Beispiel f\u00fcr die Eigenschaften eines Button-Widgets.<\/p>\n<p>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h4>Icon-Explorer<\/h4>\n<table style=\"border-collapse: collapse; width: 100%;\" border=\"1\">\n<tbody>\n<tr>\n<td style=\"width: 50%;\">\n<div class=\"fgallery\"><a href=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/icon-explorer.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-19038\" src=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/icon-explorer.png\" alt=\"\" width=\"306\" height=\"158\" srcset=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/icon-explorer.png 306w, https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/icon-explorer-300x155.png 300w\" sizes=\"auto, (max-width: 306px) 100vw, 306px\" \/><\/a><\/div>\n<\/td>\n<td style=\"width: 50%;\">Verwenden Sie den <strong>Icon-Explorer<\/strong>, um Widgets, die ein <strong>Bild<\/strong> oder ein <strong>Icon<\/strong> als Eigenschaft haben, Icons hinzuzuf\u00fcgen.<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 50%;\">\n<div class=\"fgallery\"><a href=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/screenshots\/iconexplorerdialog.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-28381 size-full\" src=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/screenshots\/iconexplorerdialog.png\" alt=\"\" width=\"1920\" height=\"937\"><\/a><\/div>\n<\/td>\n<td style=\"width: 50%;\">Sie k\u00f6nnen auch eine Schriftart zu einer Anwendung hinzuf\u00fcgen, die Icons enth\u00e4lt, die im Icon-Explorer verwendet werden sollen. Bilder, die unter Assets hochgeladen wurden, k\u00f6nnen ebenfalls ausgew\u00e4hlt werden. <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h3>Client-Validierung von Standardeigenschaften<\/h3>\n<p>Der Datentyp von Standardeigenschaften in Anwendungselementen kann jetzt \u00fcberschrieben werden, es k\u00f6nnen jedoch nur Dom\u00e4nentypen mit demselben Basistyp verwendet werden.<\/p>\n<p>&nbsp;<\/p>\n<table style=\"border-collapse: collapse; width: 100%; height: 391px;\" border=\"0\">\n<tbody>\n<tr style=\"height: 368px;\">\n<td style=\"width: 50%; height: 368px;\">Sie finden die Einstellungen im Eigenschaften-Panel des UI Designers. Die Schaltfl\u00e4che \u00f6ffnet ein Popover, in dem Sie den Datentyp und das Validierungsereignis definieren k\u00f6nnen. Wenn die Validierung aktiviert ist (Kontrollk\u00e4stchen), wird eine Anzeige angezeigt. Sie k\u00f6nnen valueState und valueStateText als Ergebnis \u00e4ndern.   <\/p>\n<p>In diesem Beispiel wollten wir sicherstellen, dass das Eingabefeld mit den korrekten Daten, einer E-Mail-Adresse, gef\u00fcllt wird. Daher haben wir die Validierung f\u00fcr den vordefinierten Datentyp &#8220;E-Mail&#8221; beim \u00c4nderungsereignis hinzugef\u00fcgt. <\/td>\n<td style=\"width: 50%; height: 368px;\"><iframe loading=\"lazy\" title=\"Property validation\" src=\"https:\/\/player.vimeo.com\/video\/599330443?dnt=1&amp;app_id=122963\" width=\"700\" height=\"343\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe><\/p>\n<div class=\"fgallery\"><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Widgets k\u00f6nnen Ihrem Bildschirm mithilfe von UI-Elementen wie Textfeldern, Diagrammen oder Aktionsschaltfl\u00e4chen aus dem Widget- oder Widgetgruppen-Panel hinzugef\u00fcgt werden. Sie k\u00f6nnen kompatible Widgets herausfiltern, nach einem bestimmten Widget oder einer Widgetgruppe anhand des Namens suchen und diese dann per Drag  Drop oder \u00fcber das Pluszeichen zu Ihrem Bildschirm hinzuf\u00fcgen. Widgets k\u00f6nnen mithilfe der Pfeiltasten oder WASD auf Ihrer Tastatur sortiert und in einer Hierarchie strukturiert werden.   <\/p>\n<p>Die Bildschirm-Content-Struktur erm\u00f6glicht das Verschieben und Verschachteln von Widgets. Zu den verschiedenen Funktionen geh\u00f6ren Aufw\u00e4rts- und <\/p>\n","protected":false},"author":3651,"featured_media":0,"parent":49900,"menu_order":92,"template":"","format":"standard","class_list":["post-49935","manual_documentation","type-manual_documentation","status-publish","format-standard","hentry","manualdocumentationcategory-aktueller-release","manual_doc_tag-fortgeschrittene-202"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Design-Bildschirm - Simplifier Makers Club<\/title>\n<meta name=\"description\" content=\"Widgets k\u00f6nnen Ihrem Bildschirm mithilfe von UI-Elementen wie Textfeldern, Diagrammen oder Aktionsschaltfl\u00e4chen aus dem Widget- oder Widgetgruppen-Panel hinzugef\u00fcgt werden. Sie k\u00f6nnen kompatible Widgets herausfiltern, nach einem bestimmten Widget oder einer Widgetgruppe anhand des Namens suchen und diese dann per Drag Drop oder \u00fcber das Pluszeichen zu Ihrem Bildschirm hinzuf\u00fcgen. Widgets k\u00f6nnen mithilfe der Pfeiltasten oder WASD auf Ihrer Tastatur sortiert und in einer Hierarchie strukturiert werden.   Die Bildschirm-Content-Struktur erm\u00f6glicht das Verschieben und Verschachteln von Widgets. Zu den verschiedenen Funktionen geh\u00f6ren Aufw\u00e4rts- und\" \/>\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\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design-Bildschirm - Simplifier Makers Club\" \/>\n<meta property=\"og:description\" content=\"Widgets k\u00f6nnen Ihrem Bildschirm mithilfe von UI-Elementen wie Textfeldern, Diagrammen oder Aktionsschaltfl\u00e4chen aus dem Widget- oder Widgetgruppen-Panel hinzugef\u00fcgt werden. Sie k\u00f6nnen kompatible Widgets herausfiltern, nach einem bestimmten Widget oder einer Widgetgruppe anhand des Namens suchen und diese dann per Drag Drop oder \u00fcber das Pluszeichen zu Ihrem Bildschirm hinzuf\u00fcgen. Widgets k\u00f6nnen mithilfe der Pfeiltasten oder WASD auf Ihrer Tastatur sortiert und in einer Hierarchie strukturiert werden.   Die Bildschirm-Content-Struktur erm\u00f6glicht das Verschieben und Verschachteln von Widgets. Zu den verschiedenen Funktionen geh\u00f6ren Aufw\u00e4rts- und\" \/>\n<meta property=\"og:url\" content=\"https:\/\/community.simplifier.io\/de\/doc\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/\" \/>\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:40:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/arrow-up.png\" \/>\n\t<meta property=\"og:image:width\" content=\"21\" \/>\n\t<meta property=\"og:image:height\" content=\"24\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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=\"3\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\\\/current-release\\\/applications\\\/create-apps-from-scratch\\\/create-theuserinterface\\\/design-screen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/current-release\\\/applications\\\/create-apps-from-scratch\\\/create-theuserinterface\\\/design-screen\\\/\"},\"author\":{\"name\":\"Andreas Dallner\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#\\\/schema\\\/person\\\/814075d0504de8a4e87666436dc7e636\"},\"headline\":\"Design-Bildschirm\",\"datePublished\":\"2024-07-24T09:46:07+00:00\",\"dateModified\":\"2025-12-11T13:40:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/current-release\\\/applications\\\/create-apps-from-scratch\\\/create-theuserinterface\\\/design-screen\\\/\"},\"wordCount\":555,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/current-release\\\/applications\\\/create-apps-from-scratch\\\/create-theuserinterface\\\/design-screen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/arrow-up.png\",\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/current-release\\\/applications\\\/create-apps-from-scratch\\\/create-theuserinterface\\\/design-screen\\\/\",\"url\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/current-release\\\/applications\\\/create-apps-from-scratch\\\/create-theuserinterface\\\/design-screen\\\/\",\"name\":\"Design-Bildschirm - Simplifier Makers Club\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/current-release\\\/applications\\\/create-apps-from-scratch\\\/create-theuserinterface\\\/design-screen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/current-release\\\/applications\\\/create-apps-from-scratch\\\/create-theuserinterface\\\/design-screen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/arrow-up.png\",\"datePublished\":\"2024-07-24T09:46:07+00:00\",\"dateModified\":\"2025-12-11T13:40:18+00:00\",\"description\":\"Widgets k\u00f6nnen Ihrem Bildschirm mithilfe von UI-Elementen wie Textfeldern, Diagrammen oder Aktionsschaltfl\u00e4chen aus dem Widget- oder Widgetgruppen-Panel hinzugef\u00fcgt werden. Sie k\u00f6nnen kompatible Widgets herausfiltern, nach einem bestimmten Widget oder einer Widgetgruppe anhand des Namens suchen und diese dann per Drag Drop oder \u00fcber das Pluszeichen zu Ihrem Bildschirm hinzuf\u00fcgen. Widgets k\u00f6nnen mithilfe der Pfeiltasten oder WASD auf Ihrer Tastatur sortiert und in einer Hierarchie strukturiert werden. Die Bildschirm-Content-Struktur erm\u00f6glicht das Verschieben und Verschachteln von Widgets. Zu den verschiedenen Funktionen geh\u00f6ren Aufw\u00e4rts- und\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/current-release\\\/applications\\\/create-apps-from-scratch\\\/create-theuserinterface\\\/design-screen\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/current-release\\\/applications\\\/create-apps-from-scratch\\\/create-theuserinterface\\\/design-screen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/current-release\\\/applications\\\/create-apps-from-scratch\\\/create-theuserinterface\\\/design-screen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/arrow-up.png\",\"contentUrl\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/arrow-up.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/current-release\\\/applications\\\/create-apps-from-scratch\\\/create-theuserinterface\\\/design-screen\\\/#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\":\"Erstellen\",\"item\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/app-builder-leitfaden\\\/bauen\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Apps von Grund auf neu erstellen\",\"item\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/app-builder-leitfaden\\\/bauen\\\/erstellen-sie-apps-von-grund-auf-neu\\\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Benutzeroberfl\u00e4che erstellen\",\"item\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/erstellen-sie-apps-von-grund-auf-neu\\\/erstellen-der-benutzeroberflaeche\\\/\"},{\"@type\":\"ListItem\",\"position\":6,\"name\":\"Design-Bildschirm\"}]},{\"@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\\\/814075d0504de8a4e87666436dc7e636\",\"name\":\"Andreas Dallner\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/avatars\\\/3651\\\/1745953947-bpfull.jpg\",\"url\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/avatars\\\/3651\\\/1745953947-bpfull.jpg\",\"contentUrl\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/avatars\\\/3651\\\/1745953947-bpfull.jpg\",\"caption\":\"Andreas Dallner\"},\"description\":\"Hello, I\u2019m Andreas, Head of Product Management at Simplifier. My mission is to ensure that our product evolves in alignment with your needs. I translate your needs into innovative product features by closely listening to your feedback and understanding your requirements. My goal is to help you fully leverage the power of low-code technology, providing the right support and methodologies to drive significant value for your business\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Design-Bildschirm - Simplifier Makers Club","description":"Widgets k\u00f6nnen Ihrem Bildschirm mithilfe von UI-Elementen wie Textfeldern, Diagrammen oder Aktionsschaltfl\u00e4chen aus dem Widget- oder Widgetgruppen-Panel hinzugef\u00fcgt werden. Sie k\u00f6nnen kompatible Widgets herausfiltern, nach einem bestimmten Widget oder einer Widgetgruppe anhand des Namens suchen und diese dann per Drag Drop oder \u00fcber das Pluszeichen zu Ihrem Bildschirm hinzuf\u00fcgen. Widgets k\u00f6nnen mithilfe der Pfeiltasten oder WASD auf Ihrer Tastatur sortiert und in einer Hierarchie strukturiert werden.   Die Bildschirm-Content-Struktur erm\u00f6glicht das Verschieben und Verschachteln von Widgets. Zu den verschiedenen Funktionen geh\u00f6ren Aufw\u00e4rts- und","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\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/","og_locale":"de_DE","og_type":"article","og_title":"Design-Bildschirm - Simplifier Makers Club","og_description":"Widgets k\u00f6nnen Ihrem Bildschirm mithilfe von UI-Elementen wie Textfeldern, Diagrammen oder Aktionsschaltfl\u00e4chen aus dem Widget- oder Widgetgruppen-Panel hinzugef\u00fcgt werden. Sie k\u00f6nnen kompatible Widgets herausfiltern, nach einem bestimmten Widget oder einer Widgetgruppe anhand des Namens suchen und diese dann per Drag Drop oder \u00fcber das Pluszeichen zu Ihrem Bildschirm hinzuf\u00fcgen. Widgets k\u00f6nnen mithilfe der Pfeiltasten oder WASD auf Ihrer Tastatur sortiert und in einer Hierarchie strukturiert werden.   Die Bildschirm-Content-Struktur erm\u00f6glicht das Verschieben und Verschachteln von Widgets. Zu den verschiedenen Funktionen geh\u00f6ren Aufw\u00e4rts- und","og_url":"https:\/\/community.simplifier.io\/de\/doc\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/","og_site_name":"Simplifier Makers Club","article_publisher":"https:\/\/www.facebook.com\/simplifier.io\/","article_modified_time":"2025-12-11T13:40:18+00:00","og_image":[{"width":21,"height":24,"url":"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/arrow-up.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@simplifier_io","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/community.simplifier.io\/de\/doc\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/#article","isPartOf":{"@id":"https:\/\/community.simplifier.io\/de\/doc\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/"},"author":{"name":"Andreas Dallner","@id":"https:\/\/community.simplifier.io\/de\/#\/schema\/person\/814075d0504de8a4e87666436dc7e636"},"headline":"Design-Bildschirm","datePublished":"2024-07-24T09:46:07+00:00","dateModified":"2025-12-11T13:40:18+00:00","mainEntityOfPage":{"@id":"https:\/\/community.simplifier.io\/de\/doc\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/"},"wordCount":555,"commentCount":0,"publisher":{"@id":"https:\/\/community.simplifier.io\/de\/#organization"},"image":{"@id":"https:\/\/community.simplifier.io\/de\/doc\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/#primaryimage"},"thumbnailUrl":"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/arrow-up.png","inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/community.simplifier.io\/de\/doc\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/","url":"https:\/\/community.simplifier.io\/de\/doc\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/","name":"Design-Bildschirm - Simplifier Makers Club","isPartOf":{"@id":"https:\/\/community.simplifier.io\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/community.simplifier.io\/de\/doc\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/#primaryimage"},"image":{"@id":"https:\/\/community.simplifier.io\/de\/doc\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/#primaryimage"},"thumbnailUrl":"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/arrow-up.png","datePublished":"2024-07-24T09:46:07+00:00","dateModified":"2025-12-11T13:40:18+00:00","description":"Widgets k\u00f6nnen Ihrem Bildschirm mithilfe von UI-Elementen wie Textfeldern, Diagrammen oder Aktionsschaltfl\u00e4chen aus dem Widget- oder Widgetgruppen-Panel hinzugef\u00fcgt werden. Sie k\u00f6nnen kompatible Widgets herausfiltern, nach einem bestimmten Widget oder einer Widgetgruppe anhand des Namens suchen und diese dann per Drag Drop oder \u00fcber das Pluszeichen zu Ihrem Bildschirm hinzuf\u00fcgen. Widgets k\u00f6nnen mithilfe der Pfeiltasten oder WASD auf Ihrer Tastatur sortiert und in einer Hierarchie strukturiert werden. Die Bildschirm-Content-Struktur erm\u00f6glicht das Verschieben und Verschachteln von Widgets. Zu den verschiedenen Funktionen geh\u00f6ren Aufw\u00e4rts- und","breadcrumb":{"@id":"https:\/\/community.simplifier.io\/de\/doc\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/community.simplifier.io\/de\/doc\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/community.simplifier.io\/de\/doc\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/#primaryimage","url":"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/arrow-up.png","contentUrl":"https:\/\/community.simplifier.io\/wp-content\/uploads\/2018\/07\/arrow-up.png"},{"@type":"BreadcrumbList","@id":"https:\/\/community.simplifier.io\/de\/doc\/current-release\/applications\/create-apps-from-scratch\/create-theuserinterface\/design-screen\/#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":"Erstellen","item":"https:\/\/community.simplifier.io\/de\/doc\/app-builder-leitfaden\/bauen\/"},{"@type":"ListItem","position":4,"name":"Apps von Grund auf neu erstellen","item":"https:\/\/community.simplifier.io\/de\/doc\/app-builder-leitfaden\/bauen\/erstellen-sie-apps-von-grund-auf-neu\/"},{"@type":"ListItem","position":5,"name":"Benutzeroberfl\u00e4che erstellen","item":"https:\/\/community.simplifier.io\/de\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/"},{"@type":"ListItem","position":6,"name":"Design-Bildschirm"}]},{"@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\/814075d0504de8a4e87666436dc7e636","name":"Andreas Dallner","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/community.simplifier.io\/wp-content\/uploads\/avatars\/3651\/1745953947-bpfull.jpg","url":"https:\/\/community.simplifier.io\/wp-content\/uploads\/avatars\/3651\/1745953947-bpfull.jpg","contentUrl":"https:\/\/community.simplifier.io\/wp-content\/uploads\/avatars\/3651\/1745953947-bpfull.jpg","caption":"Andreas Dallner"},"description":"Hello, I\u2019m Andreas, Head of Product Management at Simplifier. My mission is to ensure that our product evolves in alignment with your needs. I translate your needs into innovative product features by closely listening to your feedback and understanding your requirements. My goal is to help you fully leverage the power of low-code technology, providing the right support and methodologies to drive significant value for your business"}]}},"_links":{"self":[{"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/docs\/49935","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\/3651"}],"version-history":[{"count":5,"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/docs\/49935\/revisions"}],"predecessor-version":[{"id":74217,"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/docs\/49935\/revisions\/74217"}],"up":[{"embeddable":true,"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/docs\/49900"}],"wp:attachment":[{"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/media?parent=49935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}