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

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

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

Заметка

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

Необходимые компоненты

  1. Создайте коллекцию с именем Inventory , добавив элемент управления Button и задав его свойство OnSelect в следующую формулу:

    ClearCollect(
    Inventory,
    { ProductName: "Europa",    UnitsInStock: 25 },
    { ProductName: "Ganymede",  UnitsInStock: 32 },
    { ProductName: "Callisto",  UnitsInStock: 12 },
    { ProductName: "Io",        UnitsInStock: 47 },
    { ProductName: "Titan",     UnitsInStock: 18 }
)

  2. Нажмите кнопку, удерживая клавиши ALT (или нажмите кнопку "Предварительный просмотр ", а затем кнопку), чтобы заполнить коллекцию инвентаризации пятью продуктами, каждая из которых содержит имя продукта и число единиц.

    Заметка

    В этой статье используется небольшая встроенная коллекция, поэтому вы сможете легко разобраться по ходу, не обращаясь к внешним данным. Для рабочих сценариев подключитесь к реальному источнику данных, например SharePoint или Microsoft Dataverse.

  3. На вкладке Вставка выберите Макет>Горизонтальная коллекция.

  4. В правой области выберите макет, показывающий название и подзаголовок.

  5. Задайте свойству Items коллекции значение Inventory.

  6. Переименуйте коллекцию в ProductGallery и измените ее размер, чтобы отобразить три продукта одновременно.

  7. Выберите нижнюю надпись в первом элементе галереи.

    Заметка

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

  8. Задайте для свойства Text метки значение:

    ThisItem.UnitsInStock

Теперь метка показывает количество единиц в запасе для каждого продукта.

Совет

Вы можете привязать любую метку к любому полю в коллекции. Например, используйте ThisItem.ProductName или ThisItem.Price если эти поля существуют в источнике данных.

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

  2. На вкладке "Вставка " выберите фигуры>прямоугольник. В каждом элементе галереи отображается сплошной прямоугольник.

  3. На панели "Свойства" задайте для цветазначение "Нет заливки " (прозрачно).

  4. В разделе "Граница" задайте для раскрывающегося списка стилей значение Solid и значение толщины равным 3.

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

  6. Задайте свойству Visible прямоугольника значение:

    ThisItem.IsSelected

Теперь синяя граница отображается только вокруг выбранного элемента.

Совет

Если граница перекрывает содержимое, выберите прямоугольник и выберите reorder>Send to Back , чтобы переместить его за другими элементами управления.

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

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

  2. Измените свойство Items , чтобы отсортировать по имени продукта в порядке возрастания:

    Sort(Inventory, ProductName)

  3. Чтобы отсортировать по убыванию, измените свойство Items следующим образом:

    Sort(Inventory, ProductName, SortOrder.Descending)

Фильтрация элементов с помощью ползунка и текстового ввода

  1. На вкладке Вставка выберите Ввод>Ползунок. Переименуйте ползунок в StockFilter и поместите его под галереей.

  2. Задайте диапазон ползунка в соответствии с данными:

    • Задайте минимальное значение: Min(Inventory, UnitsInStock)
    • Задайте Max: Max(Inventory, UnitsInStock)

  3. Выберите любой элемент коллекции , кроме первого, и задайте для свойства Items значение:

    Filter(Inventory, UnitsInStock <= StockFilter.Value)

  4. Выберите Предпросмотр (F5) и переместите ползунок, чтобы увидеть, как галерея фильтрует товары по количеству товара в наличии.

  5. Чтобы также отфильтровать по имени продукта, добавьте элемент управления " Ввод текста " (на вкладке "Вставка ", выберите входной>текст), переименуйте его NameFilter и поместите его под ползунок.

  6. Обновите свойство Items , чтобы объединить оба фильтра:

    Filter(Inventory, UnitsInStock <= StockFilter.Value && NameFilter.Text in ProductName)

  7. В предварительной версии установите ползунок 30 и введите g в текстовом вводе. В галерее отображаются только товары, у которых на складе не более 30 единиц и в названии которых содержится буква "g".

Советы и подсказки

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

Сводка

В этой статье вы:

  • Создана коллекция с примерами данных продукта.
  • Данные коллекции отображены в горизонтальной галерее.
  • Настроенные метки для отображения значений полей из каждой записи.
  • Добавлена граница выделения вокруг активного элемента коллекции.
  • Отсортированные элементы коллекции по имени продукта в порядке возрастания и убывания.
  • Использует ползунок и текстовый ввод для фильтрации продуктов по количеству запасов и имени.
  • Last updated on