Übung – Mit externen Daten in einer Canvas-App arbeiten

Abgeschlossen

In dieser Übung arbeiten Sie mit externen Daten in Ihrer Canvas-App, indem Sie Ihrer App eine Datenquelle hinzufügen, Daten mithilfe von Sammlungen erstellen/ändern und Daten über die Funktion Patch modifizieren.

Sie müssen das Arbeitsblatt herunterladen, um diese Übung abzuschließen. Wählen Sie „Download“ aus, sobald der Link geöffnet wird. Extrahieren Sie das Excel-Arbeitsblatt, und laden Sie die Tabelle in Ihre eigene OneDrive-Anwendung hoch.

Eine Datenquelle hinzufügen

1. Melden Sie sich bei Power Apps an.

2. Erstellen Sie von Grund auf eine neue Power Apps-Canvas-App, und nennen Sie diese ExternalData. Wählen Sie das Wort Tablet aus.

3. Stellen Sie sicher, dass Sie dieses Excel-Arbeitsblatt (Link oben) Ihrem OneDrive hinzugefügt haben.

4. Wählen Sie über die Schaltfläche Einfügen in der Kopfzeile Vertikaler Katalog aus.

5. Geben Sie im Bereich Datenquelle auswählen in Ihrem Katalog „OneDrive“ in das Suchfeld ein, und wählen Sie dann OneDrive for Business aus der Liste aus. Alternativ könnten Sie auch Konnektoren erweitern und durch alle verfügbaren Konnektoren scrollen, bis Sie OneDrive for Business finden.

   

6. Wählen Sie unter Verbindung hinzufügen die Verbindung aus, die Sie für OneDrive for Business verwenden möchten (unter dieser Verbindung ist eine E-Mail-Adresse aufgeführt).

7. Wählen Sie am Ende von OneDrive for Business die Option Verbinden aus.

8. Wenn Sie zur Auswahl einer Excel-Datei aufgefordert werden, suchen Sie die in Schritt 3 heruntergeladene Excel-Datei bzw. scrollen Sie zu dieser Datei.

9. Prüfen Sie im Bereich Tabelle auswählen die Tabelle Items, und wählen Sie dann Verbinden aus.

Ihr Katalog ist nun verbunden mit Ihrer Excel-Tabelle „Items“ in OneDrive for Business. Stellen Sie sicher, dass die Eigenschaft Items einen Bezug zur Tabelle Items hat, und der Katalog sollte dann die drei Einträge in der Tabelle anzeigen.

Ihre Daten in einem Katalog anzeigen und mit ihnen interagieren

1. Vergewissern Sie sich, dass Sie das hinzugefügte Katalog-Steuerelement ausgewählt haben.

2. Wählen Sie im Eigenschaftenbereich auf der rechten Seite das Dropdownmenü für die Eigenschaft Layout aus. Alternativ wird beim Überfahren des ausgewählten Steuerelements eine Schaltfläche Layout mit den gleichen Optionen angezeigt.

3. Wählen Sie das Layout Bild, Titel, Untertitel und Text aus.

4. Wählen Sie im Eigenschaftenbereich auf der rechten Seite die Schaltfläche „Bearbeiten“ für die Eigenschaft Fields aus, und legen Sie die Felder wie folgt fest (beachten Sie, dass hinter den Steuerelementen Zahlen stehen, z. B. Text wird „Body1“, siehe Bild unten als Referenz):

   • Body: Description

   • Image: Image

   • Subtitle: UnitPrice

   • Title: Name

   Alternativ können Sie mit der Maus über das ausgewählte Steuerelement fahren und die Schaltfläche Felder im Hover-Menü auswählen, das über dem Steuerelement angezeigt wird. Sobald Sie die Anpassungen vorgenommen haben, wählen Sie einfach erneut die Schaltfläche Felder aus, um die Option zu schließen.

   

5. Schließen Sie das Dialogfeld Daten.

