Übung – Katalog auffüllen und filtern - Training

25 Minuten

Nachdem Sie die Datenquelle Power Apps sowie einen Katalog hinzugefügt und dann Ihre Tabelle ausgefüllt haben, sollten Sie bereit sein, Daten anzuzeigen. Kehren Sie zu Ihrer Canvas-App zurück, und navigieren Sie zur Anzeige Scr_AllExpenses. Wenn Sie diesen Bildschirm in einer anderen Registerkarte geöffnet hatten, beachten Sie, dass der Katalog noch nicht ausgefüllt wurde. Power Apps speichert die Datenquelle zwischen und verfügt nicht immer über die aktuelle Version, wenn Sie Änderungen vornehmen.

Führen Sie die folgenden Schritte aus, um dieses Problem zu beheben:

Wählen Sie die Schaltfläche Daten im Menü links aus, und suchen Sie dann Expense Reports.
Wählen Sie Weitere Aktionen und das Auslassungspunktemenü (...) rechts neben der Dataverse-Tabelle Expense Reports aus, und klicken Sie dann auf Aktualisieren. Die Expense Report-Daten sollten im Katalog erscheinen.
Kehren Sie zurück zur Strukturansicht, in der Sie verschiedene Steuerelemente auswählen und ein Menü Ihrer App-Bildschirme anzeigen können. (Das Symbol Strukturansicht befindet sich oben rechts im Seitenmenü und ähnelt einem Papierstapel.)
Ziehen Sie den Katalog so, dass der untere Teil des Bildschirms oben eingenommen wird, sodass etwas Platz oben entsteht. Verwenden Sie die Registerkarte Eigenschaften im rechten Abschnitt des Bildschirms, und richten Sie die Eigenschaft Y im Bereich Position auf 236 ein und die Eigenschaft Height im Bereich Größe auf 900. Die Sammlung sollte bei der Y-Koordinate 236 beginnen und sich bis zum unteren Bildschirmrand erstrecken.

Als Nächstes müssen Sie weitere nützliche Informationen anzeigen. Der Standort ist nützlich, aber in Ihrem Katalog wird nur ein Datum angezeigt, und es ist unklar, ob es sich bei diesem Datum um das Abreise‑ oder Ankunftsdatum handelt.
Wählen Sie Subtitle2 aus, und überprüfen Sie dann die Text-Eigenschaft auf der Registerkarte Eigenschaften. Ihrem Katalog wurde möglicherweise ein anderes Feld zugewiesen, aber dieses zeigt ThisItem.'Created On' an. Alle Informationen aus Ihrer Tabelle im Katalog beginnen mit ThisItem, wodurch die Zeile angegeben wird. Aus diesem Grund können Sie nur die erste Zeile ändern und müssen entsprechende Logik verwenden, dass Zeilen sich anders verhalten. Dieses Thema wird später erläutert. Ändern Sie dieses Feld vorerst in das Abreisedatum.
Geben Sie ThisItem.'Arrival Date' in der Eigenschaft Text ein.

