Отображение, сортировка и фильтрация данных в коллекции приложения на основе холста

В этой статье приведены сведения о создании коллекции с изображениями товара и данными о нем, а также о параметрах сортировки и фильтрации.

В коллекции Power Apps несколько связанных элементов отображаются точно так же, как вы их видите в каталоге. Они прекрасно подходят для предоставления сведений о товарах, например названий и цен. В рамках этой статьи мы создадим коллекцию, а затем отсортируем и отфильтруем сведения с использованием функций наподобие Excel. Кроме того, выбранный элемент выделяется.

Предварительные условия

• Зарегистрируйтесь в Power Apps и выполните вход с использованием тех же учетных данных, которые использовались для регистрации.
• Создайте приложение для планшета с помощью шаблона или данных либо создайте его с нуля.
• Узнайте, как настроить элемент управления.
• В рамках этого руководства используются демонстрационные входные данные CreateFirstApp, куда входят изображения в формате JPG. Этот ZIP-файл содержит XML-файл, который можно преобразовать в Excel. В противном случае Power Apps автоматически считывает и импортирует файлы в ZIP-файлах. Вы можете скачать и использовать этот образец данных или импортировать собственный.

Отображение данных в коллекции

1. Создайте коллекцию с именем Inventory (Запасы) на основе образца данных. Для этого:

   1. На вкладке Вставка выберите Элементы управления, а затем щелкните Импорт.

      

   2. Задайте для свойства OnSelect элемента управления "Импорт" следующую формулу:
      Collect(Inventory, Import1.Data)

      

   3. Чтобы открыть проводник, нажмите кнопку Импорт данных. Выберите файл CreateFirstApp.zip и щелкните Открыть.

   4. В меню Файл выберите Коллекции. Коллекция Inventory отображается с импортированными данными:

      

      Вы только что создали коллекцию Inventory со сведениями о 5 товарах, в том числе изображение и имя товара, а также число единиц в наличии.

      Примечание

      Элемент управления "Импорт" позволяет импортировать данные, как в Excel, и создать коллекцию. Данные импортируются во время создания и предварительного просмотра приложения. Сейчас элемент управления "Импорт" не импортирует данные при публикации приложения.

2. Чтобы вернуться в режим конструктора, нажмите кнопку со стрелкой "Назад".

3. На вкладке Вставка щелкните или коснитесь Коллекция, а затем выберите Горизонтальная.

   

4. На панели справа выберите параметр, в котором заголовок и подзаголовок накладываются на рисунок:

   

5. Задайте для свойства Items значение Inventory:

   

6. Измените имя коллекции на ProductGallery и переместите ее, чтобы она не загораживала другие элементы управления. Измените размер коллекции, чтобы в ней отображались три товара:

   

7. В первом элементе коллекции выберите нижнюю метку:

   

   Примечание

   При изменении первого элемента в любой коллекции вы автоматически измените все остальные элементы в коллекции.

8. Задайте для свойства Text метки следующее выражение:
   ThisItem.UnitsInStock
   

   За счет этого метка будет отображать доступное количество единиц каждого товара.

Используя эти указания, вы импортировали данные с изображениями в формате JPG в коллекцию. Затем вы добавили коллекцию с данными и настроили метку, которая показывает доступное количество единиц каждого товара.

Выделение выбранного элемента коллекции

1. Выберите любой элемент в коллекции за исключением первого. После этого отобразится значок редактирования (в левом верхнем углу). Выберите значок редактирования:
   

2. На вкладке Вставка выберите Фигуры, а затем выберите прямоугольник. Вокруг каждого элемента коллекции появится синий прямоугольник.

3. На вкладке Главная выберите Заливка, а затем — Без заполнения.

4. Выберите Граница, Стиль границы, а затем выберите сплошную линию.

5. Выберите Граница еще раз и измените толщину на 3. Измените размер прямоугольника, чтобы он окружал элемент коллекции. Вокруг элемента коллекции теперь должна появиться синяя рамка выделения. Она будет выглядеть следующим образом:
   

