Übung – Daten mit Canvas-Apps formen

In dieser Übung formen Sie Daten in Ihrer Canvas-App.

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.

Datenquelle hinzufügen

1. Melden Sie sich bei Power Apps an.

2. Wählen Sie auf der linken Seite die Option + Erstellen aus.

3. Wählen Sie Mit einem leeren Canvas anfangen aus.

   

4. Wählen Sie Tabletgröße aus.

5. Wählen Sie das Symbol Speichern oben rechts aus, und geben Sie ihm den Namen „ShapeData“.

6. Stellen Sie sicher, dass Sie dieses Excel-Arbeitsblatt zu Ihrem OneDrive hinzugefügt haben.

7. Wählen Sie im Dropdownmenü Einfügen die Option Vertikaler Katalog aus.

   

8. Geben Sie im Suchfeld im angezeigten Popup-Menü OneDrive for Business ein, und wählen Sie OneDrive for Business aus der Liste aus. Sie hätten auch Konnektoren erweitern und durch alle verfügbaren Konnektoren scrollen können, bis Sie den Konnektor OneDrive for Business gefunden hätten.

   

9. Wählen Sie + Verbindung hinzufügen aus.

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

11. Wenn Sie zur Auswahl einer Excel-Datei aufgefordert werden, navigieren Sie zu dem Speicherort der in Schritt 3 heruntergeladenen Excel-Datei und wählen Sie sie aus.

12. Aktivieren Sie die Tabelle Artikel, und wählen Sie dann Verbinden aus.

Sie haben sich mit Ihrer Excel-Tabelle in der OneDrive for Business-Liste verbunden und können die Daten im Gallery-Steuerelement anzeigen.

Daten in Ihrem Katalog formatieren

1. Wählen Sie dies im Katalog aus, den Sie hinzugefügt haben.

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

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

   

4. Wählen Sie im Eigenschaftenbereich rechts den lila Text 8 Selected für die Eigenschaft Felder aus, und legen Sie die folgenden Punkte fest:

   • Body1: Beschreibung

   • Image2: Bild

   • Subtitle2: UnitPrice

   • Title2: Name

   

5. Wählen Sie zum Beenden das X rechts von Daten aus.

6. Wählen Sie im Katalog den Preis in der ersten Zeile aus.

7. Stellen Sie in der Bearbeitungsleiste sicher, dass Text ausgewählt ist, und geben Sie Folgendes ein.

   "$" & ThisItem.UnitPrice
   

   

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

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

   

10. Wählen Sie Ausfüllen aus, und Sie sehen, dass das Bild nun den Bereich ausfüllt.

Sie haben jetzt die Daten in Ihrem Katalog konfiguriert und mit ihnen interagiert.

Daten in einem Katalog filtern

1. Wählen Sie den Katalog aus.

2. Stellen Sie sicher, dass die Eigenschaft Items in der Bearbeitungsleiste ausgewählt ist.

3. Ändern Sie den Ausdruck wie folgt:

   Filter(Items, Origin = "China")
   

   Beachten Sie, dass im Katalog nur noch zwei Artikel angezeigt werden, bei denen der Ursprung China ist.

4. Versuchen Sie das Gleiche zu tun, aber mit dem Operator And:

   Filter(Items, Origin = "China" And UnitsSold > 25)
   

   Beachten Sie, dass im Katalog nur noch ein Artikel angezeigt wird, der beide oben genannten Kriterien erfüllt.

   

5. Nun ändern wir die Eigenschaft Items wieder in die Artikeldatenquelle. Wir rufen diese Filterfunktion später noch einmal auf.

   Items
   

Die Suchfunktion verwenden

1. Wählen Sie im Dropdownmenü Einfügen die Option Texteingabe aus. Positionieren Sie die Texteingabe über dem Katalog.

2. Wählen Sie im linken Bereich unter Strukturansicht > Bildschirme > Screen1 > die drei Punkte auf der rechten Seite und dann Umbenennen aus, um die Texteingabe in SearchInput umzubenennen. Wir benennen diese Komponenten um, damit wir auf sie verweisen können.

   

