Lies in den Artikel rein und unten bekommst Du ein unschlagbares Angebot!
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.
Voraussetzungen
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).
Außerdem setzen wir auf der PowerApp auf, die wir im Artikel PowerApp mit Datenbank erstellen angelegt haben. Dort haben wir der PowerApp zum Beispiel einige Tabellen der Datenbank Suedsturm_SQL eines SQL Servers hinzugefügt. Den Start machen wir über die Webseite powerapps.microsoft.com, wo Sie sich mit Ihren Zugangsdaten einloggen und die gewünschte Anwendung aufrufen oder neu anlegen.
Liste erstellen
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 den Eintrag Neuer Bildschirm|Liste aus (siehe Bild 1).
Bild 1: Einfacher Link
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. Das Element BrowseGallery1 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.
Bild 2: Neue Seite in der Entwicklungsumgebung
Wenn Sie auf der linken Seite BrowseGallery1 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.
Bild 3: Untersuchen der einzelnen Elemente der Gallery
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 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.
Dazu fügen wir der neuen Seite, die wir zuvor in Artikel-uebersicht umbenennen, als Erstes ein leeres Katalog-Element hinzu, das wir im Bereich Einfügen unter Katalog|Leerzeichen vertikal vorfinden (siehe Bild 4).
Bild 4: Einfügen eines leeren Katalogs mit vertikalen Elementen
Danach legen wir noch ein Bezeichnungsfeld namens lblSuche und ein Textfeld namens txtSuche über dem Katalog-Element namens galArtikel an (siehe Bild 5).
Bild 5: Steuer-elemente für die Artikelübersicht
Datenquelle für den Katalog hinzufügen
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 (siehe Bild 6). Dies legt auch noch den Wert der Eigenschaft Items im Bereich Daten der Registerseite Erweitert auf ”[dbo].[tblArtikel]” fest.
Bild 6: Auswahl der Datenquelle
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 auf das Element Bezeichnung geklickt haben, um dieses hinzuzufügen, enthält dieses bereits die Werte des Feldes Artikelname der Tabelle tblArtikel!
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.
Bild 7: Anzeige der Daten in der Vorschau
Die passende Eigenschaft finden wir dann auf der Seite Erweitert der Eigenschaften des Bezeichnungsfeldes. Die Bindung erfolgt über die Eigenschaft Text, der automatisch der Wert ThisItem.Artikelname zugewiesen wurde (siehe Bild 8). ThisItem referenziert dabei offensichtlich die für die Eigenschaft Elemente des Katalog-Steuerelements angegebene Datenquelle.
Bild 8: Eigenschaft zum Einstellen der Datenherkunft eines Steuerelements
Suche hinzufügen
Nun wollen wir das Such-Textfeld in die Anzeige der Daten im Katalog-Steuerelement einbinden. Dazu müssen wir den Wert der Eigenschaft Items des Katalog-Steuerelements anpassen. Bisher hat diese Eigenschaft den Wert ”[dbo].[tblArtikel]”.
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 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 aus und scrollen dann zur Funktion Search (siehe Bild 9).