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

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

Примечание.

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

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

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

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

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

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


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


    1. Чтобы открыть проводник, нажмите кнопку Импорт данных. Выберите файл CreateFirstApp.zip и щелкните Открыть. 1. В меню Файл выберите Коллекции. Коллекция "Товары" отображается с импортированными данными:

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

    Примечание.

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

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

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

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

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

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

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

Советы и хитрости

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

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

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

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