Anzeigen, Sortieren und Filtern von Daten in einem PowerApps-KatalogShow, sort, and filter data in a PowerApps gallery

Erstellen Sie einen Katalog, um Bilder und Text zu verschiedenen Produkten anzuzeigen, und sortieren und filtern Sie diese Informationen.Create a gallery to show images and text about several products, and sort and filter that information.

In PowerApps können Sie einen Katalog verwenden, um mehrere verwandte Elemente anzuzeigen.In PowerApps, you can use a gallery to show several related items, just as you see in a catalog. Kataloge eignen sich hervorragend zur Anzeige von Produktinformationen, z.B. Namen und Preise.Galleries are great for showing information about products, such as names and prices. In diesem Thema erstellen wir einen Katalog und sortieren und filtern die Informationen mithilfe von Excel-ähnlichen Funktionen.In this topic, we create a gallery and sort and filter the information using Excel-like functions. Außerdem wird bei Auswahl eines Elements ein Rahmen um das Element platziert.Also, when an item is selected, a border is placed around the item.

Hinweis

In diesem Thema wird eine Tablet-App verwendet.This topic uses a tablet app. Sie können auch eine Telefon-App verwenden, aber dann müssen einige der Steuerelemente in der Größe verändert werden.You can use a phone app but you will need to resize some of the controls.

VoraussetzungenPrerequisites

  • Registrieren Sie sich für PowerApps, und installieren Sie PowerApps.Sign up for PowerApps and install PowerApps. Melden Sie sich beim Öffnen von PowerApps mit denselben Anmeldeinformationen an, die Sie auch beim Registrieren angegeben haben.When you open PowerApps, sign-in using the same credentials that you used to sign up.
  • Erstellen Sie aus einer Vorlage oder mithilfe von Daten eine Tablet-App, oder erstellen Sie die App von Grund auf neu.Create a tablet app from a template, from data, or from scratch.
  • Erfahren Sie, wie Sie ein Steuerelement konfigurieren.Learn how to configure a control.
  • In den hier gezeigten Schritten werden die CreateFirstApp-Daten als Beispieleingabe verwendet, die auch JPG-Bilder umfassen.These steps use the CreateFirstApp as sample input data, which includes .jpg images. Die ZIP-Datei enthält eine XML-Datei, die in Excel konvertiert werden kann.The zip file includes an XML file that can be converted to Excel. Andernfalls liest PowerApps die Dateien in den ZIP-Dateien automatisch und importiert sie erfolgreich.Otherwise, PowerApps automatically reads the files in the .zip files and imports it successfully. Sie können diese Beispieldaten herunterladen und verwenden oder eigene Daten importieren.You can download and use this sample data, or import your own.
  1. Erstellen Sie unter Verwendung der Beispieldaten eine Sammlung namens Inventory.Create a collection named Inventory using the sample data. Führen Sie hierbei diese Schritte aus:Steps include:

    1. Wählen Sie auf der Registerkarte Einfügen die Option Steuerelemente und anschließend Importieren aus:On the Insert tab, select Controls, and then select Import:

    2. Legen Sie die Eigenschaft OnSelect des Importsteuerelements auf die folgende Formel fest:Set the OnSelect property of the import control to the following formula:
      Collect(Inventory, Import1!Data)Collect(Inventory, Import1!Data)

    3. Klicken Sie auf die Schaltfläche Daten importieren, um den Windows-Explorer zu öffnen.Select the Import Data button to open Windows Explorer. Wählen Sie CreateFirstApp.zip und anschließend Öffnen aus.Select CreateFirstApp.zip, and select Open.
    4. Wählen Sie im Menü Datei die Option Sammlungen aus.In the File menu, select Collections. Die Sammlung „Inventory“ wird mit den importierten Daten aufgeführt:The Inventory collection is listed with the data you imported:

      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.You've just created the Inventory collection, which contains information about five products, including a design image, the name of the product, and the number of units in stock.

      Hinweis

      Das Importsteuerelement wird zum Importieren von Excel-ähnlichen Daten und zum Erstellen der Sammlung verwendet.The import control is used to import Excel-like data and create the collection. Das Importsteuerelement importiert Daten, wenn Sie Ihre App erstellen und eine Vorschau der App anzeigen.The import control imports data when you are creating your app, and previewing your app. Aktuell importiert das Importsteuerelement keine Daten, wenn Sie Ihre App veröffentlichen.Currently, the import control does not import data when you publish your app.

  2. Wählen Sie den nach links weisenden Pfeil aus, um zum Designer zurückzukehren.Select the back arrow to return to the designer.
  3. Klicken oder tippen Sie auf der Registerkarte Einfügen auf Katalog, und klicken oder tippen Sie dann auf den Katalog Horizontal.On the Insert tab, click or tap Gallery, and then click or tap the Horizontal gallery.

  4. Klicken oder tippen Sie im rechten Bereich auf die Option, in der Titel und Untertitel die Grafik überschneiden:In the right-hand pane, click or tap the option in which the title and the subtitle overlay the graphic:

  5. Legen Sie die Items-Eigenschaft des Katalogs auf Inventory fest:Set the Items property of the gallery to Inventory:

  6. Benennen Sie den Katalog in ProductGallery um, und verschieben Sie den Katalog, damit er nicht die anderen Steuerelemente blockiert.Rename the gallery to ProductGallery, and move the gallery so it doesn't block the other controls. Ändern Sie die Größe des Katalogs, sodass drei Produkte angezeigt werden:Resize the gallery so it shows three products:

  7. Wählen Sie im ersten Katalogelement die unten angezeigte Bezeichnung aus:In the first item of the gallery, select the bottom label:

    Hinweis

    Wenn Sie das erste Element in einem Katalog ändern, ändern Sie automatisch auch alle weiteren Elemente im Katalog.When you change the first item in any gallery, you automatically change all other items in the gallery.

  8. Legen Sie die Text-Eigenschaft der Bezeichnung auf den folgenden Ausdruck fest:Set the Text property of the label to the following expression:
    ThisItem!UnitsInStockThisItem!UnitsInStock

    Hierdurch zeigt die Bezeichnung die für jedes Produkt im Lager vorrätige Stückanzahl an:When you do this, the label shows the units in stock for each product:

Hinweis

Standardmäßig ist die Text-Eigenschaft der obersten Bezeichnung auf ThisItem!ProductName festgelegt.By default, the Text property of the top label is set to ThisItem!ProductName. Sie können diese Einstellung auf ein anderes Element in Ihrer Sammlung festlegen.You can change it to any other item in your collection. Wenn Ihre Sammlung beispielsweise über die Felder ProductDescription oder Price verfügt, können Sie die Bezeichnung auf ThisItem!ProductDescription oder ThisItem!Price festlegen.For example, if your collection has ProductDescription or Price fields, you can set the label to ThisItem!ProductDescription or ThisItem!Price.

Mithilfe der hier genannten Schritte haben Sie Daten in eine Sammlung importiert, die JPG-Bilder enthalten.Using these steps, you imported data that includes .jpg images into a collection. 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.You then added a gallery that displays the data and configured a label to show the units in stock for each product.

  1. Wählen Sie ein Element im Katalog aus, nicht jedoch das erste Element.Select any item in the gallery except the first one. Das Bearbeitungssymbol wird angezeigt (oben links).The edit icon displays (upper left corner). Wählen Sie das Bearbeitungssymbol aus:Select the edit icon:
  2. Wählen Sie auf der Registerkarte Einfügen die Option Formen und anschließend das Rechteck aus.On the Insert tab, select Shapes, and then select the rectangle. Für jedes Katalogelement wird ein durchgehendes blaues Rechteck angezeigt.A blue solid rectangle appears in each gallery item.
  3. Wählen Sie auf der Registerkarte Start die Option Füllung und anschließend Keine Füllung aus.On the Home tab, select Fill, and then select No Fill.
  4. Wählen Sie Rahmen und anschließend Rahmenart aus, und wählen Sie dann die durchgezogene Linie aus.Select Border, select Border Style, and then select the solid line.
  5. Wählen Sie erneut Rahmen aus, und legen Sie die Stärke auf 3 fest.Select Border again, and set the thickness to 3. Ändern Sie die Größe des Rechtecks, sodass es das Katalogelement umschließt.Resize the rectangle so that it surrounds the gallery item. Die Elemente in Ihrem Katalog weisen jetzt einen blauen Rahmen auf und sollten folgendermaßen aussehen:The items in your gallery now have a blue border and should look similar to the following:
  6. Wählen Sie auf der Registerkarte Form die Option Sichtbar aus, und geben Sie in der Bearbeitungsleiste die folgende Formel ein:On the Shape tab, select Visible, and then enter the following formula in the Formula Bar:

    If(ThisItem!IsSelected, true)If(ThisItem!IsSelected, true)

    Die aktuelle Auswahl in einem Katalog ist von einem blauen Rechteck umgeben.A blue rectangle surrounds the current selection in a gallery. Wählen Sie einige Katalogelemente aus, um zu bestätigen, dass das Rechteck um jedes ausgewählte Element platziert wird.Select a few gallery items to confirm that the rectangle appears around each item that you select. Sie können auch die Vorschau öffnen, um die erstellten Elemente zu testen.Remember, you can also open Preview to see and test what you're creating.