6. Wählen Sie im Katalog den Preis in der ersten Zeile aus. Beachten Sie die Schaltfläche Copilot, wenn Sie den Mauszeiger über das Etikett mit dem UnitPrice bewegen. Verwenden wir Copilot, um dies wie einen Preis aussehen zu lassen. Klicken Sie auf die Schaltfläche Copilot und dann auf die Option Textformatierung.

7. Wählen Sie im Bereich Text mit Beispielen formatieren, der rechts auf Ihrem Bildschirm angezeigt wird, das Eingabefeld für Gewünschtes Format aus. Es sollten jetzt einige Optionen zur Formatierung angezeigt werden. Suchen Sie die Option 6,19 USD, und wählen Sie sie aus.

   

8. Sobald Sie dies tun, wird ein Vorschlag für das Feld UnitPrice im Bereich angezeigt. Copilot hat für Sie eine Formel geschrieben, die den Wert für den Stückpreis in etwas umwandelt, das wie ein Preis angezeigt wird. Für Copilot müssen Sie den Vorschlag auswählen und können dann auf die Schaltfläche Anwenden unten im Bereich klicken.

   Power Apps benachrichtigt, dass das Feld „UnitPrice“ für Sie aktualisiert wurde und die Werte in Ihrem Katalog nun alle wie Währungswerte aussehen sollten.

9. Wählen Sie im Katalog das Bild in der ersten Zeile aus.

10. Wählen Sie im Eigenschaftenbereich auf der rechten Seite das Dropdownmenü für die Eigenschaft Bildposition aus.

11. Ändern Sie die Eigenschaft von Fit in Fill, und Sie werden sehen, dass das Bild erweitert wird, um die Dimensionen des Bildsteuerelements auszufüllen.

Wir haben nun die Daten in Ihrem Katalog hinzugefügt, angepasst und konfiguriert.

Daten zwischen Sammlungen und Datenquellen verschieben

1. Wählen Sie Screen1 (an einer beliebigen Stelle außerhalb des Katalogs) aus.

2. Lassen Sie uns eine Schaltfläche hinzufügen, indem Sie im Menüband der App auf die Schaltfläche Einfügen klicken. Wählen Sie Schaltfläche aus, und positionieren Sie das neue Schaltfläche-Steuerelement unter Ihrem Katalog.

3. Ändern Sie den Text auf der Schaltfläche in Der Sammlung hinzufügen, und passen Sie die Schriftgröße von 15 auf 12 an, damit der Text in einer einzigen Zeile auf die Schaltfläche passt.

4. Wählen Sie die Schaltfläche aus, und ersetzen Sie in der Bearbeitungsleiste den OnSelect-Wert false durch diesen Ausdruck:

    ClearCollect(colItemsCollection, Items)
   

   colItemsCollection: Bezieht sich auf den Sammlungsnamen.

   Items: Bezieht sich auf den Namen der Datenquelle

   ClearCollect: Löscht alle vorhandenen Elemente und kopiert dann alle Datensätze von Items in die Sammlung colItemsCollection.

   

5. Wählen Sie die Schaltfläche Vorschau oben rechts im Power Apps-Editor aus (oder drücken Sie F5), um in den Vorschaumodus zu wechseln. Wählen Sie die Schaltfläche Zur Sammlung hinzufügen aus, und beenden Sie den Vorschaumodus. Alternativ können Sie Alt gedrückt halten, und die Schaltfläche Zur Sammlung hinzufügen auswählen.

6. Wählen Sie in der linken Leiste die Schaltfläche Variablen aus, erweitern Sie die Option Sammlungen, und wählen Sie die Auslassungspunkte neben colItemsCollection aus, das Sie erstellt haben. Wählen Sie die Option Tabelle anzeigen aus.

   

7. Es sollte jetzt ein Popup-Fenster mit der in Ihrer Sammlung gespeicherten Tabelle angezeigt werden. Beachten Sie, dass die drei Datensätze aus der Datenquelle Artikel der Sammlung colItemsCollection hinzugefügt wurden. Sie können diese Technik verwenden, um die Sammlungen Ihrer App und andere Variablen anzuzeigen.

   

