Anzeigen, Sortieren und Filtern von Daten in einer Canvas-App-Galerie

Erstellen Sie einen Katalog, um Daten zu mehreren Produkten anzuzeigen, und sortieren und filtern Sie diese Informationen.

Verwenden Sie in Power Apps einen Katalog, um mehrere verwandte Elemente anzuzeigen, ähnlich wie ein Produktkatalog. Kataloge eignen sich hervorragend zum Anzeigen von Produktnamen, Preisen und Einheitenanzahlen. In diesem Artikel erstellen Sie einen Katalog und sortieren und filtern die Informationen mithilfe von Power Fx-Funktionen. Wenn ein Element ausgewählt ist, wird es durch einen Rahmen hervorgehoben.

Voraussetzungen

• Registrieren Sie sich für Power Apps, und melden Sie sich dann mit denselben Anmeldeinformationen an, die Sie für die Registrierung verwendet haben.
• Erstellen Sie eine Tablet-App aus einer Vorlage oder von Grund auf neu.
• Erfahren Sie, wie Sie ein Steuerelement konfigurieren.

Anzeigen von Daten in einer Galerie

1. Erstellen Sie eine Sammlung namens "Inventory ", indem Sie ein Button-Steuerelement hinzufügen und die OnSelect-Eigenschaft auf die folgende Formel festlegen:

   ClearCollect(
       Inventory,
       { ProductName: "Europa",    UnitsInStock: 25 },
       { ProductName: "Ganymede",  UnitsInStock: 32 },
       { ProductName: "Callisto",  UnitsInStock: 12 },
       { ProductName: "Io",        UnitsInStock: 47 },
       { ProductName: "Titan",     UnitsInStock: 18 }
   )
   

2. Wählen Sie die Schaltfläche aus, während Sie die ALT-TASTE gedrückt halten (oder die Vorschau und dann die Schaltfläche auswählen), um die Bestandssammlung mit fünf Produkten aufzufüllen, jeweils mit einem Produktnamen und einer Einheitenanzahl.

   Hinweis

   In diesem Artikel wird eine kleine Inlinesammlung verwendet, sodass Sie ohne externe Daten mitmachen können. Stellen Sie für Produktionsszenarien eine Verbindung mit einer echten Datenquelle wie SharePoint oder Microsoft Dataverse her.

3. Wählen Sie auf der Registerkarte EinfügenLayout>Horizontale Galerie aus.

4. Wählen Sie im rechten Bereich ein Layout mit Titel und Untertitel aus.

5. Legen Sie die Items-Eigenschaft des Katalogs auf "Inventar" fest.

6. Benennen Sie den Katalog in ProductGallery um , und ändern Sie dessen Größe, um drei Produkte gleichzeitig anzuzeigen.

7. Wählen Sie die untere Beschriftung im ersten Katalogelement aus.

   Hinweis

   Wenn Sie das erste Element in einem Katalog ändern, gilt die gleiche Änderung automatisch für alle anderen Elemente.

8. Legen Sie die Eigenschaft Text der Bezeichnung auf Folgendes fest:

   ThisItem.UnitsInStock
   

Das Etikett zeigt nun die Anzahl der Lagereinheiten für jedes Produkt an.

Markieren Sie das ausgewählte Galerieelement

1. Wählen Sie ein beliebiges Katalogelement mit Ausnahme des ersten Elements aus, und wählen Sie dann das Bearbeitungssymbol (Bleistift) in der oberen linken Ecke aus, um in den Bearbeitungsmodus der Vorlage zu gelangen.

2. Wählen Sie auf der Registerkarte "Einfügen " die Option "Shapes>Rectangle" aus. In jedem Galerieelement erscheint ein ausgefülltes Rechteck.

3. Legen Sie im Eigenschaftenbereich"Farbe" auf "Keine Füllung" (transparent) fest.

4. Legen Sie unter Rahmen im Dropdownmenü den Stil auf Durchgezogen und den Wert für die Stärke auf 3 fest.

