Поделиться через

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

  • Статья

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

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

Примечание

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

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

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

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

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

      Вставка элемента управления

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

      Свойство OnSelect

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

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

      Файл — коллекции

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

      Примечание

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

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

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

    Коллекция — горизонтальная

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

    Компоновка

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

    Макет коллекции

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

    Переименование коллекции

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

    Приложение с коллекцией

    Примечание

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

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

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

Запасы каждого продукта

Примечание

По умолчанию для свойства Text верхней метки задано значение ThisItem.ProductName. Вы можете изменить его на любой другой элемент в коллекции. Например, если коллекция содержит поля ProductDescription (Описание товара) или Price (Цена), для метки можно задать значение ThisItem.ProductDescription или ThisItem.Price.

Используя эти указания, вы импортировали данные с изображениями в формате 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".
    Предварительный просмотр ползунка со значением 30

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

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

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

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

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

Примечание

Каковы ваши предпочтения в отношении языка документации? Пройдите краткий опрос (обратите внимание, что этот опрос представлен на английском языке).

Опрос займет около семи минут. Личные данные не собираются (заявление о конфиденциальности).