8. Wählen Sie Abbrechen aus, um die Popup-Ansicht zu schließen und zu Ihrer App-Canvas zurückzukehren.

Andere Funktionen entdecken, die mit Sammlungen verwendet werden können

1. Wählen Sie in der Strukturansicht die Option Neuer Bildschirm>Leer aus.

2. Wählen Sie die Schaltfläche Einfügen aus, und suchen Sie nach Daten. Wählen Sie dann Datentabelle aus. Mithilfe eines Datentabellen-Steuerelements können wir schnell tabellarische Daten anzeigen.

   

3. Wechseln Sie jetzt zum Bereich Eigenschaften rechts, und wählen Sie Ihre Tabelle Items als Datenquelle aus. Sie sehen, dass „Name“, „UnitPrice“ und „UnitsSold“ als Spalten im Steuerelement angezeigt werden.

4. Löschen Sie in der Eigenschaft Items des Datentabellen-Steuerelements Items, und geben Sie Folgendes ein: colItemsCollection

5. Fügen Sie eine Schaltfläche ein, indem Sie Einfügen aus dem Menüband und dann Schaltfläche auswählen, und Ihre Schaltfläche unter Ihrer Tabelle positionieren. Fügen Sie drei weitere Schaltflächen von links bis direkt unter dem data table-Steuerelement auf Ihrem Bildschirm hinzu.

6. Ändern Sie den Text auf allen vier Schaltflächen entsprechend in Spalte hinzufügen, Spalte ablegen, Spalte anzeigen, Spalte umbenennen. Sie können dies einfach tun, indem Sie auf jede Schaltfläche doppelklicken und dann den neuen Namen eingeben. Passen Sie die Schriftgröße der Schaltfläche Spalte umbenennen auf 12 an, sodass sie in eine Zeile passt.

7. Wählen Sie die Schaltfläche Spalte hinzufügen aus und aktualisieren Sie die Eigenschaft OnSelect in diesen Ausdruck:

   Collect(colAddCollection, AddColumns(colItemsCollection, Revenue, UnitPrice * UnitsSold))
   

   Bei der Durchführung dieser Übung ist Ihnen wahrscheinlich das Copilot-Symbol in Ihrer Bearbeitungsleiste aufgefallen. Copilot kann eine Erklärung dafür geben, was in Ihrer Formel vor sich geht.

8. Wählen Sie in Ihrer Formelleiste das Symbol Copilot für die OnSelect-Eigenschaft Ihrer Schaltfläche „Spalte hinzufügen“ aus. Wählen Sie dann die Option Diese Formel erklären aus.

   Es sollte Ihnen jetzt eine Formelerklärung angezeigt werden, die mit diesem Bild vergleichbar ist. Mit der Funktion Copy können Sie Ihrer Formel Anmerkungen hinzufügen.

   

   Unser Beispiel erhält diese Erklärung von Copilot: Dieser Ausdruck fügt der Tabelle „colItemsCollection“ eine neue Spalte mit dem Namen „Revenue“ hinzu, indem er die Spalten „UnitPrice“ und „UnitsSold“ multipliziert, und sammelt dann in der Sammlung „colAddCollection“ die aktualisierte Tabelle.

   Sie können die Copilot-Erklärung sogar kopieren und sie Ihrer Formel als Zeile „Bemerkungen“ hinzufügen. Fügen Sie einfach vor dem Code einen doppelten Schrägstrich „//“ hinzu, der Power Apps anzeigt, dass Ihre Zeile kein ausführbarer Code ist.

9. Wählen Sie die Schaltfläche Spalte ablegen auf der Canvas aus, und aktualisieren Sie die Eigenschaft OnSelect in diesen Ausdruck:

   Collect(colDropCollection, DropColumns(colItemsCollection, UnitPrice))
   

   Versuchen Sie es noch einmal mit dem Copilot – Diese Formel erklären.

