PowerApps: Artikel verwalten

Wenn Sie ein Abonnement des Magazins 'DATENBANKENTWICKLER' besitzen, können Sie sich anmelden und den kompletten Artikel lesen.
Anderenfalls können Sie das Abonnement hier im Shop erwerben.

PowerApps: Artikel verwalten

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).

Einfacher Link

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.

Neue Seite in der Entwicklungsumgebung

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.

Untersuchen der einzelnen Elemente der Gallery

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).

Einfügen eines leeren Katalogs mit vertikalen Elementen

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).

Steuer­elemente für die Artikelübersicht

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.

Auswahl der Datenquelle

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.

Anzeige der Daten in der Vorschau

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.

Eigenschaft zum Einstellen der Datenherkunft eines Steuerelements

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).

Auswählen einer Funktion zum Suchen von Daten

Bild 9: Auswählen einer Funktion zum Suchen von Daten

Klicken wir doppelt auf diesen Eintrag, wird der erste Teil der Funktion schon einmal in die Eigenschaft Items 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 auswählen. Die Search-Funktion erwartet mindestens drei Parameter:

Eingabe der Funktionsparameter

Bild 10: Eingabe der Funktionsparameter

  • Name der Datenquelle, hier '[dbo].[tblArtikel]'
  • Steuer­element, das den Vergleichswert liefert. Dabei muss auch die Eigenschaft angegeben werden, die den Wert liefert, in diesem Fall also etwa txtSuche.Text.
  • Schließlich folgen ein oder mehrere Felder der Tabelle, in denen nach dem mit dem zweiten Parameter angegebenen Wert gesucht werden soll.

Unser Suchausdruck sieht nun wie folgt aus (siehe Bild 11):

Leeres Suchergebnis

Bild 11: Leeres Suchergebnis

Search('[dbo].[tblArtikel]';txtSuche.Text;"Artikelname")

Warum aber sind nach der Eingabe dieses Ausdrucks plötzlich alle Einträge des Katalog-Elements leer? Die Lösung ist einfach: Für das Textfeld ist der Standardwert Texteingabe festgelegt. Wenn Sie doppelt in das Textfeld klicken und dieses leeren, erscheinen auch alle Einträge der Tabelle tblArtikel wieder (siehe Bild 12).

Leeres Suchfeld

Bild 12: Leeres Suchfeld

Wenn wir nun einen Suchbegriff eingeben, wird die Liste der Artikel auch direkt gefiltert (siehe Bild 13).

Suchergebnisse

Bild 13: Suchergebnisse

Damit demnächst immer direkt alle Einträge angezeigt werden, leeren Sie die Eigenschaft Default des Steuerelements txtSuche am besten noch. Das funktioniert allerdings nicht durch vollständiges Leeren, sondern Sie müssen eine leere Zeichenkette ("") für diese Eigenschaft eintragen.

Suchfunktion auf dem Smartphone testen

Das wollen wir nun auf dem Smartphone ausprobieren. Auf diesem muss dazu die App PowerApps installiert sein, außerdem melden Sie sich unter den gleichen Daten an, unter denen Sie auch die PowerApp erstellt haben.

Bevor wir zum Smartphone wechseln, müssen wir allerdings noch folgende Schritte durchführen:

  • Unter Umständen ist die neu erstellte Seite nicht die erste Seite in der Liste der Seiten. In diesem Fall bewegen Sie diese mit dem Kontextmenü-Befehl Nach oben an die erste Position.
  • Danach müssen wir die App noch speichern. Das gelingt ganz einfach mit dem Befehl Datei|Speichern.
  • Schließlich veröffentlichen Sie die PowerApp noch mit der Schaltfläche Veröffentlichen, die nach dem Speichern im gleichen Bereich erscheint.

Danach können Sie die Anwendung in der PowerApps-App auf Ihrem Smartphone öffnen – und sie funktioniert wie gewünscht! Ich finde das ein sehr bemerkenswertes Ergebnis gemessen daran, dass wir – wenn die Schritte etwas eingeübt sind – wohl nur wenige Minuten für die Erstellung dieser App benötigen werden.

Wenn Sie kein Smartphone zur Hand haben, können Sie die App übrigens auch direkt auf dem Rechner ausprobieren. Dazu klicken Sie auf der Übersichtsseite für die PowerApps einfach auf den Eintrag mit dem Namen der zu testenden App.

Details anzeigen

Als nächstes wollen wir der Katalog-Seite Elemente hinzufügen, die es dem Benutzer ermöglichen, die Details zu jedem der angezeigten Datensätze zu öffnen. Dazu brauchen wir natürlich nicht nur eine entsprechende Schaltfläche je Eintrag, sondern auch noch eine Seite zur Anzeige der Details. Diese wollen wir zuerst erstellen.

