{"id":129057,"date":"2018-03-08T15:32:14","date_gmt":"2018-03-08T14:32:14","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/prototyping-forms-data-lists-and-data-grids\/"},"modified":"2025-02-13T18:40:02","modified_gmt":"2025-02-13T17:40:02","slug":"prototyping-forms-data-lists-and-data-grids","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/datenvisualisierung","title":{"rendered":"Datenvisualisierung"},"content":{"rendered":"<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/781862975\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Stellen Sie sich vor, Sie erstellen einen Prototyp f\u00fcr eine Anwendung zur Verwaltung von Kunden in Ihrem Unternehmen. Da Ihr Unternehmen viele Kunden hat, brauchen Sie eine M\u00f6glichkeit, diese in gro\u00dfen Mengen anzuzeigen, m\u00f6glicherweise in Form von Karten oder Tabellen. Au\u00dferdem ben\u00f6tigen Sie eine M\u00f6glichkeit, einzelne Kunden zu bearbeiten oder aus der Liste zu l\u00f6schen und diese \u00c4nderungen auf verschiedenen Bildschirmen in Ihrem Prototyp zu \u00fcbernehmen. Eine normale Texttabelle k\u00f6nnte zwar funktionieren, ist aber nicht sehr dynamisch und schwer zu pflegen, wenn sich Ihre Daten im Laufe der Zeit \u00e4ndern. Wie w\u00fcrden Sie dies prototypisch umsetzen?    <\/p>\n<p>In Justinmind sind Data Masters das, wonach Sie suchen.<\/p>\n<p>Ein Datenstamm ist eine Liste von Informationen, \u00e4hnlich wie eine Datenbank oder eine Tabellenkalkulation. Die Daten k\u00f6nnen Text oder Bilder sein und bestehen aus Feldern (Spaltentitel) und Datens\u00e4tzen (Zeilen). <\/p>\n<p>Folgen Sie diesem Artikel, um zu erfahren, wie Sie Daten in Ihren Prototypen verwenden k\u00f6nnen:<\/p>\n<h2><a id=\"create-data-master\"><\/a>Einen Datenstamm erstellen<\/h2>\n<p>Sie werden einen Datenstamm verwenden, um Ihre Kundeninformationen zu speichern. Hier erfahren Sie, wie Sie einen erstellen: <\/p>\n<ol>\n<li>Sehen Sie sich die Palette Data Masters in Justinmind an. Wenn Sie sie nicht sehen, gehen Sie zum Men\u00fc Fenster und markieren Sie Data Masters, damit sie angezeigt wird. <\/li>\n<li>Klicken Sie auf die Schaltfl\u00e4che &#8218;+&#8216; in der Palette, um einen neuen Datenstamm zu erstellen. Und so geht&#8217;s weiter:\n<ul class=\"hidden-bullet\">\n<li>\n<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/450266217\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li><strong>a.<\/strong>  Geben Sie einen Namen f\u00fcr den Datenstamm ein. In diesem Beispiel nennen Sie ihn &#8222;Kunden&#8220;. <\/li>\n<li><strong>b.<\/strong>  Klicken Sie auf die Schaltfl\u00e4che &#8218;+&#8216;, um ein Feld hinzuzuf\u00fcgen. Ein Feld ist der Name einer Spalte mit Daten. Erstellen Sie vier Felder &#8211; &#8222;Name&#8220;, &#8222;Einkommen&#8220;, &#8222;Kontakt&#8220; und &#8222;Verwaltet von:&#8220;.  <\/li>\n<li><strong>c.<\/strong>  W\u00e4hlen Sie die Art der Daten, die Sie hinzuf\u00fcgen m\u00f6chten. In diesem Beispiel f\u00fcgen Sie nur Text hinzu, also belassen Sie den Typ bei &#8218;Text&#8216;. <\/li>\n<li><strong>d.<\/strong>  Klicken Sie auf &#8218;OK&#8216;, um Ihren Datenstamm zu speichern.<\/li>\n<\/ul>\n<\/li>\n<li>Gehen Sie erneut zur Palette Datenmaster und klicken Sie mit der rechten Maustaste auf den Datenmaster, den Sie gerade erstellt haben. Es wird eine neue Registerkarte angezeigt: &#8218;Datens\u00e4tze anzeigen und bearbeiten&#8216;. <\/li>\n<li>In jedem Datensatz finden Sie den Hinweis &#8222;Beispieltext&#8220;. Klicken Sie auf einen Datensatz, um ihn zu bearbeiten und einige Informationen oder Daten einzugeben. <\/li>\n<li>Klicken Sie auf die Schaltfl\u00e4che &#8218;+&#8216;, um weitere Datens\u00e4tze hinzuzuf\u00fcgen.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44150\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-record.png\" alt=\"Plus-Schaltfl\u00e4che, \u00fcber die Sie den Mauszeiger halten, um einen neuen Datensatz hinzuzuf\u00fcgen\" width=\"1067\" height=\"880\"><br \/>\n Um einen Datensatz zu l\u00f6schen, markieren Sie ihn, indem Sie auf das Kontrollk\u00e4stchen neben ihm klicken, und klicken Sie dann auf die Schaltfl\u00e4che &#8218;L\u00f6schen&#8216;.<\/li>\n<\/ol>\n<h3>Daten importieren<\/h3>\n<p>Sie k\u00f6nnen einen neuen Datenstamm auch direkt aus einer .csv-Datei erstellen:<\/p>\n<p>Sehen Sie sich die Palette Datenmaster an und klicken Sie auf die Schaltfl\u00e4che &#8222;Importieren&#8220;.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44152\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Import-data-csv.png\" alt=\"Schaltfl\u00e4che Importieren hervorgehoben\" width=\"828\" height=\"394\"><br \/>\nEs wird ein neues Dialogfeld angezeigt, in dem Sie Ihren Datenstamm benennen, die .csv-Datei ausw\u00e4hlen und ein Feldbegrenzungszeichen w\u00e4hlen k\u00f6nnen.<\/p>\n<div><strong>Hinweis:<\/strong> Die erste Zeile in Ihrer .csv-Datei wird als Feldname verwendet.<\/div>\n<h2><a id=\"display-data\"><\/a>Daten anzeigen<\/h2>\n<p>Nachdem Sie nun alle Kundeninformationen in einen Datenstamm eingegeben haben, ist es an der Zeit, die Daten auf dem Canvas anzuzeigen. In diesem Beispiel lernen Sie, wie Sie Informationen auf zwei Arten anzeigen k\u00f6nnen: in Kartenform mit mehr Details und in einer kompakten Liste mit weniger Details. <\/p>\n<h3>Datenraster<\/h3>\n<p>Sie beginnen mit der Erstellung eines Kartendisplays:<\/p>\n<ol>\n<li>Gehen Sie zum Dropdown-Men\u00fc der Symbolleiste und suchen Sie den Abschnitt &#8218;Dynamischer Inhalt&#8216;.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44154\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Data-grid.png\" alt=\"Datengitter in der Symbolleiste\" width=\"661\" height=\"414\"><\/li>\n<li>Klicken Sie auf das Datengitter-Widget und es \u00f6ffnet sich ein neues Popup-Fenster:\n<ul class=\"hidden-bullet\">\n<li><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\/Add-fields-to-data-grid.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Add-fields-to-data-grid.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Add-fields-to-data-grid.png\" alt=\"F\u00fcgen Sie der Datentabelle einen Namen hinzu und verschieben Sie die Felder, um sie auszuf\u00fcllen.\"><\/source><\/video><\/li>\n<li><strong>a.<\/strong>  Geben Sie Ihrer Datentabelle einen Namen. Um dem Beispiel zu entsprechen, nennen Sie es &#8222;ClientCard&#8220;. <\/li>\n<li><strong>b.<\/strong>  W\u00e4hlen Sie den Datenstamm &#8218;Kunden&#8216;, den Sie zuvor erstellt haben, um das Datengitter zu f\u00fcllen.<\/li>\n<li><strong>c.<\/strong> Da Sie m\u00f6chten, dass diese Karte mehr Details enth\u00e4lt, werden Sie alle Felder in das Datengitter aufnehmen. Klicken Sie auf die Schaltfl\u00e4che &#8218;&gt;&gt;&#8216;, um alle Felder in das Datengitter zu verschieben.<\/li>\n<li>Klicken Sie auf &#8218;OK&#8216; und platzieren Sie das Datengitter auf dem Canvas.<\/li>\n<\/ul>\n<\/li>\n<li>Schauen Sie sich die Datentabelle genauer an. Sie werden sehen:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44157\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Data-grid-contents.png\" alt=\"Inhalt der Datentabelle erweitert\" width=\"739\" height=\"542\"><\/p>\n<ol class=\"image-bullet\">\n<li>Die Felder, die Sie zuvor genannt haben. Sie sind normale Textelemente. <\/li>\n<li>Die Datens\u00e4tze des Datenstamms. Sie werden in Klammern angezeigt und zeigen w\u00e4hrend der Simulation Daten an. <\/li>\n<\/ol>\n<p>Erweitern Sie den Inhalt des Datengitters in der Ebenen-Palette und Sie werden etwas sehen, das &#8222;Gitterzelle&#8220; genannt wird. Die Gitterzelle dient als Vorschau darauf, wie alle Zellen im Datengitter aussehen werden. Alle \u00c4nderungen, die Sie an dieser Zelle vornehmen, werden auch in allen anderen Zellen angezeigt. <\/p>\n<p>Klicken Sie auf die Schaltfl\u00e4che &#8218;Abspielen&#8216;, um Ihren Prototyp zu simulieren und zu sehen, wie Ihr Datengitter alle Daten anzeigt, die Sie in den Datenstamm eingegeben haben.<\/p>\n<p><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\/Simulate-data-grid.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Simulate-data-grid.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Simulate-data-grid.png\" alt=\"Simulation eines Datengitters\"><\/source><\/video><\/li>\n<li>Da Sie nun wissen, wie ein Datengitter aufgebaut ist, k\u00f6nnen Sie sein Aussehen anpassen:\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> Dr\u00fccken Sie die Taste <kbd>A<\/kbd>, um das Werkzeug Direktauswahl zu aktivieren, mit dem Sie ganz einfach Elemente innerhalb des Datengitters ausw\u00e4hlen k\u00f6nnen.<\/li>\n<li><strong>a.<\/strong>  Markieren Sie die Textelemente &#8222;Name&#8220;, &#8222;Einkommen&#8220; und &#8222;Kontakt&#8220; und l\u00f6schen Sie sie.<\/li>\n<li><strong>b.<\/strong>  Da Sie nun mehr Platz in der Zelle haben, k\u00f6nnen Sie die \u00fcbrigen Textelemente und Datenfelder nach Belieben in der Zelle verschieben.<\/li>\n<li><strong>c.<\/strong> Schalten Sie zur\u00fcck in den normalen Auswahlmodus, indem Sie <kbd>V<\/kbd> dr\u00fccken. Verwenden Sie die Indikatoren, um die Gr\u00f6\u00dfe der Zelle zu \u00e4ndern, damit sie breiter und l\u00e4nger wird.<\/li>\n<li><strong>d.<\/strong> Platzieren Sie zwei Elemente der Schaltfl\u00e4che <kbd>B<\/kbd> in der Gitterzelle und benennen Sie sie &#8222;Bearbeiten&#8220; und &#8222;L\u00f6schen&#8220;. Sie k\u00f6nnen die Elemente mit gedr\u00fcckter <kbd>Befehlstaste<\/kbd> (Mac) oder <kbd>Strg-Taste<\/kbd> (Windows) hineinziehen, um sie sp\u00e4ter zum \u00c4ndern und L\u00f6schen von Kunden aus dem Datenstamm zu verwenden. <\/li>\n<li><strong>e.<\/strong>  W\u00e4hlen Sie das gesamte Datengitter aus und \u00f6ffnen Sie die Palette Eigenschaften. \u00c4ndern Sie die Anzahl der Spalten auf 3 und vergr\u00f6\u00dfern Sie die vertikalen und horizontalen Abst\u00e4nde zwischen den Zellen. <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Sie k\u00f6nnen die Datentabelle weiter anpassen, wie Sie m\u00f6chten. Passend zum Beispiel k\u00f6nnen Sie auch die Schriftfamilie, -gr\u00f6\u00dfe und -farbe sowie die Stile der Schaltfl\u00e4chen \u00e4ndern. <\/p>\n<p>So sieht das Dashboard der Kundenkarte aus, wenn Sie simulieren:<\/p>\n<p><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\/Data-grid-preview.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Data-grid-preview.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Data-grid-preview.png\" alt=\"Die Ansicht der Datengitter-Simulation\"><\/source><\/video><\/p>\n<h3>Datenlisten<\/h3>\n<p>Jetzt erstellen Sie eine kompakte Liste mit Kundeninformationen in Form einer Datenliste:<\/p>\n<ol>\n<li>Sehen Sie sich die Palette Bildschirme an und klicken Sie auf die Schaltfl\u00e4che &#8218;+&#8216;, um einen neuen Bildschirm hinzuzuf\u00fcgen. Nennen Sie ihn &#8222;Bildschirm 2&#8220;.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44163\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-new-screen-data.png\" alt=\"Einen neuen Bildschirm hinzuf\u00fcgen hervorgehoben\" width=\"1181\" height=\"752\"><\/li>\n<li>Gehen Sie zum Dropdown-Men\u00fc der Symbolleiste und suchen Sie den Abschnitt &#8218;Dynamischer Inhalt&#8216;.<\/li>\n<li>Klicken Sie auf das Widget Datenliste und es \u00f6ffnet sich ein Popup-Fenster:\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong>  Benennen Sie die Datenliste &#8222;ClientsList&#8220;.<\/li>\n<li><strong>b.<\/strong>  W\u00e4hlen Sie den Datenstamm &#8222;Kunden&#8220;, um die Datenliste zu f\u00fcllen.<\/li>\n<li><strong>c.<\/strong>  Da Sie diese Kartenanzeige weniger detailliert haben m\u00f6chten, nehmen Sie nur einige der Felder in die Datenliste auf.<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\/Create-data-list.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Create-data-list.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Create-data-list.png\" alt=\"Hinzuf\u00fcgen von Feldern zur Datenliste\"><\/source><\/video>Klicken Sie auf einzelne Felder und klicken Sie auf die Schaltfl\u00e4che &#8218;&gt;&#8216;, um sie in die Datenliste zu verschieben. Um dem Beispiel zu entsprechen, lassen Sie das Feld &#8222;Einkommen&#8220; weg. <\/li>\n<li><strong>d.<\/strong>  Klicken Sie auf &#8218;OK&#8216; und platzieren Sie die Datenliste auf dem Canvas.<\/li>\n<\/ul>\n<\/li>\n<li>Schauen Sie sich die Datenliste genauer an. Sie werden sehen:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44168\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Data-list-contents.png\" alt=\"Ebenen der Datenliste\" width=\"885\" height=\"606\"><\/p>\n<ol class=\"image-bullet\">\n<li>Die Felder, die Sie zuvor genannt haben.<\/li>\n<li>Die Datens\u00e4tze des Datenstamms. Sie werden in Klammern angezeigt und zeigen w\u00e4hrend der Simulation Daten an. <\/li>\n<\/ol>\n<p>Erweitern Sie den Inhalt der Datenliste in der Ebenen-Palette und Sie werden etwas sehen, das &#8222;Aktuelle Zeile&#8220; genannt wird. Wie die Gitterzelle im Datengitter dient die aktuelle Zeile als Vorschau darauf, wie alle Zellen in der Datenliste aussehen werden, und alle \u00c4nderungen, die Sie an dieser Zelle vornehmen, erscheinen auch in allen anderen Zellen. <\/li>\n<li>Klicken Sie auf &#8222;Simulieren&#8220; und sehen Sie, wie Ihre Datenliste aussieht.<\/li>\n<li>Da Sie nun wissen, wie eine Datenliste aufgebaut ist, k\u00f6nnen Sie ihr Aussehen anpassen:\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong>  W\u00e4hlen Sie &#8222;Kopfzeile&#8220; (die Kopfzeile der Datenliste) und sehen Sie sich die Palette Eigenschaften an. \u00c4ndern Sie dort das &#8218;Layout&#8216; auf horizontal mit zentrierter Ausrichtung.<br \/>\nW\u00e4hlen Sie die aktuelle Zeile aus und ziehen Sie sie mit Hilfe der angezeigten Indikatoren nach unten, wodurch die Zeilen in der Datenliste vergr\u00f6\u00dfert werden. \u00c4ndern Sie das &#8218;Layout&#8216; auf horizontal mit zentrierter Ausrichtung.  <\/li>\n<li><strong>b.<\/strong>  W\u00e4hlen Sie die gesamte Datenliste aus und sehen Sie sich die Palette Eigenschaften an. \u00c4ndern Sie die Farben der ungeraden\/geraden Zeilen in transparent. <\/li>\n<li><strong>c.<\/strong>  Klicken Sie mit der rechten Maustaste auf die Datenliste und w\u00e4hlen Sie &#8222;Neue Spalte&#8220;.<\/li>\n<li><strong>d.<\/strong> Verwenden Sie das Direktauswahl-Werkzeug <kbd>A<\/kbd>, um zwei <kbd>Textelemente<\/kbd>in der Zelle der Zeile zu platzieren und eines mit &#8222;Bearbeiten&#8220; und das andere mit &#8222;L\u00f6schen&#8220; zu beschriften. Sie werden diese sp\u00e4ter zum \u00c4ndern und L\u00f6schen von Kunden aus dem Datenstamm verwenden. <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Sie k\u00f6nnen die Datenliste weiter anpassen, wie Sie m\u00f6chten. Um dem Beispiel zu entsprechen, k\u00f6nnen Sie auch die Schriftfamilie, Gr\u00f6\u00dfe und Farbe des Textes \u00e4ndern und einige der R\u00e4nder entfernen. <\/p>\n<p>So sieht das Dashboard Kundenliste aus, wenn Sie simulieren:<\/p>\n<p><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\/2023\/01\/Data-list-preview.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2023\/01\/Data-list-preview.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2023\/01\/Data-list-preview.png\" alt=\"Die Ansicht der Datengitter-Simulation\"><\/source><\/video><\/p>\n<h2><a id=\"modify-data\"><\/a>Daten \u00e4ndern<\/h2>\n<p>Bisher haben Sie das Aussehen der Kundeninformationen auf verschiedene Weise erstellt und angepasst. Jetzt lernen Sie, wie Sie Datens\u00e4tze aus diesen Listen hinzuf\u00fcgen, bearbeiten und l\u00f6schen k\u00f6nnen. <\/p>\n<ol>\n<li>Zun\u00e4chst m\u00fcssen Sie einen neuen Bildschirm erstellen. Nennen Sie ihn &#8222;Karte bearbeiten&#8220; &#8211; auf diesem Bildschirm werden Sie die Informationen eines ausgew\u00e4hlten Kunden bearbeiten. <\/li>\n<li>Ziehen Sie vier Eingabe-Textfelder <kbd>F<\/kbd> auf den Canvas. F\u00fcgen Sie eine Schaltfl\u00e4che unterhalb des Formulars hinzu und nennen Sie sie &#8222;\u00c4ndern&#8220;. F\u00fcgen Sie daneben eine weitere Schaltfl\u00e4che hinzu und nennen Sie sie &#8222;Abbrechen&#8220;. Passen Sie das Aussehen des Formulars nach Belieben an.   <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44174\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Modify-form.png\" alt=\"Das \u00c4nderungsformular mit vier Textfeldern und zwei Schaltfl\u00e4chen\" width=\"1020\" height=\"682\"><\/li>\n<li>Klicken Sie mit der rechten Maustaste auf diesen Bildschirm in der Palette &#8222;Bildschirme&#8220; und klicken Sie auf &#8222;Duplizieren&#8220;. Nennen Sie diesen Bildschirm &#8222;Neue Karte&#8220;. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44176\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Duplicate-screen.png\" alt=\"Klicken Sie mit der rechten Maustaste auf einen Bildschirm, um Optionen zum Duplizieren anzuzeigen\" width=\"1072\" height=\"746\">  Behalten Sie alles auf diesem Bildschirm bei, aber \u00e4ndern Sie die Schaltfl\u00e4che in &#8222;Hinzuf\u00fcgen&#8220; anstelle von &#8222;\u00c4ndern&#8220;.<\/li>\n<\/ol>\n<h3>Neue Kundendatens\u00e4tze hinzuf\u00fcgen<\/h3>\n<p>In diesem Abschnitt erfahren Sie, wie Sie neue Datens\u00e4tze zu einem Datenstamm hinzuf\u00fcgen.<\/p>\n<ol>\n<li>Gehen Sie zum Bildschirm Card Dashboard und platzieren Sie ein Schaltfl\u00e4chenelement auf dem Canvas und nennen Sie es &#8222;Neu&#8220;.<\/li>\n<li>Wenn diese Schaltfl\u00e4che ausgew\u00e4hlt ist, erstellen Sie ein Ereignis <strong>Bei Klick<\/strong> + <strong>Navigieren zu<\/strong>, das mit dem Bildschirm &#8222;Neuer Kunde&#8220; verkn\u00fcpft ist, den Sie zuvor erstellt haben.<\/li>\n<li>Gehen Sie zum Bildschirm Neuer Kunde und w\u00e4hlen Sie die Schaltfl\u00e4che &#8222;Hinzuf\u00fcgen&#8220;. Erstellen Sie ein Ereignis <strong>On Click<\/strong> + <strong>Data Master Action<\/strong>. Klicken Sie auf die Schaltfl\u00e4che &#8222;Neu&#8220; und Sie sehen den Value Expression Builder, der die Struktur des Ereignisses Data Master Action &#8211; New darstellt:  <\/li>\n<\/ol>\n<ul>\n<li>Jedes &#8218;Feld&#8216; im Datenstamm.<\/li>\n<li>Die Werte, die zum Datenstamm hinzugef\u00fcgt werden und sich in der Datenliste und dem Datengitter widerspiegeln werden.<\/li>\n<li>Ziehen Sie die entsprechenden Eingabefelder auf die freien Stellen im Ausdruck und klicken Sie auf &#8218;OK&#8216;.<\/li>\n<\/ul>\n<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/744897674?h=a679248f19\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ul>\n<li>Wenn die Schaltfl\u00e4che &#8222;Hinzuf\u00fcgen&#8220; noch immer ausgew\u00e4hlt ist, erstellen Sie ein Ereignis <strong>&#8222;Bei Klick<\/strong> + <strong>Navigieren zu&#8220;<\/strong>, wobei Sie das Optionsfeld &#8222;Vorheriger Bildschirm&#8220; als Linkziel ausw\u00e4hlen.<\/li>\n<li>W\u00e4hlen Sie die Schaltfl\u00e4che &#8222;Abbrechen&#8220; und erstellen Sie das gleiche Ereignis wie im letzten Schritt.<\/li>\n<li>Gehen Sie zum Bildschirm &#8222;List Dashboard&#8220; und platzieren Sie eine Schaltfl\u00e4che auf dem Canvas, die Sie mit &#8222;Neu&#8220; beschriften. Erstellen Sie f\u00fcr diese Schaltfl\u00e4che ein Ereignis <strong>&#8222;Bei Klick<\/strong> + <strong>Navigieren zu&#8220;<\/strong>, das auf den Bildschirm &#8222;Neuer Kunde&#8220; verweist. <\/li>\n<\/ul>\n<p>Beide Bildschirme sollten nun mit dem Bereich verkn\u00fcpft sein, in dem Sie neue Informationen zum Datenstamm hinzuf\u00fcgen k\u00f6nnen. Klicken Sie auf die Schaltfl\u00e4che &#8222;Abspielen&#8220;, um Ihren Prototyp zu simulieren. Tippen Sie auf die Schaltfl\u00e4che &#8222;Neu&#8220;, die Sie mit dem Bildschirm &#8222;Neuer Kunde&#8220; verbindet. Geben Sie einige Informationen in das Formular ein und tippen Sie auf &#8222;Hinzuf\u00fcgen&#8220;. Sie sehen, dass ein neuer Datensatz zur Karte hinzugef\u00fcgt wurde.    <\/p>\n<h2>Kundendatens\u00e4tze \u00e4ndern<\/h2>\n<p>Um die Kundendatens\u00e4tze zu bearbeiten, ben\u00f6tigen Sie eine M\u00f6glichkeit, eine bestimmte Zeile auszuw\u00e4hlen, die Sie \u00e4ndern m\u00f6chten. Sie verwenden die speziellen Funktionen &#8222;Aktuelle Zeile&#8220; (in Datenlisten) und &#8222;Gitterzelle&#8220; (in Datenrastern), um eine Zeile auszuw\u00e4hlen &#8211; sie k\u00f6nnen die Zeile erkennen, mit der Sie w\u00e4hrend der Simulation interagieren. <\/p>\n<p>Nachdem Sie eine Zeile ausgew\u00e4hlt haben, m\u00fcssen Sie die Informationen dieser Zeile irgendwo speichern, damit Sie sie zur Bearbeitung in ein Textfeld eingeben k\u00f6nnen. In diesem Beispiel verwenden Sie eine Variable, die ganze Zeilen mit Kundeninformationen auf einmal speichern kann. <\/p>\n<ol>\n<li>\u00d6ffnen Sie die Palette Variablen und erstellen Sie eine Variable namens &#8222;SelectedRow&#8220; mit einem leeren Standardwert.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44191\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-new-variable-data.png\" alt=\"Variable in der Variablenpalette hinzugef\u00fcgt\" width=\"1353\" height=\"575\">  Wenn Sie die Palette Variablen nicht sehen, vergewissern Sie sich, dass sie im Men\u00fc Fenster sichtbar ist.<\/li>\n<li>Gehen Sie zum Bildschirm Card Dashboard und w\u00e4hlen Sie die Schaltfl\u00e4che &#8222;Bearbeiten&#8220;, die Sie zuvor in der Gitterzelle platziert haben.<\/li>\n<li>Erstellen Sie ein Ereignis <strong>&#8222;Bei Klick<\/strong> + <strong>Wert setzen<\/strong> &#8220; und w\u00e4hlen Sie die Variable SelectedRow als Ziel der Aktion aus. f\u00fcr den Wert klicken Sie auf &#8222;Berechnet&#8220; und den Textlink &#8222;Ausdruck hinzuf\u00fcgen&#8220;.<\/li>\n<li>Es erscheint der Value Expression Builder. Ziehen Sie die Gitterzelle auf den freien Platz im Ausdruck. Es kann einfacher sein, die Zelle in den Ebenen des Builders auszuw\u00e4hlen und zu ziehen als in der Canvas-Vorschau. Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ausdrucks abzuschlie\u00dfen. Dieses Ereignis \u00fcbertr\u00e4gt die Werte der Karte, auf die Sie gerade geklickt haben, in die Variable.   <\/li>\n<li>Gehen Sie zur\u00fcck zur Palette Ereignisse, um das Ereignis zu sehen, das Sie gerade erstellt haben. F\u00fcgen Sie ein Ereignis <strong>Bei Klick<\/strong> + <strong>Navigieren zu<\/strong> f\u00fcr die Schaltfl\u00e4che &#8222;Bearbeiten&#8220; hinzu, das auf den Bildschirm &#8222;Client bearbeiten&#8220; verweist. <\/li>\n<li>Rufen Sie den Bildschirm Client bearbeiten auf. Doppelklicken Sie auf den Canvas, um den Basisbildschirm auszuw\u00e4hlen. <\/li>\n<li>Erstellen Sie ein Ereignis <strong>&#8222;On Page Load<\/strong> + <strong>Set Value<\/strong> &#8220; und w\u00e4hlen Sie das Eingabefeld &#8222;Name&#8220; als Ziel der Aktion. Klicken Sie f\u00fcr den Wert auf &#8222;Berechnet&#8220; und dann auf &#8222;Ausdruck hinzuf\u00fcgen&#8220;. Sie sehen den Value Expression Builder. Um den Ausdruck zu erstellen:   <\/li>\n<\/ol>\n<ul>\n<li>Ziehen Sie die Funktion <strong>Ausw\u00e4hlen<\/strong> auf den freien Platz im Ausdruck.<\/li>\n<li>Sie werden sehen, dass zwei neue Leerzeichen in dem Ausdruck erscheinen. Ziehen Sie die &#8222;SelectedRow&#8220; auf das Feld auf der linken Seite. <\/li>\n<li>Klicken Sie im Builder auf die Registerkarte Datenst\u00e4mme und erweitern Sie den Datenstamm, so dass Sie die Attribute (die Datenstammfelder) sehen k\u00f6nnen. ziehen Sie das Attribut &#8222;Name&#8220; auf das zweite Feld im Ausdruck.<\/li>\n<\/ul>\n<p>Wiederholen Sie die Schritte 6 und 7 f\u00fcr die anderen Eingabetextfelder und stellen Sie sicher, dass Sie jedes Mal das Ziel der Aktion und das Attribut im Ausdruck \u00e4ndern.<\/p>\n<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/744901851?h=3736e734a9\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ol>\n<li>Jetzt erstellen Sie die Ereignisse zum \u00c4ndern der Kundendaten. W\u00e4hlen Sie die Schaltfl\u00e4che &#8222;\u00c4ndern&#8220; am unteren Rand des Formulars und erstellen Sie ein Ereignis <strong>&#8222;Bei Klick<\/strong> + <strong>Data Master Action<\/strong> &#8211; <strong>\u00c4ndern<\/strong> &#8222;. Damit \u00f6ffnen Sie den Value Expression Builder, der Ihnen zeigt, wie dieses Ereignis funktioniert:\n<ul class=\"hidden-bullet\">\n<li>Der offene Bereich, in dem Sie die Zeile definieren, die ge\u00e4ndert werden soll.<\/li>\n<li>Die freien Felder, in denen Sie die Informationen angeben, die im Datenstamm ge\u00e4ndert werden sollen.<\/li>\n<\/ul>\n<\/li>\n<li>Setzen Sie die Variable SelectedRow in das erste freie Feld auf der linken Seite. Ziehen Sie die entsprechenden Eingabetextfelder auf die freien Felder im Ausdruck und klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ereignisses abzuschlie\u00dfen. <\/li>\n<li>Zur\u00fcck auf der Leinwand und mit der Schaltfl\u00e4che &#8222;\u00c4ndern&#8220; immer noch ausgew\u00e4hlt, erstellen Sie ein Ereignis <strong>&#8222;Bei Klick<\/strong> + <strong>Navigieren zu&#8220;<\/strong> und w\u00e4hlen das Optionsfeld &#8222;Vorheriger Bildschirm&#8220;.<\/li>\n<li>W\u00e4hlen Sie die Schaltfl\u00e4che &#8222;Abbrechen&#8220; und erstellen Sie ein Ereignis <strong>&#8222;Bei Klick<\/strong> + <strong>Navigieren zu&#8220;<\/strong>, indem Sie das Optionsfeld &#8222;Vorheriger Bildschirm&#8220; ausw\u00e4hlen.<\/li>\n<li>Wiederholen Sie die Schritte 2 &#8211; 5 auf dem Bildschirm Liste Dashboard, indem Sie die aktuelle Zeile in den offenen Bereich des Ausdrucks ziehen, wenn Sie den Wert f\u00fcr die Variable SelectedRow festlegen.<\/li>\n<\/ol>\n<p>Klicken Sie auf die Schaltfl\u00e4che &#8222;Abspielen&#8220;, um Ihren Prototyp zu simulieren. Klicken Sie auf die Schaltfl\u00e4che &#8222;Bearbeiten&#8220; in einer der Zeilen, die Sie mit dem Bildschirm &#8222;Client bearbeiten&#8220; verbindet. Geben Sie einige Informationen in das Formular ein und klicken Sie auf &#8222;\u00c4ndern&#8220;. Sie sehen die bearbeiteten Kundeninformationen in der Karte.   <\/p>\n<h2><a id=\"delete-records\"><\/a>Daten l\u00f6schen<\/h2>\n<p>Als n\u00e4chstes erfahren Sie, wie Sie Kundendatens\u00e4tze entfernen k\u00f6nnen.<\/p>\n<ol>\n<li>Gehen Sie zum Bildschirm Card Dashboard. W\u00e4hlen Sie die Schaltfl\u00e4che &#8222;L\u00f6schen&#8220;, die Sie zuvor in die Gitterzelle eingef\u00fcgt haben, und erstellen Sie ein Ereignis <strong>&#8222;Bei Klick<\/strong> + <strong>Data Master Action<\/strong> &#8211; <strong>L\u00f6schen&#8220;<\/strong>. Sie sehen, dass der Value Expression Builder erscheint.  <\/li>\n<li>Schauen Sie sich den Ausdruck genauer an und Sie werden ein freies Feld sehen. Hier geben Sie die Zeile an, die aus dem Datenstamm gel\u00f6scht werden soll. Ziehen Sie die Gitterzelle in das freie Feld des Ausdrucks. Es k\u00f6nnte einfacher sein, sie aus den Dialogebenen auszuw\u00e4hlen.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44182\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Delete-action-1.png\" alt=\"Rasterzelle im Ausdruck\" width=\"1089\" height=\"574\"><br \/>\nAufgrund der besonderen Funktionalit\u00e4t der Gitterzelle (und der aktuellen Zeile) wird die <strong>Data Master Action<\/strong> nur die Zeile l\u00f6schen, in der Sie auf die Schaltfl\u00e4che &#8222;L\u00f6schen&#8220; klicken.<\/li>\n<li>Wiederholen Sie die Schritte 1 und 2 auf dem Bildschirm Liste Dashboard. Ziehen Sie diesmal die aktuelle Zeile der Datenliste in den freien Platz im Ausdruck.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44184\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Delete-action-list.png\" alt=\"Aktuelle Zeile im Ausdruck\" width=\"1086\" height=\"499\"><\/li>\n<\/ol>\n<h3>Letzte Schritte<\/h3>\n<p>Sie sind fast fertig! Sie brauchen nur noch eine M\u00f6glichkeit, zwischen den Bildschirmen Card und List Dashboard zu wechseln, damit Sie sehen k\u00f6nnen, wie Ihre \u00c4nderungen in den verschiedenen Bildschirmen beibehalten werden. <\/p>\n<ol>\n<li>Platzieren Sie zwei Bilder <kbd>I<\/kbd> auf dem Bildschirm Card Dashboard. Das eine wird den Bildschirm Card Dashboard darstellen, das andere den Bildschirm List Dashboard. <\/li>\n<li>Erstellen Sie ein Ereignis <strong>Bei Klick<\/strong> + <strong>Navigieren zu<\/strong> auf dem Bild f\u00fcr das List Dashboard und verlinken Sie es mit dem Bildschirm List Dashboard.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44187\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Link-image-dashboard.png\" alt=\"Link zum Dashboard der Liste\" width=\"776\" height=\"308\"><\/li>\n<li>Wiederholen Sie die obigen Schritte auf dem Bildschirm List Dashboard und verkn\u00fcpfen Sie das Bild f\u00fcr das Card Dashboard mit dem Bildschirm Card Dashboard.<\/li>\n<\/ol>\n<p>Das war&#8217;s! Klicken Sie auf die Schaltfl\u00e4che &#8218;Play&#8216;, um Ihren Prototyp zu simulieren und zu sehen, wie Sie Kundendatens\u00e4tze bearbeiten, hinzuf\u00fcgen und l\u00f6schen k\u00f6nnen. <\/p>\n<p><a href=\"https:\/\/download.justinmind.com\/examples\/create-a-justinmind-datamaster.vp\">Sie k\u00f6nnen das Beispiel hier herunterladen.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Stellen Sie sich vor, Sie erstellen einen Prototyp f\u00fcr eine Anwendung zur Verwaltung von Kunden in Ihrem Unternehmen. Da Ihr Unternehmen viele Kunden hat, brauchen Sie&#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,8558],"tags":[],"class_list":["post-129057","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-formulare-und-daten-de"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129057"}],"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=129057"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129057\/revisions"}],"predecessor-version":[{"id":129220,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129057\/revisions\/129220"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129057"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129057"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}