6. На вкладке Фигура выберите Видимый, а затем в строке формулы введите следующую формулу:

   If(ThisItem.IsSelected, true)

   Вокруг выбранного элемента в коллекции появился синий прямоугольник. Щелкните несколько элементов коллекции, чтобы убедиться, что прямоугольник отображается вокруг каждого выбранного элемента. Помните, что вы также можете просмотреть и проверить созданную коллекцию, нажав кнопку предварительного просмотра .

Используя эти указания, вы добавили выделение вокруг выбранного элемента в коллекции.

Сортировка и фильтрация элементов в коллекции

В этом разделе мы будем сортировать элементы коллекции по возрастанию и по убыванию. Кроме того, мы добавим ползунок, который позволит фильтровать элементы коллекции по доступному количеству единиц.

Сортировка по возрастанию или по убыванию

1. Выберите любой элемент в коллекции за исключением первого.

2. Сейчас для свойства Items задано значение Inventory (Запасы) (имя коллекции). Измените его на следующее:

   Sort(Inventory, ProductName)

   За счет этого элементы коллекции сортируются по названию товара в порядке возрастания:

   Попробуйте отсортировать по убыванию. Задайте для свойства Items коллекции следующую формулу:

   Sort(Inventory, ProductName, Descending)

Добавление ползунка и элементов фильтра в коллекции

1. Добавьте ползунок (вкладка Вставка > Элементы управления), измените его имя на StockFilter и переместите под коллекцию.

2. Настройте ползунок таким образом, чтобы пользователи не могли указывать значение, превышающее доступное количество единиц каждого товара:

   1. На вкладке Содержимое выберите Минимум, а затем введите следующее выражение:
      Min(Inventory, UnitsInStock)
   2. На вкладке Содержимое выберите Максимум, а затем введите следующее выражение:
      Max(Inventory, UnitsInStock)

3. Выберите любой элемент в коллекции за исключением первого. Задайте для свойства Items коллекции следующее выражение:
   Filter(Inventory, UnitsInStock<=StockFilter.Value)

4. В окне предварительного просмотра передвиньте ползунок на значение, которое находится между максимальным и минимальным количеством единиц товара в коллекции. При изменении положения ползунка в коллекции будут отображаться только те товары, количество единиц которых меньше указанного значения:
   

Теперь добавим фильтр.

1. Вернитесь в режим конструктора.
2. На вкладке Вставка выберите Текст, Вводимый текст, а затем измените имя нового элемента управления на NameFilter. Поместите элемент управления "Текст" под ползунком.
3. Задайте для свойства Items коллекции следующее выражение:
   Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
4. В окне предварительного просмотра установите ползунок на 30 и в текстовом поле для ввода введите букву g. В коллекции отобразятся только товары, которых имеется в наличии менее 30 единиц и в имени которых есть буква "g".
   

Советы и рекомендации

• В любое время вы можете выбрать кнопку предварительного просмотра (), чтобы увидеть, что вы создали, и проверить это.
• При разработке приложения вы можете изменять размер элементов управления и перемещать их (щелкните необходимый элемент и перетащите его).
• Чтобы закрыть окно предварительного просмотра, нажмите клавишу ESC или щелкните X.
• Чтобы изменить все элементы в коллекции, измените первый элемент. Например, выберите первый элемент, чтобы добавить выделение для всех элементов в коллекции.
• Чтобы обновить свойства коллекции, выберите любой элемент, за исключением первого. Например, выберите второй элемент, чтобы обновить свойство Items, ShowScrollbar и другие свойства, примененные к коллекции (не элементы коллекции).

Полученные навыки

В рамках этой статьи вы:

• Создали коллекцию, импортировали в нее данные с изображениями в формате JPG, после чего открыли коллекцию с данными.
• Под каждым изображением в коллекции вы настроили метку с данными о доступном количестве единиц каждого товара.
• Добавили выделение, появляющееся вокруг выбранного элемента.
• Отсортировали элементы по имени товара в порядке возрастания и убывания.
• Добавили ползунок и элемент управления ввода текста, необходимые для фильтрации товаров по доступному количеству единиц и имени.