Tipp

Wählen Sie das Rechteck aus, wählen Sie auf der Registerkarte Start die Option Neu anordnen und dann In den Hintergrund aus.Select the rectangle, select Reorder on the Home tab, and then select Send to Back. Mithilfe dieser Funktion können Sie ein Katalogelement auswählen, ohne dass der Rahmen andere Elemente blockiert.Using this feature, you can select a gallery item without the border blocking anything.

Mithilfe der hier genannten Schritte haben Sie einen Rahmen um die aktuelle Auswahl im Katalog einfügt.Using these steps, you added a border around the current selection in the gallery.

Mithilfe der nachfolgenden Schritte werden wir die Katalogelemente in aufsteigender und absteigender Reihenfolge sortieren.In these steps, we are going to sort the gallery items in ascending and descending order. 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.Also, we'll add a slider control to 'filter' gallery items by the units in stock that you choose.

Sortieren in aufsteigender oder absteigender ReihenfolgeSort in ascending or descending order

  1. Wählen Sie ein Element im Katalog aus, nicht jedoch das erste Element.Select any item in the gallery except the first one.
  2. Die Eigenschaft Items ist aktuell auf „Inventory“ festgelegt (den Namen Ihrer Sammlung).The Items property is currently set to Inventory (the name of your collection). Ändern Sie die Einstellung wie folgt:Change it to the following:

    Sort(Inventory, ProductName)Sort(Inventory, ProductName)

    Hierdurch werden die Elemente im Katalog in aufsteigender Reihenfolge nach dem Produktnamen sortiert: When you do this, the items in the gallery are sorted by the product name in ascending order:

    Versuchen Sie es mit der absteigenden Reihenfolge.Try descending order. Legen Sie die Items-Eigenschaft des Katalogs auf die folgende Formel fest:Set the Items property of the gallery to the following formula:

    Sort(Inventory, ProductName, Descending)Sort(Inventory, ProductName, Descending)

  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.Add a Slider control (Insert tab > Controls), rename it to StockFilter, and move it under the gallery.
  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:Configure the slider so that users can't set it to a value outside the range of units in stock:

    1. Wählen Sie auf der Registerkarte Inhalt die Einstellung Min, und geben Sie den folgenden Ausdruck ein:On the Content tab, select Min, and then enter the following expression:
      Min(Inventory, UnitsInStock)
    2. Wählen Sie auf der Registerkarte Inhalt die Einstellung Max, und geben Sie den folgenden Ausdruck ein:On the Content tab, select Max, and then enter the following expression:
      Max(Inventory, UnitsInStock)
  3. Wählen Sie ein Element im Katalog aus, nicht jedoch das erste Element.Select any item in the gallery except the first one. Legen Sie die Items-Eigenschaft des Katalogs auf den folgenden Ausdruck fest:Set the Items property of the gallery to the following expression:
    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.In Preview, adjust the slider to a value that's between the highest and the lowest quantity in the gallery. Wenn Sie den Wert über den Schieberegler ändern, werden nur die Produkte angezeigt, deren Stückzahl unter dem ausgewählten Wert liegt:As you adjust the slider, the gallery shows only those products that are less than the value you choose:

Fügen wir jetzt unseren Filter hinzu:Now, let's add to our filter:

  1. Kehren Sie zum Designer zurück.Go back to the designer.
  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.On the Insert tab, select Text, select Input Text, and rename the new control to NameFilter. Verschieben Sie das Textsteuerelement unter den Schieberegler.Move the text control below the slider.
  3. Legen Sie die Items-Eigenschaft des Katalogs auf den folgenden Ausdruck fest:Set the Items property of the gallery to the following expression:
    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.In Preview, set the slider to 30, and type the letter g in the text-input control. Der Katalog zeigt nur Produkte an, bei denen die vorrätige Stückzahl unter 30 liegt und deren Name mit dem Buchstaben „g“ beginnt:The gallery shows the only product with less than 30 units in stock and has a name with the letter "g":

Tipps und TricksTips and Tricks

  • Sie können jederzeit die Schaltfläche für die Vorschau () auswählen, um die erstellten Elemente anzuzeigen und zu testen.At anytime, you can select the preview button () to see what you created and test it.
  • Beim Entwurf Ihrer App können Sie die Größe der Steuerelemente ändern und sie verschieben, indem Sie darauf klicken und das Steuerelement an eine andere Position ziehen.When designing your app, you can re-size the controls and move them around using click-and-drag.
  • Drücken Sie ESC, oder klicken Sie auf X, um das Vorschaufenster zu schließen.Press ESC or select the X to close the preview window.
  • Wenn Sie einen Katalog verwenden, wählen Sie das erste Element im Katalog aus, um alle Elemente im Katalog zu ändern.When using a gallery, select the first item in the gallery to change all items in the gallery. Wählen Sie beispielsweise das erste Element aus, um allen Elementen im Katalog einen Rahmen hinzuzufügen.For example, select the first item to add a border to all items in the gallery.
  • Um die Eigenschaften des Katalogs zu aktualisieren, wählen Sie ein beliebiges Element im Katalog aus, nicht jedoch das erste Element.To update the properties of the gallery, select any item in the gallery except the first one. 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).For example, select the second item to update the Items, ShowScrollbar, and other properties that apply to the gallery (not the items in the gallery).

Vermittelte InhalteWhat you learned

In diesem Thema haben Sie folgende Aufgaben ausgeführt:In this topic, you:

  • Sie haben eine Sammlung erstellt, Daten mit JPG-Bildern in diese Sammlung importiert und die Daten in einem Katalog angezeigt.Created a collection, imported data that includes .jpg images into that collection, and showed the data in a gallery.
  • Sie haben unter jedem Bild im Katalog eine Bezeichnung konfiguriert, um die im Lager vorrätige Stückzahl anzugeben.Under each image in the gallery, configured a label that lists the units in stock for that item.
  • Sie haben einen Rahmen um das ausgewählte Element hinzugefügt.Added a border around the item that you select.
  • Sie haben die Elemente nach Produktnamen in aufsteigender und absteigender Reihenfolge sortiert.Sorted the items by product name in ascending and descending order.
  • Sie haben einen Schieberegler und ein Eingabetextfeld hinzugefügt, um die Produkte nach vorrätiger Stückzahl und nach dem Produktnamen zu filtern.Added a slider and an input text control to filter the products by units in stock and product name.