{"id":129040,"date":"2018-02-16T12:30:29","date_gmt":"2018-02-16T11:30:29","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/adding-conditions-to-interactions\/"},"modified":"2025-02-13T18:35:14","modified_gmt":"2025-02-13T17:35:14","slug":"adding-conditions-to-interactions","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/hinzufugen-bedingungen-interaktionen","title":{"rendered":"Hinzuf\u00fcgen von Bedingungen zu Interaktionen"},"content":{"rendered":"<p>Sie k\u00f6nnen in Ihren Projekten Bedingungen hinzuf\u00fcgen, um festzulegen, wann ein Ereignis ausgel\u00f6st werden soll oder nicht. Sie k\u00f6nnen sie verwenden, um erstklassige Benutzererlebnisse zu schaffen, einschlie\u00dflich: <\/p>\n<ul>\n<li>Formular-Validierung<\/li>\n<li>Bedingte Bildschirmnavigation<\/li>\n<li>Bildschirme mit Kombinationsschloss<\/li>\n<li>Animationen<\/li>\n<li>&#8230;und vieles mehr.<\/li>\n<\/ul>\n<p>In diesem Lernprogramm lernen Sie die Grundlagen des Expression Builders kennen, mit dem Sie Bedingungen erstellen k\u00f6nnen.<\/p>\n<h2><a id=\"build-event\"><\/a>Ein Ereignis erstellen<\/h2>\n<p>Bevor Sie eine Bedingung hinzuf\u00fcgen k\u00f6nnen, m\u00fcssen Sie ein Ereignis in Ihrem Projekt erstellen. Stellen Sie sich zum Beispiel vor, Sie erstellen ein Formular, um sich f\u00fcr einen Newsletter anzumelden, mit einem Eingabefeld <kbd>F<\/kbd> und einer Schaltfl\u00e4che <kbd>B<\/kbd>. Wenn Sie das Formular abschicken, m\u00f6chten Sie eine Verkn\u00fcpfung zu einem anderen Bildschirm herstellen.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/verify-email-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" verify-email-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/verify-email-example.png\" alt=\"E-Mail-Beispiel \u00fcberpr\u00fcfen\">Beispiel f\u00fcr die \u00dcberpr\u00fcfung einer E-Mail<\/video><br \/>\nUm dieses Ereignis zu erstellen:<\/p>\n<ol>\n<li>W\u00e4hlen Sie die Schaltfl\u00e4che, gehen Sie zur Palette Ereignisse und klicken Sie auf &#8218;Ereignis hinzuf\u00fcgen&#8216;.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43973\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-event-condition.png\" alt=\"Klicken Sie auf die Schaltfl\u00e4che 'Ereignis hinzuf\u00fcgen' in der Ereignis-Palette\" width=\"1253\" height=\"729\"><\/li>\n<li>Erstellen Sie ein Ereignis <strong>&#8222;Bei Klick<\/strong> + <strong>Navigieren zu&#8220;<\/strong> und w\u00e4hlen Sie einen anderen Bildschirm aus, zu dem Sie verlinken m\u00f6chten.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43975\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Nav-To-Condition-Event.png\" alt=\"Bei Klick auf Ereignis Navigieren zu, Verkn\u00fcpfung mit Bildschirm 2\" width=\"1107\" height=\"700\">\n<div><strong>Hinweis:<\/strong> F\u00fcr mobile und Tablet-Projekte wird <strong>On Click<\/strong> zu <strong>On Tap<\/strong>.<\/div>\n<\/li>\n<\/ol>\n<p>Sie sehen das soeben erstellte Ereignis in der Palette Ereignisse, wo Sie nun einen Textlink mit der Bezeichnung &#8218;Bedingung hinzuf\u00fcgen&#8216; sehen.<\/p>\n<h2><a id=\"define-condition\"><\/a>Definieren Sie eine Bedingung<\/h2>\n<p>Sie m\u00f6chten nicht, dass Sie das Anmeldeformular f\u00fcr den Newsletter abschicken k\u00f6nnen, wenn Sie keine Informationen in das Formular eingegeben haben, daher m\u00f6chten Sie diesem Ereignis eine Bedingung hinzuf\u00fcgen.<\/p>\n<p>Klicken Sie auf den Text &#8218;Bedingung hinzuf\u00fcgen&#8216; \u00fcber dem Ereignis, das Sie in der Palette Ereignisse erstellt haben. Daraufhin wird das Fenster f\u00fcr die Erstellung von bedingten Ausdr\u00fccken angezeigt. So sieht er aus:  <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43969\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Conditional-expression-builder.png\" alt=\"Conditional Expression Builder definiert\" width=\"1746\" height=\"1102\"><\/p>\n<ol class=\"image-bullet\">\n<li><strong>Der Ausdruck<\/strong> &#8211; hier ziehen Sie Komponenten, um die Bedingung zu erstellen.<\/li>\n<li><strong>Funktionen<\/strong> &#8211; diese Registerkarte enth\u00e4lt Optionen zur Definition von Logik und anderen Vergleichen zwischen Elementen.<\/li>\n<li><strong>Konstanten<\/strong> &#8211; hier finden Sie feste Werte, wie die Bildschirmbreite oder -h\u00f6he des Projekts, die Uhrzeit Ihres Computers oder Formeln f\u00fcr regul\u00e4re Ausdr\u00fccke.<\/li>\n<li><strong>Leinwandvorschau<\/strong> &#8211; ziehen Sie Elemente auf dem Bildschirm in den Ausdruck. Sie k\u00f6nnen nur Elemente auf dem aktuellen Bildschirm verwenden. <\/li>\n<li><strong>Variablen<\/strong> &#8211; sehen Sie sich die Variablen in Ihrem Projekt an und verwenden Sie sie in der Expression.<\/li>\n<li><strong>Datenmaster<\/strong> &#8211; hier finden Sie Ihre Datenmaster und deren Felder zur Verwendung in einem Ausdruck.<\/li>\n<\/ol>\n<p>Um eine Bedingung zu erstellen, k\u00f6nnen Sie jedes dieser Elemente, Konstanten und logischen Funktionen per Drag &amp; Drop in den Ausdruck ziehen. Um zum Beispiel eine Bedingung zu erstellen, die \u00fcberpr\u00fcft, ob das Anmeldeformular leer ist: <\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 61%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742299808\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ol>\n<li>Sehen Sie sich die Canvas-Vorschau an. W\u00e4hlen Sie das Eingabetextfeld aus und ziehen Sie es auf die freie Fl\u00e4che in dem Ausdruck, auf dem steht &#8222;Klicken Sie zum Bearbeiten oder ziehen Sie eine Komponente per Drag &amp; Drop&#8220;. <\/li>\n<li>Scrollen Sie auf der Registerkarte <strong>Funktionen<\/strong> nach unten zum Abschnitt &#8218;Logik&#8216;. Ziehen Sie eine <strong>Not Equals (\u2260)<\/strong> Funktion neben das Eingabetextfeld im Ausdruck. <\/li>\n<li>In der Expression wird ein neues freies Feld angezeigt. Doppelklicken Sie auf dieses Feld, aber lassen Sie es leer. <\/li>\n<li>Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ausdrucks abzuschlie\u00dfen.<\/li>\n<\/ol>\n<p>Der Ausdruck, den Sie gerade erstellt haben, pr\u00fcft, ob das Eingabefeld nicht leer ist. Ist dies nicht der Fall, werden Sie zum n\u00e4chsten Bildschirm weitergeleitet. Wenn es leer ist, wird das Ereignis nicht ausgel\u00f6st.  <\/p>\n<p>Fahren Sie mit dem n\u00e4chsten Tutorial fort und lernen Sie, wie Sie andere Bedingungen in Ihren Projekten erstellen k\u00f6nnen.<\/p>\n<h2>How-tos: Lernen Sie, wie man g\u00e4ngige Anwendungsf\u00e4lle designt<\/h2>\n<p>Sie k\u00f6nnen Bedingungen in Ihren Projekten verwenden, um dynamische Benutzererlebnisse zu schaffen, wie z.B. bedingte Navigation, Fehlermeldungen\/Formularvalidierung und vieles mehr. In den folgenden \u00dcbungen finden Sie einige Beispiele f\u00fcr die Verwendung von Bedingungen in Justinmind. <\/p>\n<h2><a id=\"conditional-navigation\"><\/a>Bedingte Navigation<\/h2>\n<p>In dieser Anleitung lernen Sie, wie Sie eine einfache Bedingung erstellen, die pr\u00fcft, welchen Wert Sie in einem Dropdown-Men\u00fc ausw\u00e4hlen. Anschlie\u00dfend werden Sie mit dem entsprechenden Bildschirm verlinkt.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/conditional-navigation-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" conditional-navigation-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/conditional-navigation-example.png\" alt=\"Beispiel f\u00fcr bedingte Navigation\">Beispiel f\u00fcr bedingte Navigation<\/video><\/p>\n<h3>Das Beispiel designen<\/h3>\n<ol>\n<li>Erstellen Sie einen Suchbildschirm mit Texten und Rechtecken. F\u00fcgen Sie eine Schaltfl\u00e4che hinzu und beschriften Sie sie mit &#8222;Suchen&#8220;. <\/li>\n<li>F\u00fcgen Sie dem Canvas ein Dropdown-\/Auswahllisten-Widget hinzu und gestalten Sie es wie gew\u00fcnscht. Sie finden es im Dropdown-Men\u00fc der Symbolleiste unter &#8218;Interaktive Eingabefelder&#8216;. <\/li>\n<li>Gehen Sie bei ausgew\u00e4hltem Dropdown zur Palette Eigenschaften und klicken Sie auf &#8218;Werte bearbeiten&#8216;. L\u00f6schen Sie alle Werte im Dialog und f\u00fcgen Sie zwei neue hinzu &#8211; &#8222;H\u00e4user&#8220; und &#8222;Wohnungen&#8220;. <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 10px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/edit-dropdown-values.png\" playsinline=\"&gt;&lt;source src=\" https:=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" edit-dropdown-values.mp4=\"\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/edit-dropdown-values.png\" alt=\"Dropdown-Werte bearbeiten\">Dropdown-Werte bearbeiten<\/video><\/li>\n<li>Klicken Sie auf die Schaltfl\u00e4che &#8218;+&#8216; in der Palette Bildschirme und erstellen Sie zwei neue Bildschirme. Nennen Sie einen &#8222;H\u00e4user&#8220; und den anderen &#8222;Wohnungen&#8220;. Passen Sie diese Bildschirme nach Belieben an.  <\/li>\n<\/ol>\n<h3>Erstellen Sie die Ereignisse<\/h3>\n<ol>\n<li>Gehen Sie zur\u00fcck zum Bildschirm Suchen und w\u00e4hlen Sie die Schaltfl\u00e4che &#8222;Suchen&#8220;. Sehen Sie sich die Palette Ereignisse an und klicken Sie auf &#8222;Ereignis hinzuf\u00fcgen&#8220;. Erstellen Sie ein Ereignis <strong>&#8222;On Tap<\/strong> + <strong>Navigieren zu&#8220;<\/strong> und w\u00e4hlen Sie den Bildschirm &#8222;H\u00e4user&#8220; als Ziel.  <\/li>\n<li>In der Palette Ereignisse sehen Sie das Ereignis, das Sie gerade erstellt haben. Klicken Sie auf den Textlink &#8222;Bedingung hinzuf\u00fcgen&#8220; \u00fcber der Aktion, wodurch sich der Conditional Expression Builder \u00f6ffnet. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44012\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-condition-nav.png\" alt=\"Bedingungstext-Verkn\u00fcpfung in der Ereignispalette hinzuf\u00fcgen\" width=\"1444\" height=\"819\"><\/li>\n<li>Folgen Sie diesen Schritten, um die Bedingung zu erstellen:\n<ul class=\"hidden-bullet\">\n<li>\n<div class=\"embed-container\" style=\"padding-bottom: 62%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/743400826\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li><strong>a.<\/strong>  Schauen Sie sich die Canvas-Vorschau an und ziehen Sie die Dropdown-Liste auf die freie Fl\u00e4che in der Expression, die mit &#8222;Klicken Sie zum Bearbeiten oder Ziehen &amp; Ablegen einer Komponente&#8220; beschriftet ist.<\/li>\n<li><strong>b.<\/strong> Ziehen Sie die Logikfunktion <strong>Gleich (=)<\/strong> neben das Dropdown-Men\u00fc des Ausdrucks.<\/li>\n<li><strong>c.<\/strong>  Sie sehen, dass in dem Ausdruck ein neues freies Feld erscheint. Doppelklicken Sie in dieses Feld und schreiben Sie &#8222;H\u00e4user&#8220;. <\/li>\n<li><strong>d.<\/strong>  Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ausdrucks abzuschlie\u00dfen.<\/li>\n<\/ul>\n<div><strong>Hinweis:<\/strong> Der Wert, den Sie in den Ausdruck eingeben, muss mit dem Wert aus der Dropdown-Liste \u00fcbereinstimmen.<\/div>\n<p>Das Ereignis und die Bedingung, die Sie gerade erstellt haben, verbinden Sie nur dann mit dem Bildschirm H\u00e4user, wenn Sie &#8222;H\u00e4user&#8220; aus der Dropdown-Liste ausw\u00e4hlen.<\/li>\n<li>Klicken Sie immer noch in der Palette Ereignisse auf den Textlink &#8218;Sonst&#8216; unten. Erstellen Sie ein weiteres Ereignis <strong>&#8222;Bei Antippen<\/strong> + <strong>Navigieren zu&#8220;<\/strong> und verkn\u00fcpfen Sie es mit dem Bildschirm &#8222;Apartments&#8220;. Da es nur zwei Optionen gibt, die Sie aus dem Dropdown-Men\u00fc ausw\u00e4hlen k\u00f6nnen, m\u00fcssen Sie f\u00fcr diese Aktion keine Bedingung erstellen. <\/li>\n<\/ol>\n<p>So sollte Ihre Event-Palette aussehen:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44025\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Conditional-navigation-events.png\" alt=\"Die Ereignispalette mit allen Ereignissen in diesem Beispiel\" width=\"1064\" height=\"647\"><br \/>\nKlicken Sie auf die Schaltfl\u00e4che &#8218;Abspielen&#8216;, um Ihr Projekt zu simulieren. W\u00e4hlen Sie einen Wert aus der Dropdown-Liste und Sie werden mit dem entsprechenden Bildschirm verbunden. <\/p>\n<h2><a id=\"two-button-actions\"><\/a>Verschiedene Aktionen auf einer Schaltfl\u00e4che<\/h2>\n<p>Sie k\u00f6nnen auch Bedingungen verwenden, um einer Schaltfl\u00e4che verschiedene Aktionen zuzuweisen, die jedes Mal ausgel\u00f6st werden, wenn Sie auf die Schaltfl\u00e4che klicken.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 10px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/different-actions-button-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" different-actions-button-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/different-actions-button-example.png\" alt=\"Beispiel f\u00fcr verschiedene Aktionen auf einer Schaltfl\u00e4che\">Beispiel f\u00fcr verschiedene Aktionen auf einer Schaltfl\u00e4che<\/video><\/p>\n<h3>Das Beispiel designen<\/h3>\n<ol>\n<li>Platzieren Sie drei Rechtecke und eine Schaltfl\u00e4che auf dem Canvas.<\/li>\n<li>W\u00e4hlen Sie alle Rechtecke aus und markieren Sie sie in der Eigenschaften-Palette als ausgeblendet.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43925\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Hide-multi-rectangles.png\" alt=\"Blenden Sie die Rechtecke in der Eigenschaften-Palette aus\" width=\"1027\" height=\"344\"><\/li>\n<\/ol>\n<h3>Erstellen Sie die Ereignisse<\/h3>\n<ol>\n<li>W\u00e4hlen Sie die Schaltfl\u00e4che auf dem Canvas aus, gehen Sie zur Palette Ereignisse und klicken Sie auf &#8218;Ereignis hinzuf\u00fcgen&#8216;.<\/li>\n<li>Erstellen Sie ein Ereignis <strong>&#8222;Bei Klick + Zeigen&#8220;<\/strong> und w\u00e4hlen Sie das erste Rechteck aus, das mit einem Einblendeffekt angezeigt werden soll. Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ereignisses abzuschlie\u00dfen. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43949\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Show-hidden-rectangle.png\" alt=\"Erstellen Sie ein Ereignis On Click + Show, das das erste Rechteck mit einem Fade-Effekt anzeigt.\" width=\"1324\" height=\"838\"><\/li>\n<li>Gehen Sie zur\u00fcck zur Palette Ereignisse und klicken Sie auf den Textlink &#8218;Bedingung hinzuf\u00fcgen&#8216; \u00fcber dem Ereignis, das Sie gerade erstellt haben. Folgen Sie diesen Schritten, um den Ausdruck zu erstellen:\n<ul class=\"hidden-bullet\">\n<li><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43950\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Rectangle-not-visible-condition.png\" alt=\"Ziehen Sie das Rechteck auf den freien Platz im Ausdruck und w\u00e4hlen Sie aus dem Dropdown-Men\u00fc die Option \"ist sichtbar\". Setzen Sie eine Not-Funktion vor diesen Ausdruck\" width=\"818\" height=\"498\"><\/li>\n<li><strong>a.<\/strong>  Ziehen Sie das erste Rechteck auf den freien Platz im Ausdruck.<\/li>\n<li><strong>b.<\/strong>  Unter dem Element im Ausdruck wird ein Dropdown-Men\u00fc angezeigt. Klicken Sie darauf und w\u00e4hlen Sie die Option &#8218;Ist sichtbar&#8216;. <\/li>\n<li><strong>c.<\/strong> Ziehen Sie eine <strong>Not-Logikfunktion<\/strong> auf den Ausdruck. Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ausdrucks abzuschlie\u00dfen. <\/li>\n<li>Diese Bedingung pr\u00fcft, ob das erste Rechteck nicht sichtbar ist. Ist dies nicht der Fall, wird das erste Rechteck angezeigt. <\/li>\n<\/ul>\n<\/li>\n<li>Klicken Sie auf den Text &#8218;Else&#8216; und erstellen Sie ein weiteres <strong>On Click<\/strong> + <strong>Show-Ereignis<\/strong>, wobei Sie das zweite Rechteck ausw\u00e4hlen, das mit einem Fade-Effekt angezeigt werden soll.<\/li>\n<li>Klicken Sie auf den Text &#8218;Sonst Bedingung hinzuf\u00fcgen&#8216; \u00fcber der Aktion, die Sie gerade erstellt haben, und erstellen Sie diese Bedingung:\n<ul class=\"hidden-bullet\">\n<li><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44018\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Rectangle-visible-condition.png\" alt=\"In diesem Fall sollte das erste Rechteck sichtbar und das zweite Rechteck nicht sichtbar sein.\" width=\"1198\" height=\"709\"><\/li>\n<li><strong>a.<\/strong>  Ziehen Sie das erste Rechteck auf den freien Platz in der Expression und w\u00e4hlen Sie &#8218;Ist sichtbar&#8216; aus dem Dropdown-Men\u00fc.<\/li>\n<li><strong>b.<\/strong> Platzieren Sie eine <strong>Und (&amp;)<\/strong> Logikfunktion neben dem Rechteck im Ausdruck.<\/li>\n<li><strong>c.<\/strong>  Ziehen Sie das zweite Rechteck auf den freien Platz im Ausdruck und w\u00e4hlen Sie &#8218;Ist sichtbar&#8216; aus dem Dropdown-Men\u00fc.<\/li>\n<li><strong>d.<\/strong> Platzieren Sie eine <strong>Not-Logikfunktion<\/strong> links vom zweiten Rechteck und klicken Sie auf &#8218;OK&#8216;, um den Ausdruck fertig zu stellen.<\/li>\n<li>Diese Bedingung pr\u00fcft, ob das erste Rechteck sichtbar ist und das zweite Rechteck auf dem Canvas nicht sichtbar ist. Ist dies der Fall, wird das zweite Rechteck angezeigt. <\/li>\n<\/ul>\n<\/li>\n<li>Tippen Sie erneut auf die Textverkn\u00fcpfung &#8218;Else&#8216; und erstellen Sie ein weiteres Ereignis <strong>&#8218;On Click<\/strong> + <strong>Show&#8216;<\/strong>, wobei Sie das dritte Rechteck ausw\u00e4hlen, das mit einem Fade-Effekt angezeigt werden soll. Sie m\u00fcssen diesem Ereignis keine Bedingung hinzuf\u00fcgen. <\/li>\n<\/ol>\n<p>So sollte Ihre Events-Palette aussehen:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43953\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Events-palette-multi-event-button.png\" alt=\"Ansicht der Ereignispalette mit allen Ereignissen\" width=\"882\" height=\"632\"><br \/>\nKlicken Sie auf die Schaltfl\u00e4che &#8218;Abspielen&#8216;, um Ihr Projekt zu simulieren. Klicken Sie auf die Schaltfl\u00e4che, um das erste Rechteck zu sehen. Klicken Sie erneut auf die Schaltfl\u00e4che, um das zweite Rechteck zu sehen, und tippen Sie noch einmal auf die Schaltfl\u00e4che, um das letzte Rechteck zu sehen.  <\/p>\n<h2><a id=\"error-messages\"><\/a>Fehlermeldungen in einem Eingabeformular<\/h2>\n<p>Jetzt lernen Sie, wie Sie Bedingungen erstellen, die \u00fcberpr\u00fcfen, ob alle Felder eines Formulars korrekt ausgef\u00fcllt und validiert wurden. Wenn dies nicht der Fall ist, wird eine Fehlermeldung angezeigt.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/error-message-preview.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" error-message-preview.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/error-message-preview.png\" alt=\"Vorschau der Fehlermeldung\">Vorschau der Fehlermeldung<\/video><\/p>\n<h3>Das Beispiel designen<\/h3>\n<ol>\n<li>Ziehen Sie zwei Eingabetextfelder <kbd>F<\/kbd> und eine Schaltfl\u00e4che auf den Canvas. Richten Sie sie so aus, dass sie dem Beispiel entsprechen. <\/li>\n<li>Doppelklicken Sie auf jedes Eingabefeld, um einen Platzhalterwert hinzuzuf\u00fcgen. Geben Sie &#8222;E-Mail&#8220; und &#8222;Passwort&#8220; ein. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43959\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-placeholder.png\" alt=\"Geben Sie Platzhalterwerte in jedes Eingabefeld in der Eigenschaftenpalette ein\" width=\"819\" height=\"450\" srcset=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-placeholder.png 1640w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-placeholder-300x165.png 300w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-placeholder-768x421.png 768w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-placeholder-1024x562.png 1024w\" sizes=\"(max-width: 819px) 100vw, 819px\" \/><\/li>\n<li>F\u00fcgen Sie zwei Textelemente hinzu und platzieren Sie eines unter jedem Eingabefeld. Beschriften Sie diese mit &#8222;Bitte geben Sie eine g\u00fcltige E-Mail-Adresse ein&#8220; und &#8222;Bitte geben Sie ein Kennwort ein&#8220;, denn das sind die Fehlermeldungen, die angezeigt werden, wenn das Formular nicht vollst\u00e4ndig ausgef\u00fcllt wurde.<\/li>\n<li>W\u00e4hlen Sie beide Fehlermeldungen aus und markieren Sie sie in der Eigenschaften-Palette als ausgeblendet. Sie k\u00f6nnen <kbd>die Umschalttaste<\/kbd> verwenden, um sie auf der Leinwand mehrfach auszuw\u00e4hlen. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43962\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Hide-error-messages.png\" alt=\"Ausblenden der Fehlermeldungen in der Eigenschaften-Palette\" width=\"914\" height=\"381\"><\/li>\n<\/ol>\n<h3>Erstellen Sie die Ereignisse<\/h3>\n<ol>\n<li>W\u00e4hlen Sie die Schaltfl\u00e4che &#8222;Anmelden&#8220;, gehen Sie zur Palette &#8222;Ereignisse&#8220; und klicken Sie auf &#8222;Ereignis hinzuf\u00fcgen&#8220;. Erstellen Sie ein Ereignis <strong>&#8222;Bei Klick<\/strong> + <strong>Anzeigen&#8220;<\/strong> und w\u00e4hlen Sie die Fehlermeldung &#8222;Bitte geben Sie eine g\u00fcltige E-Mail ein&#8220;, die angezeigt werden soll.  Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ereignisses zu beenden.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44020\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Show-error-event.png\" alt=\"W\u00e4hlen Sie die versteckte E-Mail-Fehlermeldung, die angezeigt werden soll\" width=\"1087\" height=\"686\"><\/li>\n<li>Klicken Sie auf den Textlink &#8218;Bedingung hinzuf\u00fcgen&#8216; oberhalb des Ereignisses, das Sie gerade erstellt haben. Folgen Sie diesen Schritten, um den Ausdruck zu erstellen:\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> Ziehen Sie eine Logikfunktion f\u00fcr <strong>regul\u00e4re Ausdr\u00fccke (Reg Exp)<\/strong> auf den freien Platz im Ausdruck.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43984\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Reg-Exp-Condition.png\" alt=\"Logikfunktion f\u00fcr regul\u00e4re Ausdr\u00fccke zum Ausdruck hinzugef\u00fcgt\" width=\"843\" height=\"469\"><\/li>\n<li><strong>b.<\/strong>  Es werden zwei freie Felder angezeigt. Ziehen Sie das Eingabefeld &#8222;E-Mail&#8220; in das freie Feld auf der linken Seite. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43987\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Email-input-condition.png\" alt=\"Ziehen Sie das E-Mail-Eingabefeld in das freie Feld auf der linken Seite\" width=\"843\" height=\"469\"><\/li>\n<li><strong>c.<\/strong> Klicken Sie auf die Registerkarte <strong>Konstanten<\/strong> und auf den Abschnitt &#8218;Regul\u00e4re Ausdr\u00fccke&#8216;. Ziehen Sie die Konstante <strong>Email (@)<\/strong> in das freie Feld auf der rechten Seite. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43989\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Email-constant.png\" alt=\"E-Mail-Konstante in das freie Feld auf der rechten Seite\" width=\"1158\" height=\"764\"><\/li>\n<li><strong>d.<\/strong> Klicken Sie zur\u00fcck auf die Registerkarte <strong>Funktionen<\/strong>. Ziehen Sie eine <strong>Not-Logikfunktion<\/strong> vor den Ausdruck.  Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ausdrucks abzuschlie\u00dfen.<\/li>\n<li>Diese Bedingung pr\u00fcft, ob der Wert, den Sie in das Textfeld eingegeben haben, mit der Struktur einer E-Mail-Adresse \u00fcbereinstimmt oder nicht. Wenn er nicht \u00fcbereinstimmt, wird die Fehlermeldung angezeigt. <\/li>\n<\/ul>\n<\/li>\n<li>Klicken Sie auf den Text &#8218;Sonst&#8216; unter dem Ereignis, das Sie gerade erstellt haben, und erstellen Sie ein Ereignis <strong>bei Klick<\/strong> + <strong>Ausblenden<\/strong>, wobei Sie die Fehlermeldung &#8222;Bitte geben Sie eine g\u00fcltige E-Mail ein&#8220; zum Ausblenden ausw\u00e4hlen.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43977\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-else-event.png\" alt=\"Klicken Sie auf den Text 'Sonst' unter den von Ihnen erstellten Ereignissen\" width=\"1345\" height=\"760\"><\/li>\n<li>Klicken Sie oben in der Palette Ereignisse auf die Schaltfl\u00e4che &#8218;+&#8216;, um eine neue Interaktion zu erstellen. Erstellen Sie ein Ereignis <strong>On Click<\/strong> + <strong>Show<\/strong> und w\u00e4hlen Sie die Fehlermeldung &#8222;Bitte geben Sie ein Passwort ein&#8220;, die angezeigt werden soll. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43980\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-new-interaction.png\" alt=\"Klicken Sie auf die Schaltfl\u00e4che +, um eine neue Interaktion zu erstellen.\" width=\"593\" height=\"236\"><\/li>\n<li>Klicken Sie auf den Textlink &#8222;Bedingung hinzuf\u00fcgen&#8220; \u00fcber dem soeben erstellten Ereignis, wodurch sich der Builder f\u00fcr bedingte Ausdr\u00fccke \u00f6ffnet. Folgen Sie diesen Schritten, um den Ausdruck zu erstellen:\n<ul class=\"hidden-bullet\">\n<li>\n<div class=\"embed-container\" style=\"padding-bottom: 66%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/743407649\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li><strong>a.<\/strong>  Ziehen Sie in der Canvas-Vorschau das Eingabefeld &#8222;Kennwort&#8220; auf den freien Platz im Ausdruck und legen Sie es dort ab.<\/li>\n<li><strong>b.<\/strong> Platzieren Sie eine Logikfunktion <strong>Gleich (=)<\/strong> neben dem Eingabetextfeld.<\/li>\n<li><strong>c.<\/strong>  Sie sehen, dass ein neuer offener Bereich erscheint. Doppelklicken Sie darauf, aber lassen Sie es leer.  Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ausdrucks abzuschlie\u00dfen.<\/li>\n<li>Diese Bedingung pr\u00fcft, ob in das Eingabefeld kein Wert eingegeben wurde. Ist dies der Fall, wird die von Ihnen erstellte Fehlermeldung angezeigt. <\/li>\n<\/ul>\n<\/li>\n<li>Tippen Sie auf den Textlink &#8222;Sonst&#8220; unter den Ereignissen, die Sie gerade erstellt haben, und erstellen Sie ein Ereignis <strong>&#8222;Bei Klick<\/strong> + <strong>Ausblenden&#8220;<\/strong>, wobei Sie die Fehlermeldung &#8222;Bitte geben Sie ein Passwort ein&#8220; zum Ausblenden ausw\u00e4hlen. Dadurch wird die Fehlermeldung ausgeblendet, wenn Sie einen Wert in das Eingabefeld &#8222;Passwort&#8220; eingegeben haben. <\/li>\n<\/ol>\n<p>So sollte Ihre Event-Palette aussehen:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43955\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Error-messages-events-palette.png\" alt=\"Ansicht der Ereignispalette mit allen Ereignissen und Bedingungen\" width=\"903\" height=\"746\"><br \/>\nKlicken Sie auf die Schaltfl\u00e4che &#8222;Abspielen&#8220;, um Ihr Projekt zu simulieren. F\u00fcllen Sie eines der Eingabefelder aus, aber lassen Sie das andere leer. Klicken Sie auf die Schaltfl\u00e4che &#8222;Anmelden&#8220; und es erscheint eine Fehlermeldung. Geben Sie einen Wert in das Eingabetextfeld ein und klicken Sie erneut auf die Schaltfl\u00e4che, um die Fehlermeldung zu verbergen.   <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sie k\u00f6nnen in Ihren Projekten Bedingungen hinzuf\u00fcgen, um festzulegen, wann ein Ereignis ausgel\u00f6st werden soll oder nicht. Sie k\u00f6nnen sie verwenden, um erstklassige Benutzererlebnisse zu schaffen,&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8554,8556],"tags":[],"class_list":["post-129040","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-web-mobile-interaktionen"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129040"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=129040"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129040\/revisions"}],"predecessor-version":[{"id":129219,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129040\/revisions\/129219"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}