10. Wählen Sie die Schaltfläche Spalte anzeigen aus, und aktualisieren Sie die Eigenschaft OnSelect in diesen Ausdruck:

    Collect(colShowCollection, ShowColumns(colItemsCollection, Name))
    

    Durch Auswahl dieser Schaltfläche wird eine neue Sammlung mit dem Namen *colShowCollection erstellt, die alle Daten aus der Sammlung colItemsCollection kopiert. Zusätzlich verwenden wir jedoch die ShowColumns-Funktion, um nur die Spalte Name anzuzeigen.

11. Wählen Sie die Schaltfläche Spalte umbenennen aus, und aktualisieren Sie die Eigenschaft OnSelect in diesen Ausdruck:

    Collect(colRenameCollection, RenameColumns(colItemsCollection, Name, Product))
    

    Durch Auswahl dieser Schaltfläche wird eine neue Sammlung namens colRenameCollection erstellt, die alle Daten aus der Sammlung colItemsCollection kopiert. Zusätzlich verwenden wir jedoch die RenameColumns‑Funktion, um die Spalte Name in Product umzubenennen.

12. Wählen Sie die Schaltfläche Vorschau (oder Wiedergabe) oben rechts im Power Apps-Editor aus, um in den Vorschaumodus zu wechseln. Wählen Sie alle vier Schaltflächen aus. Schließen Sie dann den Vorschaumodus. Wir haben gerade vier weitere Sammlungen erstellt.

13. Werfen wir einen Blick auf die vier neuen Sammlungen, die wir erstellt haben. Wählen Sie Variablen>Sammlungen aus, und klicken Sie dann auf die Auslassungspunkte neben colAddCollection und dann auf Tabelle anzeigen. Beachten Sie, dass Ihr Popup-Fenster Variablen auf der linken Seite ein Menü umfasst, in dem alle vier neuen Sammlungen, die wir erstellt haben, sowie die ursprüngliche Sammlung angezeigt werden. Sie können jede davon auswählen, um die Auswirkungen auf die ursprüngliche Sammlung zu sehen, die in unserer Datentabelle angezeigt wurde.

    colAddCollection

    colDropCollection

    colShowCollection

    colRenameCollection

    

    Nachdem Sie einen Blick auf das Variablen-Popup-Fenster geworfen haben, können Sie es schließen. Sammlungen sind Tabellen, die temporäre Daten enthalten. Sie sind verfügbar, wenn die App genutzt wird und können nur vom aktuellen Benutzer verwendet werden. Wenn die App geschlossen wird, sind auch die Sammlungen nicht mehr zugänglich.

Mit der Patch-Funktion arbeiten

1. Wechseln Sie in Ihrer App zurück zu Screen 1.

2. Fügen Sie ein Steuerelement Text Beschriftung hinzu (wählen Sie die Schaltfläche Insert aus, und klicken Sie auf Text Beschriftung). Ändern Sie den Namen der Eigenschaft Text in Product Name. Klicken Sie dazu doppelt auf die Beschriftung, und nehmen Sie die Eingabe direkt im Steuerelement vor. Positionieren Sie die Beschriftung dann neben den Katalog.

   Tipp

   Eine einfache Technik, um ein Steuerelement schnell zu kopieren und einzufügen, besteht darin, das Steuerelement auszuwählen, die Strg-Taste gedrückt zu halten und C zu drücken. Drücken Sie dann (beim Halten der Strg-Taste) V. Etwas unterhalb und rechts neben dem Steuerelement, das Sie gerade kopiert haben, sehen Sie, wie das Element eingefügt wird.

3. Kopieren Sie die Beschriftung, die ausgewählt ist, und machen Sie den Text der kopierten Beschriftung zu Neue Beschreibung.

