Pagination

Galerie auf mehrere Seiten aufteilen: die Pagination Methode

Bei der Erstellung von Business Apps mit Power Apps stoßen wir häufig auf das Problem, große Datenmengen übersichtlich darzustellen, ohne die App Performance zu beeinträchtigen. Heute möchte ich dir eine Lösungsmöglichkeit vorstellen: die Pagination Methode. Mit dieser Technik kannst du deine Galerieinhalte in handliche Seiten aufteilen und erhöhst damit die Benutzerfreundlichkeit deiner App. Ich zeige dir Schritt für Schritt, wie du in deiner App Pagination implementierst.

Schritt 1: App vorbereiten

Starte mit einer App, in der bereits eine Galerie mit eingebundenen Daten (z.B. einer SharePoint Liste) vorliegt. In diesem Beispiel verwende ich die Asset Manager App, die du dir hier kostenlos herunterladen kannst.

Schritt 2: Galerie Einträge festlegen

Erstelle ein Dropdown Menü, mit dem BenutzerInnen die Anzahl der anzuzeigenden Einträge pro Seite auswählen können. Ich lege dafür die möglichen Werte 1, 2 und 3 sowie den Standardwert 3 fest.

Dropdown Feld (dd_AnzahlProSeite)
Items = ["1";"2";"3"]
DefaultSelectedItems = {Value:3}

Schritt 3: Seitennavigation

Um das Blättern zwischen den Seiten zu ermöglichen, füge zuerst entsprechende Icons hinzu. Lege dann eine Variable fest (var_Seitennummer) über die du die Navigation steuerst.

• Pfeil ganz links: Hier soll immer auf die erste Seite navigiert werden.
  

  Icon
  OnSelect = Set(varSeitennummer;1)

• Pfeil links: Bei Klick auf dieses Icon soll die aktuelle Seitenanzahl um 1 verringert werden.
  

  Icon
  OnSelect = Set(varSeitennummer;varSeitennummer - 1)

• Pfeil rechts: Ein Klick auf dieses Icon soll die aktuelle Seitenanzahl um 1 erhöhen.
  

  Icon
  OnSelect = Set(varSeitennummer;varSeitennummer + 1)

• Pfeil ganz rechts: Hier soll auf die letzte Seite navigiert werden.
  

  Icon
  OnSelect = Set(varSeitennummer;RoundUp(CountRows('Asset Manager Geräte') / dd_AnzahlProSeite.Selected.Value;0))

Schritt 4: Navigationsbegrenzung

Setze Bedingungen, um sicherzustellen, dass BenutzerInnen nicht über die erste oder letzte Seite hinaus navigieren können. Nutze dazu den Display Mode der entsprechenden Icons.

• Pfeil ganz links & links: Diese sollen nur klickbar sein, wenn die aktuelle Seitenanzahl >1 ist.
  

  Icons
  DisplayMode = If(varSeitennummer=1;DisplayMode.Disabled;DisplayMode.Edit)

• Pfeil ganz rechts & rechts: Diese sollen nur klickbar sein, wenn die aktuelle Seitenanzahl < der maximalen Seitenanzahl ist.
  

  Icons
  Display Mode = If(varSeitennummer=RoundUp(CountRows('Asset Manager Geräte') / dd_AnzahlProSeite.Selected.Value;0);
  DisplayMode.Disabled;DisplayMode.Edit)

Schritt 5: Galerieinhalt auf die aktuelle Seite begrenzen

Um die erstelle Logik der Navigation auf die Galerie zu übertragen, kannst du die folgenden beiden Funktionen verwenden.

• FirstN – Gibt die ersten Datensätze aus einer Tabelle zurück
• LastN - Gibt die letzte Gruppe von Datensätzen einer Tabelle zurück

Nutze eine Kombination dieser Funktionen in Verbindung mit der aktuellen Seitenanzahl sowie der Anzahl an darzustellenden Einträgen.

Galerie
Items = LastN(FirstN('Asset Manager Geräte';dd_AnzahlProSeite.Selected.Value * varSeitennummer);dd_AnzahlProSeite.Selected.Value)

Erklärung des Codes:

Der FirstN Teil des Codes bewirkt, dass die ersten Datensätze der Datenquelle angezeigt werden. Über die aktuelle Seitennummer multipliziert mit der anzuzeigenden Menge an Datensätzen ergibt sich die Anzahl der Datensätze.

Z.B. Seitenanzahl = 2 und anzuzeigende Datensätze = 3  => Die FirstN Funktion liefert 6 Datensätze.

Über die LastN Funktion werden von den aus der FirstN ermittelten Datensätze nur die letzten Einträge entsprechend der anzuzeigenden Datensätze pro Seite dargestellt.

Z.B. Seitenanzahl = 2 und anzuzeigende Datensätze = 3 => die Kombination aus FirstN und LastN gibt die letzten 3 Datensätze von 1-6 zurück. Also Datensätze 4, 5 und 6.

Schritt 6: Benutzerfreundlichkeit erhöhen

Um die Benutzerfreundlichkeit zu erhöhen, schlage ich dir noch 2 Verbesserungen vor.

Darstellung der aktuellen sowie der maximalen Seiten

Label
Text = varSeitennummer & " / " & RoundUp(CountRows('Asset Manager Geräte') /
 dd_AnzahlProSeite.Selected.Value;0)

Anzahl Einträge auf der letzten Galerieseite

Da die Einträge in der Datenquelle variabel sind, ist es erforderlich, die letzte Galerieseite nicht mit den letzten 3 Datensätzen zu befüllen, sondern entsprechend der Seitenlogik nur die zuvor noch nicht gezeigten Elemente. Nutze dazu am besten eine If Bedingung, in der du mithilfe der CountRows Funktion auf der letzten darzustellenden Seite die Gesamtanzahl der Einträge ermittelst und von der anzuzeigenden Anzahl abziehst.

Galerie
Items =
If(
    varSeitennummer = RoundUp(
        CountRows('Asset Manager Geräte') / dd_AnzahlProSeite.Selected.Value;
        0
    );
    LastN(
        FirstN(
            'Asset Manager Geräte';
            dd_AnzahlProSeite.Selected.Value * varSeitennummer
        );
        dd_AnzahlProSeite.Selected.Value - (dd_AnzahlProSeite.Selected.Value * varSeitennummer -  CountRows('Asset Manager Geräte'))
    );
    LastN(
        FirstN(
            'Asset Manager Geräte';
            dd_AnzahlProSeite.Selected.Value * varSeitennummer
        );
        dd_AnzahlProSeite.Selected.Value
    )
)

Ich hoffe dieser Beitrag hilft dir dabei, deine Business Apps effizienter und nutzerfreundlicher zu gestalten sowie deine Datenbanken optimal zu verwalten.

Melde dich gerne für meinen Newsletter an, in dem ich dir Tipps und Tricks rund um Power Apps & Power Automate zusende.

 Hier gehts zum Detailvideo: