{"id":55000159,"date":"2018-12-01T00:00:00","date_gmt":"2020-03-27T19:35:25","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=159"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"PowerApps_Artikel_verwalten","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/PowerApps_Artikel_verwalten\/","title":{"rendered":"PowerApps: Artikel verwalten"},"content":{"rendered":"

In den vorherigen Artikeln haben wir uns schon eine PowerApp anhand einer Vorlage angesehen und eine kleine, an die Daten einer Tabelle gebundene PowerApp programmiert. Nun gehen wir einen Schritt weiter und erstellen eine PowerApp mit den für die Anzeige von Daten wichtigen Steuerelementen und zeigen, wie Sie die Steuer-elemente mit Daten füllen, zwischen verschiedenen Seiten navigieren und Daten anlegen, bearbeiten oder auch löschen.<\/b><\/p>\n

Voraussetzungen<\/h2>\n

Um die Beispiele dieses Artikels nachvollziehen zu können, benötigen Sie eine SQL Server-, MySQL- oder PostgreSQL-Datenbank, die über das Internet erreichbar ist. Sie können dazu eine Datenbank von einem Webserver nehmen, den Sie selbst betreiben oder auch einen Microsoft Azure-Account mit einer SQL Server-Datenbank anlegen (siehe auch im Artikel SQL Server-Datenbank ins Web mit SQL Azure<\/b>).<\/p>\n

Außerdem setzen wir auf der PowerApp auf, die wir im Artikel PowerApp mit Datenbank erstellen angelegt <\/b>haben. Dort haben wir der PowerApp zum Beispiel einige Tabellen der Datenbank Suedsturm_SQL <\/b>eines SQL Servers hinzugefügt. Den Start machen wir über die Webseite powerapps.microsoft.com<\/b>, wo Sie sich mit Ihren Zugangsdaten einloggen und die gewünschte Anwendung aufrufen oder neu anlegen.<\/p>\n

Liste erstellen<\/h2>\n

Wir beginnen mit einer ersten Seite, die eine Liste von Elementen einer unserer Tabellen enthalten soll. Dazu wählen wie in der Entwicklungsumgebung unter Einfügen <\/b>den Eintrag Neuer Bildschirm|Liste <\/b>aus (siehe Bild 1).<\/p>\n

\"Einfacher<\/p>\n

Bild 1: Einfacher Link<\/span><\/b><\/p>\n

Danach zeigt die Entwicklungsumgebung, die wir uns hier nochmal genauer anschauen, die neue Seite direkt mit den von der Vorlage vorgesehenen Elementen an (siehe Bild 2). Diese sehen wir im mittleren Bereich. Die einzelnen Elemente dieser Seite finden wir im Bereich links unter Screen2<\/b>. Das Element BrowseGallery1<\/b> ist das eigentliche Element zur Anzeige mehrerer Datensätze der Datenquelle, das im Prinzip wie eine Art Endlosformular wie unter Access arbeitet. Die Anzeige im Entwurf ist etwas irreführend, denn eigentlich enthält das Steuer-element jedes der abgebildeten untergeordneten Steuer-elemente nur einmal. Hier werden allerdings direkt Platzhalterdaten abgebildet.<\/p>\n

\"Neue<\/p>\n

Bild 2: Neue Seite in der Entwicklungsumgebung<\/span><\/b><\/p>\n

Wenn Sie auf der linken Seite BrowseGallery1 <\/b>aufklappen, finden Sie die für ein Element dieser Endlosansicht angelegten Steuer-elemente (siehe Bild 3) – einen Separator, ein Image, eine Schaltfläche sowie zwei Bezeichnungsfelder für Texte aus der Datenquelle.<\/p>\n

\"Untersuchen<\/p>\n

Bild 3: Untersuchen der einzelnen Elemente der Gallery<\/span><\/b><\/p>\n

Hier können wir uns schon einiges abschauen, aber wir wollen mit einer komplett leeren Seite beginnen. Dazu fügen wir eine neue Seite hinzu, die wir diesmal auf Basis der Formularvorlage Leer <\/b>erstellen. Dementsprechend ist die Seite auch komplett leer. Wir wollen eine Übersicht aller Artikelnamen anzeigen, für die es oben ein Textfeld für eine Schnellsuche gibt. Dieses soll nach der Eingabe eines jeden Zeichens das Suchergebnis filtern.<\/p>\n

Dazu fügen wir der neuen Seite, die wir zuvor in Artikel-uebersicht <\/b>umbenennen, als Erstes ein leeres Katalog-Element hinzu, das wir im Bereich Einfügen <\/b>unter Katalog|Leerzeichen vertikal <\/b>vorfinden (siehe Bild 4).<\/p>\n

\"Einfügen<\/p>\n

Bild 4: Einfügen eines leeren Katalogs mit vertikalen Elementen<\/span><\/b><\/p>\n

Danach legen wir noch ein Bezeichnungsfeld namens lblSuche <\/b>und ein Textfeld namens txtSuche<\/b> über dem Katalog-Element namens galArtikel <\/b>an (siehe Bild 5).<\/p>\n

\"Steuer-elemente<\/p>\n

Bild 5: Steuer-elemente für die Artikelübersicht<\/span><\/b><\/p>\n

Datenquelle für den Katalog hinzufügen<\/h2>\n

Die Datenquelle fügen wir nun hinzu, indem wir das Katalog-Element markieren und dann rechts in den Eigenschaften die gewünschte Tabelle auswählen – in diesem Fall tblArtikel<\/b> (siehe Bild 6). Dies legt auch noch den Wert der Eigenschaft Items <\/b>im Bereich Daten <\/b>der Registerseite Erweitert <\/b>auf ”[dbo].[tblArtikel]” <\/b>fest.<\/p>\n

\"Auswahl<\/p>\n

Bild 6: Auswahl der Datenquelle<\/span><\/b><\/p>\n

Dann fügen wir bei markiertem Katalog-Element ein weiteres Bezeichnungsfeld hinzu, dass dann in das Katalog-Element eingefügt wird. Das Bezeichnungsfeld kann – im Gegensatz zu Access – auch an eine Datenherkunft gebunden werden und dient so etwa zur Anzeige von gebundenen Werten, die aktuell nicht vom Benutzer bearbeitet werden sollen. Dazu würden wir dann das Textfeld nutzen. Es geschieht etwas Überraschendes: Sobald wir im Bereich Einfügen <\/b>auf das Element Bezeichnung <\/b>geklickt haben, um dieses hinzuzufügen, enthält dieses bereits die Werte des Feldes Artikelname <\/b>der Tabelle tblArtikel<\/b>!<\/p>\n

Diese Anzeige sieht, nachdem wir die Höhe des obersten Bereichs des Katalog-Elements etwas verkleinert haben, etwa wie in Bild 7 aus. Offensichtlich hat die Entwicklungsumgebung das erste Textfeld der Datenquelle ermittelt und dieses als Datenherkunft für das Bezeichnungsfeld eingestellt. Schauen wir also nach, welche Eigenschaft mit einem entsprechenden Wert ausgestattet wurde.<\/p>\n

\"Anzeige<\/p>\n

Bild 7: Anzeige der Daten in der Vorschau<\/span><\/b><\/p>\n

Die passende Eigenschaft finden wir dann auf der Seite Erweitert <\/b>der Eigenschaften des Bezeichnungsfeldes. Die Bindung erfolgt über die Eigenschaft Text<\/b>, der automatisch der Wert ThisItem.Artikelname <\/b>zugewiesen wurde (siehe Bild 8). ThisItem <\/b>referenziert dabei offensichtlich die für die Eigenschaft Elemente <\/b>des Katalog-Steuerelements angegebene Datenquelle.<\/p>\n

\"Eigenschaft<\/p>\n

Bild 8: Eigenschaft zum Einstellen der Datenherkunft eines Steuerelements<\/span><\/b><\/p>\n

Suche hinzufügen<\/h2>\n

Nun wollen wir das Such-Textfeld in die Anzeige der Daten im Katalog-Steuerelement einbinden. Dazu müssen wir den Wert der Eigenschaft Items <\/b>des Katalog-Steuerelements anpassen. Bisher hat diese Eigenschaft den Wert ”[dbo].[tblArtikel]”<\/b>.<\/p>\n

Nun haben PowerApps einen speziellen Dialog von Ausdrücken und Funktionen, die am ehesten mit denen von Excel zu vergleichen sind. Diese können Sie einfach auswählen, wenn Sie die Eigenschaft Items <\/b>markieren und dann auf die rechts davon erscheinende Schaltfläche mit dem Funktions-Icon klicken. Es erscheint dann links daneben ein Bereich zur Auswahl der zur Verfügung stehenden Funktionen. Hier wählen wir oben den Eintrag Tabelle <\/b>aus und scrollen dann zur Funktion Search <\/b>(siehe Bild 9).<\/p>\n

\"Auswählen<\/p>\n

Bild 9: Auswählen einer Funktion zum Suchen von Daten<\/span><\/b><\/p>\n

Klicken wir doppelt auf diesen Eintrag, wird der erste Teil der Funktion schon einmal in die Eigenschaft Items <\/b>eingetragen (siehe Bild 10). Außerdem erscheint direkt ein Popup mit Vorschlägen für den ersten Parameter, für den wir die Tabelle dbo.tblArtikel <\/b>auswählen. Die Search<\/b>-Funktion erwartet mindestens drei Parameter:<\/p>\n

\"Eingabe<\/p>\n

Bild 10: Eingabe der Funktionsparameter<\/span><\/b><\/p>\n