4. Verwenden Sie die Schaltfläche Einfügen erneut, um ein Texteingabe-Steuerelement einzufügen. Löschen Sie die Standardeigenschaft, damit sie leer ist. Kopieren Sie dieses Steuerelement dann, und positionieren Sie beide Texteingaben neben den Bezeichnungen, die Sie in den oben angegebenen Schritten erstellt haben. (Scrollen Sie nach unten, wenn Sie die Platzierung der Bedienelemente überprüfen möchten, um das Bild am Ende dieser Einheit zu sehen.)

5. Fügen Sie als Nächstes ein Schaltfläche-Steuerelement ein, und positionieren Sie es unter Ihren Bezeichnungen. Ändern Sie die Eigenschaft Text in Update.

6. Wählen Sie die Texteingabe rechts von der Bezeichnung Produktname aus.

7. Stellen Sie in der Bearbeitungsleiste sicher, dass Sie die Eigenschaft Default ausgewählt haben, und bearbeiten Sie den Ausdruck dann, wie im Folgenden gezeigt (bedenken Sie, dass Ihr Katalog-Steuerelement möglicherweise einen anderen Namen hat als Gallery1, passen Sie die Formel dementsprechend an):

   Gallery1.Selected.Name
   

   Diese Bezeichnung zeigt nun den Namen des ausgewählten Datensatzes aus dem Katalog an. Sie können dies testen, indem Sie die App in den Vorschaumodus versetzen (halten Sie alternativ die Alt-Taste gedrückt) und unterschiedliche Elemente aus dem Katalog auswählen. Beachten Sie, wie sich der angezeigte Produktname ändert, wenn Sie verschiedene Katalogelemente auswählen.

8. Wiederholen Sie diesen Vorgang für das Texteingabesteuerelement rechts neben der Bezeichnung Neue Beschreibung. Legen Sie die Default-Formel wie folgt fest:

   Gallery1.Selected.Description
   

   Beachten Sie zudem den dunklen vertikalen Balken, der auf der linken Seite des ausgewählten Katalogelements angezeigt wird.

9. Wählen Sie die Schaltfläche Aktualisieren aus.

10. Ändern Sie die Eigenschaft OnSelect der Schaltfläche in diesen Ausdruck:

    Patch(Items,LookUp(Items, Name = TextInput1.Text), { Description: TextInput1_1.Text })
    

    Hinweis

    Ihre Texteingabesteuerelemente haben möglicherweise andere Namen als in diesem Beispiel. Passen Sie Ihre Formel entsprechend an.

Lassen Sie uns noch einmal zusammenfassen, was wir durchgeführt haben. Wir haben eine einfache Möglichkeit geschaffen, unsere Produktbeschreibung zu aktualisieren.

• Patch – Bietet die Möglichkeit zum Ändern oder Erstellen eines Datensatzes in Ihrer Datenquelle. In diesem Fall ändern wir einen Datensatz.

• LookUp – Verwendet unseren Produktnamen, um den Datensatz zu finden, den wir ändern möchten. LookUp gibt den ersten Datensatz zurück, der unserer Bedingung entspricht: Name = TextInput1.Text.

• Sobald Power Apps den passenden Datensatz (über LookUp) findet, aktualisiert er die Beschreibung des Artikels in der Datenquelle basierend auf dem, was Sie in der Texteingabe Neue Beschreibung eingegeben haben.

Testen Sie dies, indem Sie eine Vorschau Ihrer App anzeigen. Wählen Sie im Katalog das Element „Zimt“ aus, und ersetzen Sie dann die aktuelle Beschreibung durch „Grüner Tee mit Zimtgeschmack“. Klicken Sie dann auf die Option Aktualisieren. Nach einem Moment ändert sich die Beschreibung im Katalog in die aktualisierte Beschreibung.

Herzlichen Glückwunsch! Sie haben eine einfache Technik kennengelernt, um Ihre Datenquelle per Patch zu aktualisieren, und wie Sie Ihre Daten in der App mithilfe von Sammlungen verwenden/ändern können.