Herzlich willkommen und Moin Moin zu diesem Beitrag in der Videoserie "Power Apps Hacks".
In dieser Serie behandeln wir einen bunten Blumenstrauß an Power Platform Tipps, Tricks und Funktionen.
In diesem Beitrag zeigen wir Euch, wie Ihr mit Power Apps eine Zeilennummerierung innerhalb von Power Apps erzeugen könnt.
Wenn Ihr Ideen für diese Videoreihe habt, hinterlasst uns einfach einen Kommentar unter dem Video!
Im Video stellen wir einen Use Case vor. In diesem Blogbeitrag geben wir dazu nochmal eine Schritt-für-Schritt-Anleitung, wie Ihr alle drei Use Cases nachbauen könnt.
Use Case: Row Number mit Power Apps generieren
Oftmals möchten wir innerhalb unserer Power App eine Art "lokale" Nummerierung für Elemente generieren. In unserem Beispiel haben wir folgenden Anwendungsfall: Wir haben einen Katalog mit 20-25 Fragen. Diese Fragen sind alle verschiedenen Themen zugeordnet. Die einzelnen Themen kommen im Fragenkatalog mehrfach vor. Es gibt insgesamt 13 verschiedene Themen. Innerhalb unserer Power App Anwendung wollen wir den Fragenkatalog nach Themenblöcken "abarbeiten" können. Dabei sollen immer nur die Fragen angezeigt werden, die zum aktuellen Themenblock gehören.
Galerie für die Fragen erstellen
Im ersten Schritt erstellen wir eine Galerie "galFragen", in der wir unsere späteren Fragen ausgeben wollen.
In diese Galerie fügen wir unsere Datenquelle für den Fragenkatalog ein und formatieren die Ausgabe nach Belieben z.B. in folgender Art:
Header und Navigation für Themen einfügen
Nachdem wir unseren Fragenkatalog sehen können, wollen wir durch die einzelnen Themen navigieren können. Dafür bauen wir eine kleine Navigationsleiste unterhalb unseres Fragenkataloges und fügen oberhalb der Galerie einen Lable ein, der dem Nutzer später das aktuell angewählte Thema ausgibt.
Collection erstellen zur Sammlung der Themen
Nachdem wir unsere UI soweit fertiggestellt haben, benötigen wir die Collection / Sammlung unserer Themen. Wir müssen also aus unserem Fragenkatalog alle Themen, allerdings nur einmal, heraussammeln.
Dafür nutzen wir die Funktion Distinct() von Power Apps. Distinct gibt uns die "einzigartigen" Werte aus einer Tabelle zurück. Ein Beispiel wäre:
Tabelle "Fahrzeugbestand"
Hersteller | Modell | Kilometerstand |
Audi | 80 | 348298 |
Mercedes-Benz | W201 | 928375 |
Mercedes-Benz | W124 | 345678 |
Mercedes-Benz | W202 | 876564 |
BMW | i3 | 34565 |
Tabelle Distinct(Fahrzeugbestand)
Result |
Audi |
Mercedes-Benz |
BMW |
Um die Sammlung der Themen ausführen zu können, fügen wir zunächst einen Button "btnDatenAbrufen" ein.
Die OnSelect-Eigenschaft füllen wir mit folgendem Code:
1. Alle Themen sammeln
In unserem konkreten Beispiel sieht der Code zur Erstellung der Sammlung mit allen Themen wie folgt aus:
//Sammeln aller "einzigartigen" Themen aus dem Fragenkatalog
ClearCollect(
colThemenOhneRowNumber,
Distinct(
CodeReviewFragenkatalog,
Thema
)
)2. Nummerierung einfügen
Nachdem wir eine Sammlung aller Themen haben, hat diese Sammlung über die Funktion "Distinct()" jedoch nur eine Spalte mit dem Namen Result. Wir wollen nun noch die Nummerierung der Themen in aufsteigender Reihenfolge vornehmen. Dafür verwenden wir den folgenden Code:
Clear(colThemenMitRowNumber);
ForAll(colThemenOhneRowNumber,
Collect(colThemenMitRowNumber,
Last(FirstN(AddColumns(colThemenOhneRowNumber,
"RowNumber",
CountRows(colThemenMitRowNumber)+1
),
CountRows(colThemenMitRowNumber)+1
)
)
)
)Hintergrund zum Code
Mit der AddColumns-Funktion fügen wir der Themen-Sammlung die Nummerierung an. Der Wert wird bestimmt, indem mit CountRows() die Anzahl der zu dem Zeitpunkt gesammelten Elemente gezählt wird. Da wir das Collect() dank der ForAll-Funktion für alle Elemente in colThemenOhneRowNumber durchführen, erhöht sich der mit CountRows() ermittelte Wert. Mit der FirstN-Funktion verhindern wir, dass wir jedes Mal alle Themen sammeln → Dann hätten wir in unserem Fall 169 (13x13) Einträge.
Nun benötigen wir noch eine Last()-Funktion, um immer nur einen, und zwar den letzten, Wert der Sammlung hinzuzufügen. Ohne diese Funktion würde sich das N der FirstN-Funktion entsprechend der Anzahl der bereits gesammelten Werte durch CountRows() erhöhen. Die RowNumber würde wie folgt in die Sammlung geschrieben werden:
Schleife: CountRows(colThemenMitRowNumber) = 0 + 1 = 1
Schleife: CountRows(colThemenMitRowNumber) = 1 + 1 = 2 [Summiert mit den bisherigen 1 = 3]
Schleife: CountRows(colThemenMitRowNumber) = 3 + 1 = 4 [Summiert mit den bisherigen 3 = 7]
Schleife: CountRows(colThemenMitRowNumber) = 7 + 1 = 8 [Summiert mit den bisherigen 7 = 15]
Schleife: CountRows(colThemenMitRowNumber) = 15 + 1 = 16 [Summiert mit den bisherigen 15 = 31]
Da wir das FirstN() auf unsere ursprüngliche Sammlung colThemenOhneRowNumber beziehen, in welcher immer nur 13 Werte vorhanden sind, werden ab der 5. Schleife bis zur 13. Schleife jedes Mal 13 Werte hinzugefügt und die RowNumber um 13 hochgeschrieben. Entsprechend viele Einträge werden dann auch für colThemenMitRowNumber gesammelt (Beispiel: Nach der 3. Schleife haben wir 1 Eintrag mit RowNumber 1, 2 Einträge mit RowNumber 2 und 4 Einträge mit Rownumber 4). Um nur einen Wert zu sammeln, unzwar jedes Mal den neuesten Wert, wird mit der Last()-Funktion der letzte Eintrag zur Sammlung hinzugefügt. Somit wird in jeder Schleife nur 1 Eintrag hinzugefügt und die RowNumber kann sich nur um 1 erhöhen. Damit kommen wir auf unsere 13 Einträge mit der richtigen RowNumber.
Im Ergebnis erhalten wir nun eine Tabelle mit zwei Spalten, die in unserem Fall folgendermaßen aussieht:
Der gesamte OnSelect-Code des Buttons sieht dann wie folgt aus:
Navigation durch die Themen ermöglichen
Im nächsten Schritt wollen wir unsere Navigation "mit Leben" füllen und in unserer Galerie nur die Fragen auswählen, die der Nutzer über die Navigation grade ausgewählt hat.
Wir verwenden dafür die UpdateContext()-Funktion und schreiben mit jedem OnSelect auf einen der beiden Icons einen neuen Wert in diese Variable.
Um "Vorwärts" durch die Themen zu navigieren müssen wir auf dem OnSelect des "Vor-Icons" folgenden Code verwenden:
//Zum nächsten Thema gehen -> Row Number +1
UpdateContext(
{
locThema: LookUp(
colThemenMitRowNumber,
RowNumber = locThema.RowNumber + 1
)
}
)Mit jedem Klick wird die Row Number also um 1 erhöht und wir springen somit durch die einzelnen Themen. Damit unser Nutzer nicht "endlos" diesen Wert erhöhen kann, füllen wir den DisplayMode unseres "Vor-Icon" mit folgendem Code:
//Wenn der Nutzer beim letzten Thema angekommen ist, ist der Icon disabled, sodass nicht endlos erhöht werden kann
If(
//Wenn die aktuelle RowNumber dem maximalen Wert für RowNumber in der collection colThemenMitRowNumber, ist der Nutzer beim letzten (max) Thema angekommen und er soll den Wert nicht mehr erhöhen können.
locThema.RowNumber = Max(colThemenMitRowNumber,RowNumber),
DisplayMode.Disabled,
DisplayMode.Edit
)Dasselbe wiederholen wir für unseren "Zurück-Icon", nur dass wir statt auf dem OnSelect jedes Mal um 1 zu erhöhen, den Wert um 1 verringern.
//Zum vorherigen Thema gehen -> Row Number -1
UpdateContext(
{
locThema: LookUp(
colThemenMitRowNumber,
RowNumber = locThema.RowNumber - 1
)
}
)Für den DisplayMode unseres "Zurück-Icon" nehmen wir nun statt der Max()-Funktion, die Min-Funktion.
//Wenn der Nutzer beim ERSTEN Thema angekommen ist, ist der Icon disabled, sodass nicht endlos verringert werden kann
If(
//Wenn die aktuelle RowNumber dem minimalen Wert für RowNumber in der collection colThemenMitRowNumber, ist der Nutzer beim ersten (min) Thema angekommen und er soll den Wert nicht mehr verringern.
locThema.RowNumber = Min(colThemenMitRowNumber,RowNumber),
DisplayMode.Disabled,
DisplayMode.Edit
)Aktuelles Thema und Fortschritt ausgeben
Im letzten Schritt wollen wir unseren Header, in dem bis jetzt nur "Thema" steht, mit einem Wert füllen und dem Nutzer in der Navigationsleiste eine Fortschrittsanzeige "Thema X von XX" ausgeben.
Für den Header können wir die Kontextvariable "locThema" verwenden und in die Text-Eigenschaft des Lables einfach den Code einfügen:
locThema.ResultFür die Fortschrittsanzeigen verwenden wir in der Text-Eigenschaft folgenden Code:
"Thema "&locThema.RowNumber&" von "&CountRows(colThemenMitRowNumber)In der Anwendung sieht unsere Navigation dann wie folgt aus:
Filter in der Galerie für die Fragen setzen
Im allerletzten Schritt müssen wir nun noch den Filter in unserer Galerie anpassen, schließlich wollten wir immer nur die Fragen angezeigt bekommen, die zum aktuell gewählten Thema gehören.
Die Items-Eigenschaft unserer "galFragen" Galerie passen wir wie folgt an:
Filter(CodeReviewFragenkatalog,Aktiv, locThema.Result = Thema)Im Endergebnis können wir mit der Zeilennummerierung
eine logische Unterteilung nach Themenblöcken für den Nutzer vornehmen, die Schritt-für-Schritt bearbeitet werden können,
die Navigation (Vor- und Zurück) einfach und dynamisch über die Zeilennummer ermöglichen &
dem Nutzer die Fortschrittsanzeige ausgeben, wie weit er bereits im Fragenkatalog fortgeschritten ist.