Mit Bezug zu diesem Datum arbeiten wir an zwei Elementen. Zum einen wird die Zeit angezeigt, was für diese Übung nicht erforderlich ist. Zweitens können Ihre Benutzer immer noch nicht erkennen, welches Datum (Departure oder Arrival) angezeigt wird. Zum Beheben dieses Problems nehmen wir einige Bearbeitungen an diesem Text vor. Oftmals benötigen Sie die Text-Funktion zum Formatieren.
Aktualisieren wir die Eigenschaft Text, um die Zeit von unserem Ankunftsdatum zu entfernen, indem wir die Formel wie folgt erstellen:
```
Text(ThisItem.'Arrival Date', DateTimeFormat.ShortDate)
```
Jetzt sollten Sie dieselben Informationen wie zuvor haben, jedoch im gewünschten Format (ohne die Zeit). Um Textzeichenfolgen zusammenzufügen, verwenden Sie ein kaufmännisches Und-Zeichen (&), und um Text für Ihre Formelleiste zu definieren, verwenden Sie Anführungszeichen (wie Sie vielleicht bemerkt haben, als Sie den ersten Bildschirm erstellt haben). Wir kombinieren diese Prinzipien, um die Abreise‑ und Ankunftsdaten zu erstellen, die als Datumsbereich angezeigt werden.
Aktualisieren Sie die Formel mit folgendem Code.
```
Text(ThisItem.'Arrival Date', DateTimeFormat.ShortDate) & " - " & Text(ThisItem.'Departure Date', DateTimeFormat.ShortDate)
```
Der DateTimeFormat-Teil der Formel wird ausgeblendet, wenn Sie außerhalb der Formelleiste klicken. Diese Situation tritt bei einigen Funktionen auf und wirkt sich nicht negativ auf Ihren Code aus. Wenn Sie wieder auf die Formelleiste klicken, wird die gesamte Formel angezeigt.
Führen wir einen weiteren Schritt aus, und aktualisieren wir unsere Formel noch einmal, um Ihnen zu zeigen, wie Sie zusätzlichen Text hinzufügen können, um das Benutzererlebnis anzupassen. Wir fügen „Arrival“ und „Departure“ hinzu, damit keine Verwirrung darüber entsteht, was die einzelnen Daten bedeuten. Sie können Ihre Textformel folgendermaßen aktualisieren:
```
"Arrival: " & Text(ThisItem.'Arrival Date', DateTimeFormat.ShortDate) & " - Departure: " & Text(ThisItem.'Departure Date', DateTimeFormat.ShortDate)
```
Nachdem die Sammlung nun Ihren Wünschen entspricht, arbeiten wir an einem Filter, sodass Reisende nur ihre eigenen Datensätze anzeigen können. Aktuell können Benutzer alle Daten in unserer Sammlung einsehen. Um die Daten zu filtern, ändern wir die Items-Eigenschaft des Katalogs. Zuerst müssen Sie die Informationen für den angemeldeten Benutzer erfassen.
Das App-Steuerelement wird über dem ersten Bildschirm in der Strukturansicht angezeigt. Wählen Sie App und dann im Dropdownmenü OnStart aus.

Mit der Eigenschaft OnStart können Sie eine oder mehrere Funktionen eingeben, die ausgeführt werden, wenn die App gestartet wird. In diesem Fall erfassen Sie die Informationen des angemeldeten Benutzers. Sie können diese Datenquelle an jeder Stelle in der App aufrufen, aber am besten rufen Sie sie nur einmal auf und speichern sie dann für die zukünftige Verwendung in der App. Immer wenn Sie eine Datenquelle aufrufen (in diesem Fall über Ihr Microsoft Entra ID), führt dies zu einer Leistungsbelastung in Ihrer App und verbraucht Ressourcen. Aus diesem Grund ist es besser, so wenig wie möglich anzurufen, insbesondere in Fällen, in denen sich nicht die gesamte App-Instanz ändert, wie z. B. bei aktuellen Benutzerdaten.

Wir können eine Variable einrichten, um Informationen zur späteren Verwendung in der gesamten App zu speichern. Im Wesentlichen sind Variablen Informationen in verschiedenen Formaten wie Text, Datum, Zahl oder sogar ein Datensatz (oder eine Datenzeile). Bei herkömmlicher Codierung mussten Sie häufig den Variablentyp definieren, den Sie verwenden. Power Apps ermittelt diesen Variablentyp jedoch für Sie. Stellen Sie sicher, dass Sie beim Festlegen einer Variablen in Zukunft immer denselben Typ (oder dieselbe Definition) für diese Variable verwenden.
Definieren Sie die Variable, indem Sie die folgende Formel in Ihre OnStart-Eigenschaft eingeben: Set(VarUser, User()).

VarUser ist der Name dieser Variablen und User() ist die Definition, die in diesem Fall eine Funktion ist, aus der Informationen von Microsoft Entra ID gesammelt werden. Sie können für Ihre Variablen einen beliebigen Namen verwenden; ähnlich wie bei den Steuerelementen ist es jedoch am besten, Variablen mit var oder einer anderen Nomenklatur zu beginnen, die Ihnen später hilft, sich an sie zu erinnern.

Ihre Benutzer müssen die OnStart-Eigenschaft nicht zum Auslösen aufrufen, aber wenn Sie die Eigenschaft während des Erstellens ändern, müssen Sie sie auslösen.
Lösen Sie die Variable aus, indem Sie die Auslassungspunkte (...) neben App und dann OnStart ausführen aus den Optionen auswählen. Nachdem Ihre Variable nun ausgefüllt ist, können Sie sie zum Filtern Ihres Katalogs verwenden.
Wählen Sie Gal_ExpenseReports_AllExpenses in der Strukturansicht aus, und stellen Sie dann sicher, dass die Items-Eigenschaft im Dropdownmenü angezeigt wird.
Ersetzen Sie Expense Reports mit: Filter('Expense Reports', Traveler.'Primary Email'=VarUser.Email)

Ihre Daten werden jetzt nach Elementen gefiltert, bei denen Sie als Reisender aufgeführt sind.

Beim Eingeben von Formeln fordert Sie Power Apps zur Auswahl der richtigen Sprache auf und unterbreitet Vorschläge, während Sie fortfahren. Diese Funktion hilft Ihnen beim Erlernen von Formeln und beim Schreiben von Ausdrücken. Beachten Sie außerdem, dass Sie Ihre Reiseinformationen aufschlüsseln mussten, um die E-Mail zu finden. Da es sich um eine Suchspalte handelt, enthält sie alle Informationen in der Tabelle Users. Betrachten Sie den Punkt als eine Art Schaufel, die Ihnen hilft, tiefer in das einzudringen, worauf Sie sich beziehen. Dasselbe mussten Sie auch für VarUser durchführen, da es alle Informationen aus der User()-Funktion mit vollständigem Namen, E-Mail und Foto enthält.

Jetzt hat Ihr Katalog genau das gewünschte Aussehen. Sie müssen der Seite jedoch noch einige Elemente hinzufügen, um sie nützlicher zu machen und das Benutzererlebnis (UX) zu verbessern. Ihre nächste Aufgabe besteht darin, einen Titel hinzuzufügen, damit Benutzer wissen, dass sie sich auf dem richtigen Bildschirm befinden.
Klicken Sie in den leeren Bereich über Ihrem Katalog, und wählen Sie dann Einfügen aus.
Wählen Sie Textbeschriftung aus, um Ihrem Bildschirm eine neue Beschriftung hinzuzufügen.
Ändern Sie die folgenden Eigenschaften Ihrer Textbeschriftung-Steuerelements über den Bereich Eigenschaften oder den Bereich Erweitert. Einige Eigenschaften sind auch auf der Befehlsleiste verfügbar.
- Text: All Expense Reports
- Größe: 24
- FontWeight: Halbfett
- Text Alignment: Mitte
- X: 0
- Y: 0
- Width: 640
- Height: 92
- Fill: RGBA(85, 106, 129, 1)
Wenn Sie mit dem Festlegen dieser Beschriftungseigenschaften fertig sind, benennen Sie Ihre Beschriftung um, um der Nomenklatur zu folgen, die Sie gelernt haben: Lbl_Header_AllExpenses

