Anzeigen, Sortieren und Filtern von Daten in einem Canvas-App-Katalog

Erstellen Sie einen Katalog, um Bilder und Text zu verschiedenen Produkten anzuzeigen, und sortieren und filtern Sie diese Informationen.

In Power Apps können Sie einen Katalog verwenden, um mehrere verwandte Elemente anzuzeigen. Kataloge eignen sich hervorragend zur Anzeige von Produktinformationen, z.B. Namen und Preise. In diesem Thema erstellen wir einen Katalog und sortieren und filtern die Informationen mithilfe von Excel-ähnlichen Funktionen. Außerdem wird bei Auswahl eines Elements ein Rahmen um das Element platziert.

Voraussetzungen

• Anmeldung bei for Power Apps, und führen dann eine Anmeldung mit denselben Anmeldeinformationen durch, mit denen Sie sich angemeldet haben.
• Erstellen Sie aus einer Vorlage oder mithilfe von Daten eine Tablet-App, oder erstellen Sie die App von Grund auf neu.
• Machen Sie sich damit vertraut, wie Sie ein Steuerelement konfigurieren.
• In den hier gezeigten Schritten werden die CreateFirstApp-Daten als Beispieleingabe verwendet, die auch JPG-Bilder umfassen. Die ZIP-Datei enthält eine XML-Datei, die in Excel konvertiert werden kann. Andernfalls liest Power Apps die Dateien in den ZIP-Dateien automatisch und importiert sie erfolgreich. Sie können diese Beispieldaten herunterladen und verwenden oder eigene Daten importieren.

Anzeigen von Daten in einem Katalog

1. Erstellen Sie unter Verwendung der Beispieldaten eine Sammlung namens Inventory. Führen Sie hierbei diese Schritte aus:

   1. Wählen Sie auf der Registerkarte Einfügen die Option Steuerelemente und anschließend Importieren aus.

      

   2. Legen Sie die Eigenschaft OnSelect des Importsteuerelements auf die folgende Formel fest:
      Collect(Inventory, Import1.Data)

      

   3. Klicken Sie auf die Schaltfläche Daten importieren, um den Windows-Explorer zu öffnen. Wählen Sie CreateFirstApp.zip und anschließend Öffnen aus.

   4. Wählen Sie im Menü Datei die Option Sammlungen aus. Die Sammlung „Inventory“ wird mit den importierten Daten aufgeführt:

      

      Sie haben soeben die Sammlung „Inventory“ erstellt, die Informationen zu fünf Produkten enthält, darunter ein Bild des Entwurfs, den Namen des Produkts und die im Lager vorrätige Stückanzahl.

      Hinweis

      Das Importsteuerelement wird zum Importieren von Excel-ähnlichen Daten und zum Erstellen der Sammlung verwendet. Das Importsteuerelement importiert Daten, wenn Sie Ihre App erstellen und eine Vorschau der App anzeigen. Aktuell importiert das Importsteuerelement keine Daten, wenn Sie Ihre App veröffentlichen.

2. Wählen Sie den nach links weisenden Pfeil aus, um zum Designer zurückzukehren.

3. Klicken oder tippen Sie auf der Registerkarte Einfügen auf Katalog, und klicken oder tippen Sie dann auf den Katalog Horizontal.

   

4. Klicken oder tippen Sie im rechten Bereich auf die Option, in der Titel und Untertitel die Grafik überschneiden:

   

5. Legen Sie die Items-Eigenschaft des Katalogs auf Inventory fest:

   

6. Benennen Sie den Katalog in ProductGallery um, und verschieben Sie den Katalog, damit er nicht die anderen Steuerelemente blockiert. Ändern Sie die Größe des Katalogs, sodass drei Produkte angezeigt werden:

   

7. Wählen Sie im ersten Katalogelement die unten angezeigte Bezeichnung aus:

   

   Hinweis

   Wenn Sie das erste Element in einem Katalog ändern, ändern Sie automatisch auch alle weiteren Elemente im Katalog.

8. Legen Sie die Text-Eigenschaft der Bezeichnung auf den folgenden Ausdruck fest:
   ThisItem.UnitsInStock
   

   Hierdurch zeigt die Bezeichnung die für jedes Produkt im Lager vorrätige Stückanzahl an:

Mithilfe der hier genannten Schritte haben Sie Daten in eine Sammlung importiert, die JPG-Bilder enthalten. Anschließend haben Sie einen Katalog hinzugefügt, der die Daten anzeigt, und Sie haben eine Bezeichnung konfiguriert, mit der die für jedes Produkt im Lager vorrätige Stückanzahl angezeigt wird.

Markieren des ausgewählten Katalogelements

1. Wählen Sie ein Element im Katalog aus, nicht jedoch das erste Element. Das Bearbeitungssymbol wird angezeigt (oben links). Wählen Sie das Bearbeitungssymbol aus:
   

2. Wählen Sie auf der Registerkarte Einfügen die Option Formen und anschließend das Rechteck aus. Für jedes Katalogelement wird ein durchgehendes blaues Rechteck angezeigt.

3. Wählen Sie auf der Registerkarte Start die Option Füllung und anschließend Keine Füllung aus.

4. Wählen Sie Rahmen und anschließend Rahmenart aus, und wählen Sie dann die durchgezogene Linie aus.

5. Wählen Sie erneut Rahmen aus, und legen Sie die Stärke auf 3 fest. Ändern Sie die Größe des Rechtecks, sodass es das Katalogelement umschließt. Die Elemente in Ihrem Katalog weisen jetzt einen blauen Rahmen auf und sollten folgendermaßen aussehen:
   

