Anzeigen einer Liste mit Elementen in PowerAppsShow a list of items in PowerApps

Zeigen Sie eine Liste mit Elementen aus einer beliebigen Datenquelle an, indem Sie der App ein Katalog-Steuerelement hinzufügen.Show a list of items from any data source by adding a Gallery control to your app. In diesem Thema wird Excel als Datenquelle verwendet.This topic uses Excel as the data source. Filtern Sie die Liste, indem Sie das Katalog-Steuerelement so konfigurieren, dass nur die Elemente angezeigt werden, die dem Filterkriterium in einem Texteingabe-Steuerelement entsprechen.Filter the list by configuring the Gallery control to show only those items that match the filter criterion in a Text input control.

VoraussetzungenPrerequisites

  1. Öffnen Sie PowerApps, und klicken oder tippen Sie dann am linken Bildschirmrand auf Neu.Open PowerApps, and then click or tap New near the left edge.

  2. Klicken oder tippen Sie in der Kachel Leere App auf Telefonlayout.On the Blank app tile, click or tap Phone layout.

  3. Klicken oder tippen Sie im Dialogfeld Willkommen bei PowerApps Studio auf Überspringen.In the Welcome to PowerApps Studio dialog box, click or tap Skip.

  4. Fügen Sie eine Verbindung mit der FlooringEstimates-Tabelle in der Excel-Datei hinzu.Add a connection to the FlooringEstimates table in the Excel file.

  5. (Optional) Fügen Sie dem Standardbildschirm ein Katalog-Steuerelement hinzu, indem Sie auf die Registerkarte Einfügen, auf Katalog und dann auf ein Katalog-Steuerelement klicken oder tippen, das leer ist oder eine Standardauswahl von Steuerelementen enthält.(optional) Add a Gallery control to the default screen by clicking or tapping the Insert tab, clicking or tapping Gallery, and then clicking or tapping a Gallery control that's empty (blank) or that contains a default set of controls.

    Diese Optionen beinhalten Katalog-Steuerelemente, die horizontal oder vertikal scrollen.These options include Gallery controls that scroll horizontally or vertically. Sie können aber auch ein Katalog-Steuerelement hinzufügen, dessen Größe automatisch aus der Inhaltsmenge in den einzelnen Elementen abgeleitet wird.You can also add a Gallery control that automatically bases its size on the amount of content in each item.

    Hinzufügen des Katalogs

  6. Klicken oder tippen Sie auf der Registerkarte Start auf Neuer Bildschirm.On the Home tab, click or tap New screen.

    Sie können einen leeren Bildschirm, einen Scrollbildschirm, einen Bildschirm mit einem Katalog-Steuerelement oder einen Bildschirm mit einem Formular hinzufügen.You can add a screen that's empty, that scrolls, that contains a Gallery control, or that contains a form.

  7. Klicken oder tippen Sie auf Listenbildschirm, um einen Bildschirm mit einem Katalog-Steuerelement und weiteren Steuerelementen (z.B. einer Suchleiste) hinzuzufügen.Click or tap List screen to add a screen that contains a Gallery control and other controls such as a search bar.

    Hinweis

    Gleich, ob Sie ein Katalog-Steuerelement einem neuen oder einem vorhandenen Bildschirm hinzufügen, Sie können nahe dem unteren Rand des Katalog-Steuerelements klicken oder tippen, um es auszuwählen, dann im rechten Bereich auf Flooring Estimates und anschließend auf ein anderes Layout im Bereich Daten klicken oder tippen.Whether you add a Gallery control to a new screen or an existing one, you can click or tap near the bottom of the Gallery control to select it, click or tap Flooring Estimates in the right-hand pane, and then click or tap a different layout in the Data pane. Lassen Sie für dieses Tutorial das Standardlayout eingestellt.For this tutorial, leave the default layout.

    Auswählen des Kataloglayouts

  8. Klicken oder tippen Sie auf das Katalog-Steuerelement im soeben hinzugefügten Bildschirm.Click or tap the Gallery control in the screen that you just added.

  9. Klicken oder tippen Sie auf der Registerkarte Eigenschaften im rechten Bereich auf CustomGallerySample.On the Properties tab of the right-hand pane, click or tap CustomGallerySample.

  10. Klicken oder tippen Sie im Bereich Daten auf CustomGallerySample, und klicken oder tippen Sie anschließend auf FlooringEstimates.In the Data pane, click or tap CustomGallerySample, and then click or tap FlooringEstimates.

    Auswählen der Datenquelle

    Im Katalog-Steuerelement werden die Beispieldaten angezeigt.The Gallery control shows the sample data.

    Anzeigen von Daten

    Die Konfiguration von Suche und Sortierung erfolgt später in diesem Thema.You'll configure sort and search later in this topic.