5. Ändern Sie die Größe des Rechtecks, sodass es den Inhalt des Galerieelements umschließt.

6. Legen Sie die Eigenschaft Visible des Rechtecks auf:

   ThisItem.IsSelected
   

Der blaue Rahmen wird jetzt nur um das ausgewählte Element herum angezeigt.

Sortieren und Filtern von Elementen im Katalog

Sortieren in aufsteigender oder absteigender Reihenfolge

1. Wählen Sie ein beliebiges Katalogelement mit Ausnahme des ersten Elements aus, um die Eigenschaft "Elemente " des Katalogs zu aktualisieren.

2. Ändern Sie die Items-Eigenschaft , um nach Produktnamen in aufsteigender Reihenfolge zu sortieren:

   Sort(Inventory, ProductName)
   

3. Um in absteigender Reihenfolge zu sortieren, ändern Sie die Items-Eigenschaft in:

   Sort(Inventory, ProductName, SortOrder.Descending)
   

Filtern von Elementen mit einem Schieberegler und einer Texteingabe

1. Wählen Sie auf der Registerkarte EinfügenEingabe>Schieberegler aus. Benennen Sie den Schieberegler in StockFilter um, und positionieren Sie ihn unter dem Katalog.

2. Legen Sie den Bereich des Schiebereglers so fest, dass er mit den Daten übereinstimmt:

   • Min festlegen auf:Min(Inventory, UnitsInStock)
   • Max festlegen auf:Max(Inventory, UnitsInStock)

3. Wählen Sie ein beliebiges Katalogelement mit Ausnahme des ersten Elements aus, und legen Sie die Eigenschaft "Items " auf Folgendes fest:

   Filter(Inventory, UnitsInStock <= StockFilter.Value)
   

4. Wählen Sie "Vorschau " (F5) aus, und passen Sie den Schieberegler an, um die Katalogfilterprodukte nach Lagermenge anzuzeigen.

5. Um auch nach Produktname zu filtern, fügen Sie ein Texteingabesteuerelement hinzu (wählen Sie auf der Registerkarte "Einfügen", "Eingabetexteingabe>" aus), benennen Sie ihn "NameFilter" um, und platzieren Sie es unter dem Schieberegler.

6. Aktualisieren Sie die Items-Eigenschaft , um beide Filter zu kombinieren:

   Filter(Inventory, UnitsInStock <= StockFilter.Value && NameFilter.Text in ProductName)
   

7. Legen Sie in der Vorschau den Schieberegler auf 30 fest, und geben Sie g in die Texteingabe ein. Die Galerie zeigt nur Produkte mit 30 oder weniger Lagereinheiten und einen Produktnamen mit dem Buchstaben "g".

Tipps und Tricks

• Wählen Sie jederzeit die Vorschauschaltfläche (F5) aus, um zu testen, was Sie erstellt haben.
• Sie können die Größe und Position von Steuerelementen mithilfe von Drag-and-Drop ändern.
• Drücken Sie ESC , oder wählen Sie X aus, um das Vorschaufenster zu schließen.
• Wenn Sie alle Elemente in einem Katalog gleichzeitig ändern möchten, wählen Sie das erste Element im Katalog aus.
• Um Eigenschaften auf Katalogebene (z. B. Elemente oder ShowScrollbar) zu aktualisieren, wählen Sie ein beliebiges Element mit Ausnahme des ersten Elements aus.

Zusammenfassung

In diesem Artikel erfahren Sie:

• Erstellt eine Sammlung mit Beispielproduktdaten.
• Sammlungsdaten in einer horizontalen Galerie angezeigt.
• Beschriftungen wurden so konfiguriert, dass Feldwerte für jeden Datensatz angezeigt werden.
• Ein Auswahlrahmen um das aktive Katalogelement wurde hinzugefügt.
• Sortierte Katalogelemente nach Produktnamen in aufsteigender und absteigender Reihenfolge.
• Verwendet einen Schieberegler und eine Texteingabe, um Produkte nach Lagermenge und Name zu filtern.