3. Wählen Sie nun den Katalog aus. Stellen Sie sicher, dass die Eigenschaft „Items“ in der Bearbeitungsleiste ausgewählt ist, und schreiben Sie dann diesen Ausdruck:

   Search(Items, SearchInput.Text, Name)
   

   Dies liegt Ihnen vor:

   Search(Items...) – Eine Funktion, mit der Sie eine flexiblere Abfrage für eine Zeichenfolgenspalte durchführen können.

   SearchInput.Text – Dadurch wird der in das „text input“-Steuerelement SearchInput eingegebene Text abgerufen.

   Name – Stellt die Spalte dar, in der die Suche durchgeführt wird

   Damit werden alle Zeilen zurückgegeben, in denen die Spalte Name den im „Text Input“-Steuerelement SearchInput eingegebenen Wert enthält.

4. Wenn Sie mehr als eine Zeichenfolgespalte durchsuchen möchten, können Sie die Spaltennamen am Ende des Ausdrucks anhängen. In der folgenden Formel haben wir „Beschreibung“ hinzugefügt.

   Search(Items, SearchInput.Text, Name, Description)
   

Funktionen zur Datenstrukturierung kombinieren

Wie in Einheit 3 erläutert, können Sie Funktionen für komplexere Funktionen in Ihrer Anwendung kombinieren. Wir haben die Funktion Filter sowie die Funktion Suche getestet, und es ist nun an der Zeit, sie zu einer Funktion zu kombinieren.

1. Beginnen Sie mit der Suchfunktion, die wir im vorherigen Schritt ausgeführt haben.

2. Ersetzen Sie Artikel durch Filter(Items, Origin = "China"). Dadurch sieht Ihr Ausdruck dann folgendermaßen aus:

   Search(Filter(Items, Origin = "China"), SearchInput.Text, Name, Description)
   

Die erste Option, die Sie für die Such-Funktion bereitstellen müssen, ist eine Tabelle mit Daten. Die Filter-Funktion gibt eine Tabelle mit Daten zurück. Dies bedeutet, dass Sie die Filter-Funktion als Datenquelle für Ihre Suchfunktion verwenden können. Indem Sie dies als Formel für die Eigenschaft „Artikel“ Ihres Katalog-Steuerelements hinzufügen, zeigen Sie Ihren Benutzern die Daten an, die sie benötigen, und ermöglichen Ihnen zusätzlich die Suche.

In Power Apps können Sie das Konzept der Verwendung einer Funktion, um Informationen für eine andere Funktion bereitzustellen, in vielen Fällen verwenden.

Daten zwischen Sammlungen und Datenquellen verschieben

1. Wählen Sie die Dropdownoption Einfügen aus, um ein Schaltflächen-Steuerelement einzufügen. Wählen Sie dann Schaltfläche aus, und positionieren Sie das neue Schaltfläche unter Ihrem Katalog.

2. Ändern Sie den Text auf der Schaltfläche in Der Sammlung hinzufügen.

3. Wählen Sie die Schaltfläche aus, und ersetzen Sie in der Bearbeitungsleiste „false“ durch diesen Ausdruck:

   Collect(ItemsCollection, Items)
   

   Elementsammlung – Bezieht sich auf den Sammlungsnamen

   Artikel – Bezieht sich auf den Namen der Datenquelle

   Sammeln – Kopiert alle Zeilen aus den Artikeln in die ItemsCollection-Sammlung

   

4. Geben Sie die App (Vorschau) über das Symbol Wiedergeben in der oberen rechten Ecke wieder. Klicken Sie auf die Schaltfläche Der Sammlung hinzufügen. Schließen Sie den Vorschaumodus, indem Sie in der oberen rechten Ecke auf X klicken.

5. Wählen Sie die Variablen auf der linken Seite aus, erweitern Sie die Sammlungen, und wählen Sie dann die Option ItemsCollection aus. Sie werden dann sehen, dass alle Zeilen aus der Datenquelle Artikel zur Sammlung ItemsCollection hinzugefügt wurden.

   