Jetzt erstellen wir eine Möglichkeit, zum Startbildschirm zurückzukehren. Sie können Aktionen über eine Schaltfläche ausführen, Sie können jedoch auch zahlreiche Steuerelemente für Aktionen verwenden. Eines dieser Steuerelemente ist ein Symbol.
Wählen Sie Einfügen und dann das Dropdownmenü Symbole aus. Sie können scrollen, um das benötigte Symbol hinzuzufügen oder ein verfügbares Symbol auswählen und dann das Symbol in den Eigenschaften ändern. Einige Entwickler bevorzugen diese Methode, da sie es ihnen ermöglicht, die Symbole zu durchsuchen, anstatt zu scrollen, um das gewünschte zu finden.
Verwenden Sie für diese Übung den Zurückpfeil-Symbol, um anzuzeigen, dass Sie durch Betätigen dieses Symbols zur Startseite zurückkehren. Geben Sie „zurück“ in das Suchfeld Einfügen ein, um es schnell zu finden. (Stellen Sie sicher, dass Sie das Symbol auswählen und nicht die Form.)
Ändern Sie die folgenden Eigenschaften Ihres Symbols Zurückpfeil:
- X: 9
- Y: 21
- Width: 64
- Height: 50
- Farbe: RGBA(255, 255, 255, 1)
- OnSelect: Back()
Auch wenn Sie Navigate()-Funktion verwenden hätten können, haben Sie die Back()-Funktion verwendet, die den Benutzer zum Bildschirm führt, auf dem er sich unmittelbar vor dem aktuellen Bildschirm befand. Sie können beide Funktionen verwenden, in dieser Übung verwenden wir jedoch die Back()-Funktion, damit Sie sich mit einer weiteren nützlichen Funktion vertraut machen können.
Benennen Sie Ihr Symbol um in: Icn_Back_AllExpense

Eine weitere Komponente, die Sie hinzufügen können, um das Benutzererlebnis zu verbessern, ist ein Zielfilter, damit Benutzer die gesuchte Spesenabrechnung schnell finden können.
Fügen Sie dem Bildschirm eine weitere Textbeschriftung hinzu, und legen Sie die folgenden Eigenschaften fest:
- Text: Trip Destination
- Size: 18
- X: 0
- Y: 92
- Width: 640
- Height: 144
- Fill: ColorFade(Lbl_Header_AllExpenses.Fill, 30%)
- PaddingTop: 20
- PaddingLeft: 40
- VerticalAlign: VerticalAlign.Top
Benennen Sie Ihre Beschriftung um in: Lbl_TripDestination_AllExpenses

Wir haben die ColorFade()-Funktion für die Fill-Eigenschaft und Verweise auf die Fill ‑Eigenschaft der ersten Beschriftung verwendet, die Sie erstellt haben. Verweise auf andere Steuerelemente sind in Canvas-Apps üblich, weshalb die Namen Ihrer Steuerelemente so wichtig sind. Die ColorFade()-Funktion macht eine Farbe um einen bestimmten Prozentsatz heller oder dunkler. Positive Prozentsätze zeigen eine hellere Farbe und negative Prozentsätze eine dunklere Farbe. Diese Funktion kann nützlich sein, wenn Sie Apps entwerfen.

Tipp

Bei der Festlegung benutzerdefinierter Farben können Sie eine globale Variable erstellen, anstatt auf ein anderes Steuerelement zu verweisen. Dies ist besonders hilfreich, wenn Sie eine Farbe erstellen möchten, die Sie in Ihrer gesamten App verwenden möchten. Sie können die OnStart-Eigenschaft der App verwenden, wie wir es für VarUser getan haben, um Variablen festzulegen, die Sie in der gesamten App verwenden möchten.