Dazu fügen wir über den Befehl Einfügen|Neuer Bildschirm einen weiteren neuen Bildschirm hinzu, wieder mit der Vorlage Leer. Diese Seite nennen wir Artikeldetails.

Dann fügen wir über den Menüeintrag Formulare|Anzeige ein Formular zur Seite hinzu, das die Anzeige der Details zum gewählten Artikel erlauben soll. Auch dieses zeigt wieder an, dass es noch mit Daten verbunden werden muss. Also wählen wir als Datenquelle wieder die Tabelle [dbo].[tblArtikel] aus (siehe Bild 14) und klicken auf die Schaltfläche Verbinden.

Hinzufügen der Daten zum Formular

Bild 14: Hinzufügen der Daten zum Formular

Danach wird es richtig komfortabel: Für die Eigenschaft Felder finden Sie einen Link namens Felder bearbeiten (siehe Bild 15). Klicken Sie auf diesen Link, erscheint links davon ein neuer Bereich namens Felder. Hier klicken Sie auf den Link Feld hinzufügen, um eine Liste aller Felder der unter Datenquelle angegebenen Tabelle anzuzeigen. Sie können diese dann bequem anhaken.

Dies war die Leseprobe dieses Artikels.
Melden Sie sich an, um auf den vollständigen Artikel zuzugreifen.

Bitte geben Sie die Zeichenfolge in das nachfolgende Textfeld ein

Die mit einem * markierten Felder sind Pflichtfelder.

Neues aus unseren Magazinen
Listenfeld: Reihenfolge mehrerer Einträge...

Wir haben bereits in mehreren Beiträgen beschrieben, wie Sie die individuelle Reihenfolge von Elementen einer Tabelle über den Inhalt eines Feldes etwa namens »ReihenfolgeID« einstellen können –... [mehr]

Diagramme mit gefilterten Daten

In Ausgabe 2/2019 haben wir in zwei Artikeln die modernen Diagramme von Access vorgestellt. Im vorliegenen Beitrag zeigen wir Ihnen, wie Sie diese abhängig von den in einem Formular angezeigten... [mehr]

Benutzerverwaltung mit verschlüsselten...

Wenn Sie in einer Access-Anwendung Benutzer verwalten wollen, die sich per Benutzername und Kennwort an die Anwendung anmelden, sollten Sie sehr sensibel mit den in der Anwendung gespeicherten... [mehr]

HTML-Tabellen mit fester Kopfzeile

In den vorherigen Ausgaben von Access im Unternehmen und in der aktuellen Ausgabe arbeiten wir in einigen Beiträgen mit dem Webbrowser-Steuerelement und stellen Daten, die wir mit den Bordmitteln... [mehr]

Flexible HTML-Tabellen mit fester Kopfzeile

Im Beitrag »HTML-Tabellen mit fester Kopfzeile« haben wir gezeigt, wie Sie Daten aus einer bestimmten Abfrage in einem Webbrowser-Steuerelement so anzeigen, dass die Spaltenköpfe oben fixiert... [mehr]

Berechtigungen per HTML verwalten

Im Beitrag »Benutzerverwaltung mit verschlüsselten Kennwörtern« stellen wir eine Lösung vor, in der wir die Berechtigungen von Benutzergruppen an Datenbankobjekten definieren. Dort benötigen wir... [mehr]

Benutzer und Berechtigungen ermitteln

In den Beiträgen »Benutzerverwaltung mit verschlüsselten Kennwörtern« und »Berechtigungen per HTML verwalten« haben wir die Voraussetzungen für eine Benutzerverwaltung geschaffen. Im vorliegenden... [mehr]

Zugriffsrechte mit Datenmakros

Es gibt verschiedene Möglichkeiten, auf Basis des aktuell angemeldeten Benutzers sicherzustellen, dass dieser nur die für ihn vorgesehenen Aktionen mit Daten durchführen darf – beispielsweise durch... [mehr]

Kennwörter generieren

Für den einen oder anderen Zweck möchten Sie vielleicht Kennwörter generieren oder in einer Benutzeroberfläche die Möglichkeit zum Generieren von Kennwörtern anbieten. Wenn Sie etwa Benutzer zu... [mehr]

Neuer Datensatz von Frontend zu Backend

Für manche Themen gibt es keine kurze, prägnante Überschrift. In diesem Fall wollen wir zeigen, wie Sie einen neuen Datensatz anlegen, der in einer temporären Tabelle im Frontend gespeichert wird,... [mehr]