6. Wählen Sie im Dropdownmenü Einfügen die Option Datentabelle aus, und positionieren Sie sie neben dem Katalog.

7. Stellen Sie in der Bearbeitungsleiste sicher, dass „Artikel“ ausgewählt ist, und geben Sie dann ItemsCollection ein.

   Das bedeutet, dass die Datenquelle für die Tabelle die ItemsCollection-Sammlung und nicht die Tabelle Items im Excel-Arbeitsblatt ist.

8. Im Bereich „Eigenschaften“ Auf der rechten Seite passen wir die Felder an, indem wir den lila Text 2 Selected neben der Eigenschaft Felder auswählen.

9. Wählen Sie + Feld hinzufügen aus.

10. Wählen Sie alle verfügbaren Spalten und dann Hinzufügen aus.

    

11. Wählen Sie zum Beenden das X rechts von Daten aus.

12. Wählen Sie auf der Registerkarte Einfügen die Option Schaltfläche aus, und positionieren Sie Ihre Schaltfläche unter Ihrer Tabelle. Wiederholen Sie diesen Vorgang viermal.

13. Ändern Sie den Text auf allen vier Schaltflächen entsprechend in: Spalte hinzufügen, Spalte ablegen, Spalte anzeigen, Spalte umbenennen.

    

14. Wählen Sie die Schaltfläche Spalte hinzufügen aus.

15. Aktualisieren Sie die Bearbeitungsleiste auf diesen Ausdruck:

    Collect(AddCollection, AddColumns(ItemsCollection, Revenue, UnitPrice * UnitsSold))
    

    Hier haben wir eine neue Sammlung namens Sammlung hinzufügen erstellt, die alle Daten aus der Sammlung Elementsammlung kopiert. Zusätzlich verwenden wir jedoch die AddColumns-Funktion zum Hinzufügen einer neuen Spalte mit dem Namen Umsatzerlös, die als VK-Preis * Verkaufte Einheiten berechnet wird.

16. Wählen Sie die Schaltfläche Spalte ablegen aus.

17. Aktualisieren Sie die Bearbeitungsleiste auf diesen Ausdruck:

    Collect(DropCollection, DropColumns(ItemsCollection, UnitPrice))
    

    Hier haben wir eine neue Sammlung namens DropCollection erstellt, die alle Daten aus der Sammlung ItemsCollection kopiert. Zusätzlich verwenden wir jedoch die DropColumns-Funktion zum Entfernen der Spalte „VK-Preis“.

18. Wählen Sie die Schaltfläche Spalte umbenennen aus.

19. Aktualisieren Sie die Bearbeitungsleiste auf diesen Ausdruck:

    Collect(RenameCollection, RenameColumns(ItemsCollection, Name, Product))
    

    Hier haben wir eine neue Sammlung namens RenameCollection erstellt, die alle Daten aus der Sammlung ItemsCollection kopiert. Zusätzlich verwenden wir jedoch die RenameColumns-Funktion, um die Spalte Name in Produkt umzubenennen.

20. Wählen Sie die Schaltfläche Spalte anzeigen aus.

21. Aktualisieren Sie die Bearbeitungsleiste auf diesen Ausdruck:

    Collect(ShowCollection, ShowColumns(ItemsCollection, Name))
    

    Hier haben wir eine neue Sammlung namens ShowCollection erstellt, die alle Daten aus der Sammlung ItemsCollection kopiert. Zusätzlich verwenden wir jedoch die ShowColumns-Funktion, um nur die Spalte Name anzuzeigen.

22. Geben Sie die App (Vorschau) über das Symbol Wiedergeben in der oberen rechten Ecke wieder. Drücken Sie alle vier Schaltflächen. Schließen Sie den Vorschaumodus, indem Sie in der oberen rechten Ecke auf X klicken.

23. Wählen Sie die Registerkarte Variablen auf der linken Seite aus, erweitern Sie die Sammlungen, dann werden Ihnen die Sammlungen mit den Ergebnissen der Auswahl der Schaltflächen angezeigt.

    

Hoffentlich erkennen Sie jetzt die Möglichkeiten, Daten in Ihrer App zu gestalten!