Möglicherweise stellen Sie fest, dass diese Beschriftung ein ungewöhnliches Erscheinungsbild hat. Der Grund dafür ist, dass wir ein Dropdownmenü überlagern. Sie können ein Rechteck hinter der Beschriftung und dem Dropdownmenü einfügen, aber je mehr Steuerelemente Sie haben, desto länger dauert das Laden Ihres Bildschirms. Versuchen Sie aus diesem Grund, so wenige Steuerelemente wie möglich zu verwenden, und kombinieren Sie sie, wo dies möglich ist.
Jetzt fügen wir ein Steuerelement zur Auswahl eines Ziels hinzu. Wählen Sie Einfügen, Eingabe und dann das Steuerelement Dropdown hinzu, oder Sie können „Drop“ in das Suchfeld Einfügen eingeben und Dropdown auswählen.
Ändern Sie die folgenden Eigenschaften Ihres Dropdown-Steuerelements über den Bereich Eigenschaften oder den Bereich Erweitert.
- X: 35
- Y: 162
- Width: 560
- Height: 50
- Fill: Lbl_Header_AllExpenses.Fill
- ChevronBackground: Lbl_Header_AllExpenses.Fill
- Size: 16
- AllowEmptySelection: true
- Items: Distinct(Filter('Expense Reports', Traveler.'Primary Email' = VarUser.Email), 'Trip Destination')
Dropdown-Steuerelemente haben andere Eigenschaften als andere Steuerelemente. Sie werden diesen Faktor erkennen, wenn Sie sich mit weiteren Steuerelementen vertraut machen. Darüber hinaus verwendet unser Formular die Distinct()-Funktion, die Felder aus einer Tabelle auswählt und Duplikate entfernt. Wenn Sie also denselben Ort mehrmals besucht haben, wird der Ort nur einmal im Dropdownmenü angezeigt.
Ändern Sie den Namen Ihres Dropdown-Steuerelements in: Ddn_Destination_AllExpenses

Ihre letzte Aufgabe auf diesem Bildschirm besteht darin, sicherzustellen, dass der Katalog gemäß der Auswahl aus dem „Dropdown“-Steuerelement gefiltert wird.
Wählen Sie Ihre Sammlung aus, und ändern Sie die Eigenschaft Items in:
```
If(
    IsBlank(Ddn_Destination_AllExpenses.Selected.Value),
    Filter(
        'Expense Reports',
        Traveler.'Primary Email' = VarUser.Email
    ),
    Filter(
        'Expense Reports',
        Traveler.'Primary Email' = VarUser.Email,
        'Trip Destination' = Ddn_Destination_AllExpenses.Selected.Value
    ) 
)
```
Sie können Ihre Bearbeitungsleiste erweitern, sodass Sie mehr Platz zum Tippen haben. Wählen Sie Text formatieren aus, wenn Sie mit der Formel fertig sind, damit sie klarer und einfacher zu lesen ist.

Diese Formel ist kompliziert geworden. Erklären wir dies also. Sie haben Ihre erste „Items“-Eigenschaft in eine If()-Anweisung eingeschlossen, mit der Sie abhängig von einer oder mehreren Bedingungen unterschiedliche Ergebnisse angeben können. In diesem Fall besteht der logische Test (oder die Bedingung) darin, ob das „Dropdown“-Steuerelement leer ist oder nicht. Wenn das „Dropdown“-Steuerelement leer ist (Wert „true“), werden die Elemente für den Katalog nur vom Benutzer gefiltert. Wenn das „Dropdown“-Steuerelement andererseits nicht leer ist (Wert „false“), werden die Elemente für den Katalog nach dem Benutzer und dem Ziel gefiltert.

Hinweis

Wenn Sie die Items-Eigenschaft eines Katalogs zurücksetzen, wechseln bestimmte Beschriftungen gelegentlich zur Betrachtung verschiedener Felder. Wenn einige Ihrer Daten so aussehen, als wären sie verschwunden, stellen Sie sicher, dass die Text-Eigenschaft Ihrer Beschriftungen korrekt ist.

Um den Sammlungsfilter zu testen, setzen Sie Ihre App in den Vorschaumodus, indem Sie das Symbol Wiedergeben rechts oben auswählen oder die Taste F5 drücken.

Sie haben die Einrichtung Ihres Bildschirms zum Anzeigen und Filtern von Reisedaten mit Bezug zu dem angemeldeten Benutzer abgeschlossen. Ihr Bildschirm sollte dem folgenden Bild ähneln.

Weiter

Übung – Katalog auffüllen und filtern

Feedback