Entscheiden Sie sich für ein Katalog-Steuerelementlayout, bevor Sie Anpassungen vornehmen.Before you do any customization, decide on a Gallery control layout. Der erste Satz von Steuerelementen in einem Katalog-Steuerelement ist die Vorlage, die bestimmt, wie die Daten im Katalog-Steuerelement dargestellt werden.The first set of controls in a Gallery control is the template, which determines how all data in the Gallery control appears.

  1. Wählen Sie die Vorlage aus, indem Sie nahe dem unteren Rand des Katalog-Steuerelements klicken oder tippen und dann in der oberen linken Ecke auf das Bleistiftsymbol klicken oder tippen.Select the template by clicking or tapping near the bottom of the Gallery control and then clicking or tapping the pencil icon in the upper-left corner.

    Bearbeiten der Katalogvorlage

  2. Fügen Sie bei ausgewählter Vorlage ein Label-Steuerelement (Bezeichnung) hinzu, verschieben Sie es, und ändern Sie seine Größe, sodass es sich nicht mit anderen Steuerelementen in der Vorlage überschneidet.With the template still selected, add a Label control, and then move and resize it so that it doesn't overlap with other controls in the template.

    Bezeichnung hinzufügen

  3. Öffnen Sie den Bereich Daten, indem Sie die Vorlage auswählen und im rechten Bereich auf Flooring Estimates klicken oder tippen.Open the Data pane by selecting the template and then clicking or tapping Flooring Estimates in the right-hand pane.

  4. Wählen Sie die soeben in diesem Verfahren hinzugefügte Bezeichnung aus, und öffnen Sie die hervorgehobene Liste im Bereich Daten.Select the label that you added earlier in this procedure, and then open the highlighted list in the Data pane.

    Dropdownliste öffnen

  5. Klicken oder tippen Sie in dieser Liste auf Price (Preis).In that list, click or tap Price.

    Ändern der Bezeichnungsbindung

    Im Katalog-Steuerelement werden die neuen Werte angezeigt.The Gallery control shows the new values.

    Endgültiger Katalog

Die Items-Eigenschaft eines Katalog-Steuerelements bestimmt, welche Elemente angezeigt werden.The Items property of a Gallery control determines which items it shows. In diesem Verfahren konfigurieren Sie diese Eigenschaft, sodass im Katalog-Steuerelement nur die Elemente angezeigt werden, deren Produktname den Text in TextSearchBox1 enthält.In this procedure, you configure that property so that the Gallery control shows only those items for which the product name contains the text in TextSearchBox1.

Textsuchfeld

  1. Wählen Sie das Katalog-Steuerelement aus, indem Sie unten im Steuerelement klicken oder tippen.Select the Gallery control by clicking or tapping near the bottom of that control.

  2. Legen Sie auf der Registerkarte Erweitert die Items-Eigenschaft des Katalog-Steuerelements auf diese Formel fest:On the Advanced tab, set the Items property of the Gallery control to this formula:

    If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name)))If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name)))

    Weitere Informationen zu den Funktionen in dieser Formel finden Sie unter formula reference (Formelreferenz).For more information about the functions in this formula, see the formula reference.

  3. Geben Sie einen Produktnamen ganz oder teilweise im Suchfeld ein.Type part or all of a product name in the search box.

    Im Katalog-Steuerelement werden nur die Elemente angezeigt, die das Filterkriterium erfüllen.The Gallery control shows only those items that meet the filter criterion.

Die Items-Eigenschaft eines Katalog-Steuerelements bestimmt die Anzeigereihenfolge der Elemente.The Items property of a Gallery control determines the order in which it shows items. In diesem Verfahren konfigurieren Sie diese Eigenschaft so, dass im Katalog-Steuerelement die Elemente in der Reihenfolge angezeigt werden, die von ImageSortUpDown1 festgelegt wird.In this procedure, you configure that property so that the Gallery control shows the order of items as set by ImageSortUpDown1.

Bild für Sortierung

  1. Legen Sie die Items-Eigenschaft des Katalog-Steuerelements auf diese Formel fest:Set the Items property of the Gallery control to this formula:

    Sort(If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name))), Name, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))Sort(If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name))), Name, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

  2. Wählen Sie das Sortieren-Symbol aus, um die Sortierreihenfolge des Katalog-Steuerelements in Bezug auf die Namen der Produkte zu ändern.Select the sort icon to change the sorting order of the Gallery control by the names of the products.

So sortieren und filtern Sie das Katalog-Steuerelement:To sort and filter your Gallery control:

  • Ersetzen Sie in dieser Formel beide Instanzen von DataSource durch den Namen der Datenquelle.Replace both instances of DataSource in this formula with the name of your data source.

  • Ersetzen Sie beide Instanzen von ColumnName durch den Namen der Spalte, nach der Sie sortieren und filtern möchten.Replace both instances of ColumnName with the name of the column by which you want to sort and filter.

Sort(If(IsBlank(TextSearchBox1.Text), DataSource, Filter( DataSource, TextSearchBox1.Text in Text( ColumnName ))), ColumnName, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))Sort(If(IsBlank(TextSearchBox1.Text), DataSource, Filter( DataSource, TextSearchBox1.Text in Text( ColumnName ))), ColumnName, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

Hervorheben des ausgewählten ElementsHighlight the selected item

Legen Sie die TemplateFill-Eigenschaft des Katalog-Steuerelements auf eine Formel fest, die der in diesem Beispiel ähnelt:Set the Gallery control's TemplateFill property to a formula that's similar to this example:

If(ThisItem.IsSelected, LightCyan, White)If(ThisItem.IsSelected, LightCyan, White)

Ändern der StandardauswahlChange the default selection

Legen Sie die Default-Eigenschaft des Katalog-Steuerelements auf den Datensatz fest, der standardmäßig ausgewählt sein soll.Set the Gallery control's Default property to the record that you want to select by default. Geben Sie beispielsweise das fünfte Element in der Datenquelle FlooringEstimates an:For example, specify the fifth item in the FlooringEstimates data source:

Last(FirstN(FlooringEstimates, 5))Last(FirstN(FlooringEstimates, 5))

In diesem Beispiel geben Sie das erste Element in der Kategorie Hardwood der Datenquelle FlooringEstimates an:In this example, you specify the first item in the Hardwood category of the FlooringEstimates data source:

First(Filter(FlooringEstimates, Category = "Hardwood"))First(Filter(FlooringEstimates, Category = "Hardwood"))

Nächste SchritteNext steps

Informationen zum Arbeiten mit Formularen und Formeln.Learn how to work with forms and formulas.