6. Wählen Sie auf der Registerkarte Form die Option Visible aus, und geben Sie in der Bearbeitungsleiste die folgende Formel ein:

   If(ThisItem.IsSelected, true)

   Die aktuelle Auswahl in einem Katalog ist von einem blauen Rechteck umgeben. Wählen Sie einige Katalogelemente aus, um zu bestätigen, dass das Rechteck um jedes ausgewählte Element platziert wird. Sie können auch die Vorschau öffnen, um zu sehen und zu testen, was Sie erstellen.

Mithilfe der hier genannten Schritte haben Sie einen Rahmen um die aktuelle Auswahl im Katalog einfügt.

Sortieren und Filtern von Elementen im Katalog

Mithilfe der nachfolgenden Schritte werden wir die Katalogelemente in aufsteigender und absteigender Reihenfolge sortieren. Darüber hinaus fügen wir einen Schieberegler hinzu, um Katalogelemente nach der im Lager vorrätigen Stückzahl zu „filtern“, die von Ihnen ausgewählt wurde.

Sortieren in aufsteigender oder absteigender Reihenfolge

1. Wählen Sie ein Element im Katalog aus, nicht jedoch das erste Element.

2. Die Eigenschaft Items ist aktuell auf „Inventory“ festgelegt (den Namen Ihrer Sammlung). Ändern Sie die Einstellung wie folgt:

   Sort(Inventory, ProductName)

   Hierdurch werden die Elemente im Katalog in aufsteigender Reihenfolge nach dem Produktnamen sortiert:

   Versuchen Sie es mit der absteigenden Reihenfolge. Legen Sie die Items-Eigenschaft des Katalogs auf die folgende Formel fest:

   Sort(Inventory, ProductName, Descending)

Hinzufügen eines Schiebereglers und Filtern der Elemente im Katalog

1. Fügen Sie ein Steuerelement vom Typ „Schieberegler“ hinzu (Registerkarte Einfügen > Steuerelemente), benennen Sie es in StockFilter um, und verschieben Sie es unter den Katalog.

2. Konfigurieren Sie den Schieberegler so, dass Benutzer ihn nicht auf einen Wert außerhalb des Bereichs für die vorrätige Stückzahl festlegen können:

   1. Wählen Sie auf der Registerkarte Inhalt die Einstellung Min, und geben Sie den folgenden Ausdruck ein:
      Min(Inventory, UnitsInStock)
   2. Wählen Sie auf der Registerkarte Inhalt die Einstellung Max, und geben Sie den folgenden Ausdruck ein:
      Max(Inventory, UnitsInStock)

3. Wählen Sie ein Element im Katalog aus, nicht jedoch das erste Element. Legen Sie die Items-Eigenschaft des Katalogs auf den folgenden Ausdruck fest:
   Filter(Inventory, UnitsInStock<=StockFilter.Value)

4. Stellen Sie den Schieberegler in der Vorschau auf einen Wert zwischen der höchsten und der niedrigsten Menge im Katalog ein. Wenn Sie den Wert über den Schieberegler ändern, werden nur die Produkte angezeigt, deren Stückzahl unter dem ausgewählten Wert liegt:
   

Fügen wir jetzt unseren Filter hinzu:

1. Kehren Sie zum Designer zurück.
2. Wählen Sie auf der Registerkarte Einfügen die Einstellung Text aus, wählen Sie Eingabetext aus, und benennen Sie das neue Steuerelement in NameFilter um. Verschieben Sie das Textsteuerelement unter den Schieberegler.
3. Legen Sie die Items-Eigenschaft des Katalogs auf den folgenden Ausdruck fest:
   Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
4. Stellen Sie den Schieberegler in der Vorschau auf den Wert 30 ein, und geben Sie im Texteingabe-Steuerelement den Buchstaben g ein. Der Katalog zeigt nur Produkte an, bei denen die vorrätige Stückzahl unter 30 liegt und deren Name mit dem Buchstaben „g“ beginnt:
   

: Tipps und Tricks ( Tips and Tricks)

• Sie können jederzeit die Vorschau-Schaltfläche auswählen (), um zu sehen, was Sie erstellt haben, und um sie zu testen.
• Beim Entwerfen Ihrer App können Sie die Größe der Steuerelemente erneut ändern und sie durch Klicken und Ziehen verschieben.
• Drücken Sie ESC, oder klicken Sie auf X, um das Vorschaufenster zu schließen.
• Wenn Sie einen Katalog verwenden, wählen Sie das erste Element im Katalog aus, um alle Elemente im Katalog zu ändern. Wählen Sie beispielsweise das erste Element aus, um allen Elementen im Katalog einen Rahmen hinzuzufügen.
• Um die Eigenschaften des Katalogs zu aktualisieren, wählen Sie ein beliebiges Element im Katalog aus, nicht jedoch das erste Element. Wählen Sie beispielsweise das zweite Element aus, um die Eigenschaften Items, ShowScrollbar und weitere Eigenschaften zu aktualisieren, die auf den Katalog angewendet werden (nicht auf die Elemente im Katalog).

Vermittelte Inhalte

In diesem Thema haben Sie folgende Aufgaben ausgeführt:

• Sie haben eine Sammlung erstellt, Daten mit JPG-Bildern in diese Sammlung importiert und die Daten in einem Katalog angezeigt.
• Sie haben unter jedem Bild im Katalog eine Bezeichnung konfiguriert, um die im Lager vorrätige Stückzahl anzugeben.
• Sie haben einen Rahmen um das ausgewählte Element hinzugefügt.
• Sie haben die Elemente nach Produktnamen in aufsteigender und absteigender Reihenfolge sortiert.
• Sie haben einen Schieberegler und ein Eingabetextfeld hinzugefügt, um die Produkte nach vorrätiger Stückzahl und nach dem Produktnamen zu filtern.