kim
24. Jan. 20224 Min.
Aktualisiert: 6. Sept. 2022
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.
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:
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.
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:
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:
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
)
)
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
)
)
)
)
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:
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
)
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.Result
Fü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:
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.