Отображение списка элементов в PowerAppsShow a list of items in PowerApps

Чтобы отобразить список элементов из любого источника данных, добавьте в приложение элемент управления Gallery (Коллекция).Show a list of items from any data source by adding a Gallery control to your app. В этой статье в качестве источника данных используется Excel.This topic uses Excel as the data source. Чтобы отфильтровать список, настройте элемент управления Коллекция таким образом, чтобы в нем отображались только элементы, соответствующие определенному условию, которое задается в поле для ввода текста.Filter the list by configuring the Gallery control to show only those items that match the filter criterion in a Text input control.

Технические условияPrerequisites

  1. Откройте PowerApps и выберите Создать у левого края экрана.Open PowerApps, and then click or tap New near the left edge.
  2. На плитке Blank app (Пустое приложение) щелкните или нажмите Phone layout (Макет телефона).On the Blank app tile, click or tap Phone layout.
  3. В диалоговом окне Вас приветствует PowerApps Studio щелкните или коснитесь Пропустить.In the Welcome to PowerApps Studio dialog box, click or tap Skip.
  4. Добавьте подключение в таблицу FlooringEstimates из файла Excel.Add a connection to the FlooringEstimates table in the Excel file.
  5. Добавьте элемент управления Коллекция на экран по умолчанию (необязательно). Для этого перейдите на вкладку Вставка, выберите Коллекция, а затем выберите пустую коллекцию или коллекцию со стандартным набором элементов управления.(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.

    Здесь доступны элементы управления Коллекция, которые можно прокручивать горизонтально или вертикально.These options include Gallery controls that scroll horizontally or vertically. Вы также можете добавить элемент управления Коллекция, который автоматически задает размер на основе объема содержимого каждого элемента.You can also add a Gallery control that automatically bases its size on the amount of content in each item.

    Добавление коллекции

  6. На вкладке Главная выберите Создать экран.On the Home tab, click or tap New screen.

    Вы можете добавить пустой прокручиваемый экран с элементом управления Коллекция или формой.You can add a screen that's empty, that scrolls, that contains a Gallery control, or that contains a form.

  7. Чтобы добавить экран с элементом управления Коллекция и другими элементами управления, такими как панель поиска, выберите Окно списка.Click or tap List screen to add a screen that contains a Gallery control and other controls such as a search bar.

    Примечание. Чтобы добавить элемент управления Коллекция на новый или существующий экран, щелкните в нижней части элемента управления Коллекция, чтобы выбрать его, на панели справа щелкните Оценка покрытий для пола, а затем выберите другой макет на панели Данные.Note: 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. В рамках этого руководства используйте макет по умолчанию.For this tutorial, leave the default layout.

    Выбор макета коллекции

  8. Выберите элемент управления Коллекция на только что добавленном экране.Click or tap the Gallery control in the screen that you just added.
  9. На вкладке Свойства на панели справа, щелкните или коснитесь CustomGallerySample.On the Properties tab of the right-hand pane, click or tap CustomGallerySample.
  10. На панели Данные выберите CustomGallerySample, а затем щелкните или коснитесь FlooringEstimates.In the Data pane, click or tap CustomGallerySample, and then click or tap FlooringEstimates.

    Выбор источника данных

    В элементе управления Коллекция отобразятся демонстрационные данные.The Gallery control shows the sample data.

    Показ данных

    Сведения о настройке параметров поиска и сортировки приведены далее в этой статье.You'll configure sort and search later in this topic.

Перед настройкой выберите макет элемента управления Коллекция.Before you do any customization, decide on a Gallery control layout. Первый набор элементов управления в элементе управления Коллекция — это шаблон, который определяет отображение всех данных в элементе управления Коллекция.The first set of controls in a Gallery control is the template, which determines how all data in the Gallery control appears.

  1. Выберите шаблон. Для этого щелкните или коснитесь в нижней части элемента управления Коллекция, а затем щелкните значок карандаша в левом верхнем углу.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.

    Изменение шаблона коллекции

  2. Выбрав шаблон, добавьте элемент управления Метка, а затем переместите и измените его размер таким образом, чтобы он не накладывался на другие элементы управления.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.

    Добавление метки

  3. Откройте панель Данные. Для этого выберите шаблон и щелкните или коснитесь Оценка покрытий для пола на панели справа.Open the Data pane by selecting the template and then clicking or tapping Flooring Estimates in the right-hand pane.
  4. Выберите метку, добавленную ранее в этой процедуре, и откройте выделенный список на панели Данные.Select the label that you added earlier in this procedure, and then open the highlighted list in the Data pane.

    Открытие раскрывающегося списка

  5. В этом списке выберите Цена.In that list, click or tap Price.

    Изменение привязки метки

    В элементе управления Коллекция отобразятся новые значения.The Gallery control shows the new values.

Окончательная версия коллекции

Набор элементов, которые отображаются в элементе управления Коллекция, определяется его свойством Items.The Items property of a Gallery control determines which items it shows. В этой процедуре мы настроим это свойство таким образом, чтобы в элементе управления Коллекция были показаны только элементы, для которых название товара содержит текст из поля TextSearchBox1.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.

Текстовое поле поиска

  1. Выберите элемент управления Коллекция, щелкнув в его нижней части.Select the Gallery control by clicking or tapping near the bottom of that control.
  2. На вкладке Дополнительно задайте для свойства Items элемента управления Коллекция следующую формулу: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)))

    Дополнительные сведения о других функциях см. в справочнике по формулам.For more information about the functions in this formula, see the formula reference.

  3. Введите часть названия товара в поле поиска.Type part or all of a product name in the search box.

    В элементе управления Коллекция отобразятся только те элементы, которые отвечают условию фильтра.The Gallery control shows only those items that meet the filter criterion.

Порядок отображения элементов определяется свойством Items элемента управления Коллекция.The Items property of a Gallery control determines the order in which it shows items. В этой процедуре мы настроим его таким образом, чтобы в элементе управления Коллекция содержимое отображалось в порядке, заданном с помощью поля ImageSortUpDown1.In this procedure, you configure that property so that the Gallery control shows the order of items as set by ImageSortUpDown1.

Изображение сортировки

  1. Задайте для свойства Items элемента управления Коллекция следующую формулу: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. Выберите значок сортировки, чтобы изменить порядок сортировки содержимого коллекции по названиям товаров.Select the sort icon to change the sorting order of the Gallery control by the names of the products.

Для сортировки и фильтрации содержимого элемента управления Коллекция сделайте следующее:To sort and filter your Gallery control:

  • Замените оба экземпляра DataSource в этой формуле именем своего источника данных.Replace both instances of DataSource in this formula with the name of your data source.
  • Замените оба экземпляра ColumnName именем столбца, по которому будет выполняться сортировка и фильтрация.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))

Выделение выбранного элементаHighlight the selected item

Введите для свойства TemplateFill элемента управления Коллекция формулу, аналогичную приведенной в примере: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)

Изменение выбора по умолчаниюChange the default selection

Задайте для свойства Default элемента управления Коллекция запись, которую необходимо выбирать по умолчанию.Set the Gallery control's Default property to the record that you want to select by default. Например, укажите пятый элемент в источнике данных FlooringEstimates:For example, specify the fifth item in the FlooringEstimates data source:

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

В этом примере укажите первый элемент в категории Hardwood источника данных FlooringEstimates: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"))

Дальнейшие действияNext steps