Відображення, сортування й фільтрування даних у галереї компонованої програми

Створіть галерею, щоб показувати зображення та текст про кілька продуктів, а також сортувати та фільтрувати ці відомості.

У Power Apps можна використовувати галерею, щоб показати кілька пов'язаних елементів, як-от у каталозі. У галереях можна чудово показувати відомості про продукти, наприклад імена та ціни. У цьому розділі описано, як створити галерею та сортувати або фільтрувати відомості за допомогою функцій, подібних до Excel. Крім того, коли виділено елемент, межу буде розташовано навколо елемента.

Примітка

У цьому розділі розглядається програма для планшета. Можна використати програму для телефона, але потрібно змінити розмір деяких елементів керування.

Вимоги

• Зареєструйтеся на Power Apps, а потім увійдіть із тими ж обліковими даними, які ви використовували для реєстрації.
• Створіть програму з шаблону, з даних або з нуля
• Дізнайтесь, як налаштувати елемент керування.
• В описаних кроках використано CreateFirstApp як зразок вхідних даних, включно з зображеннями .jpg. ZIP-файл містить XML-файл, який можна перетворити на файл Excel. В іншому разі Power Apps автоматично зчитає файли з ZIP-файлів і успішно їх імпортує. Завантажте та скористайтесь цими зразками даних або імпортуйте власні.

Відображення даних у галереї

1. Створіть колекцію під назвою Inventory за допомогою зразків даних. Виконайте такі кроки:

   1. На вкладці Вставлення виберіть «Елементи керування», а потім виберіть елемент Імпорт.

      

   2. Встановіть для властивості OnSelect елемента керування імпортом таку формулу:
      Collect(Inventory, Import1.Data)

      

   3. Натисніть кнопку Імпортувати дані, щоб відкрити провідник Windows. Виберіть CreateFirstApp.zip і натисніть Відкрити.

   4. У меню Файл виберіть Колекції. Колекцію "Inventory" зазначено у списку імпортованих даних.

      

      Ви щойно створили колекцію "Inventory", яка містить відомості про п'ять продуктів, зокрема зображення дизайну, назву продукту, а також кількість одиниць в наявності.

      Примітка

      Елемент керування «Імпорт» використовується для імпортування даних програми Excel і створення колекції. Елемент керування «Імпорт» імпортує дані під час створення програми та її попереднього перегляду. Наразі елемент керування імпорту не імпортує дані під час публікування програми.

2. Виберіть стрілку назад, щоб повернутися до конструктора.

3. На вкладці Вставка виберіть Галерея, а потім виберіть Горизонтальну галерею.

   

4. В області праворуч виберіть параметр, в якому заголовок і підзаголовок накладається на графічний об'єкт.

   

5. Установіть для властивості Елементи галереї значення Inventory:

   

6. Перейменуйте галерею на ProductGallery, а потім перемістіть галерею, щоб не блокувати інші елементи керування. Змініть розмір галереї, щоб відображалися три продукти.

   

7. У першому елементі галереї виберіть нижній підпис.

   

   Примітка

   Якщо змінити перший елемент у будь-якій галереї, всі інші елементи в галереї буде змінено автоматично.

8. Укажіть для властивості Text підпису таке значення:
   ThisItem.UnitsInStock
   

   При цьому в підписі буде показано кількість одиниць у наявності для кожного продукту.

Примітка

За замовчуванням для властивості Текст верхнього підпису вказано значення ThisItem.ProductName. Його можна змінити на будь-який інший елемент у колекції. Наприклад, якщо в колекції є поля ProductDescription або Price, можна задати підпис ThisItem.ProductDescription або ThisItem.Price.

За допомогою зазначених дій було імпортовано дані, що містять зображення .jpg до колекції. Потім було додано галерею, яка відображає дані, та налаштувано підпис, який показує кількість одиниць у наявності для кожного продукту.

Виділення вибраного елемента галереї

1. Виберіть будь-який елемент у галереї, за винятком першого. Відобразиться піктограма редагування (у верхньому лівому куті). Виберіть піктограму редагування:
   

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

3. У вкладці Основне виберіть Заливка, а тоді натисніть Без заливки.

4. Виберіть Межа, тоді Стиль межі, а потім виберіть суцільну лінію.

5. Виберіть параметр Межа ще раз, а потім установіть товщину "3". Змініть розмір прямокутника, щоб він розміщувався навколо елемента галереї. Тепер елементи в галереї мають блакитну межу і мають виглядати так, як показано нижче.
   

6. На вкладці Фігура виберіть параметр Видимий, а потім введіть у рядку формул таку формулу:

   If(ThisItem.IsSelected, True)

   Синій прямокутник оточує поточне виділення в галереї. Виберіть кілька елементів галереї, щоб переконатися, що прямокутник відображається навколо кожного вибраного елемента. Запам'ятайте, що також можна відкрити Попередній перегляд , щоб побачити та протестувати проміжні результати своєї роботи.

Порада

Виберіть прямокутник, виберіть Змінити порядок на вкладці Основне, а потім виберіть команду Перемістити на задній план. За допомогою цієї функції можна вибрати елемент галереї, а межа нічого не блокуватиме.

За допомогою зазначених дій можна додати межу навколо поточних вибраних елементів у галереї.

Сортування та фільтрування елементів у галереї.

За допомогою вказаних нижче дій можна сортувати елементи галереї за зростанням і спаданням. Крім того, можна додати елемент керування "Повзунок", щоб "фільтрувати" елементи, які ви обираєте, за кількістю одиниць у наявності.

Сортування за зростанням або спаданням

1. Виберіть будь-який елемент у галереї, за винятком першого.

2. Зараз для властивості Елементи вказано значення "Inventory" (назва колекції). Змініть його на таке значення:

   Sort(Inventory, ProductName)

   Якщо зробити це, елементи у галереї сортуються за іменем продукту за зростанням:

   Спробуйте сортувати за спаданням. Укажіть для властивості галереї Елементи цю формулу:

   Sort(Inventory, ProductName, Descending)

Додавання елемента керування повзунком та фільтрування елементів у галереї

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

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

   1. На вкладці Вміст виберіть Min, а потім введіть такий вираз:
      Min(Inventory, UnitsInStock)
   2. На вкладці Вміст виберіть Max, а потім введіть такий вираз:
      Max(Inventory, UnitsInStock)

3. Виберіть будь-який елемент у галереї, за винятком першого. Укажіть для властивості галереї Елементи такий вираз:
   Filter(Inventory, UnitsInStock<=StockFilter.Value)

4. У режимі Попереднього перегляду настройте повзунок на значення в межах від найвищої до найнижчої кількості одиниць в галереї. Під час настроювання повзунка в галереї відображаються лише ті продукти, кількість яких менше вибраного значення:
   

Тепер додамо значення до фільтра:

1. Поверніться до конструктора.
2. На вкладці Вставлення виберіть Текст, виберіть Вхідний текст і перейменуйте новий елемент керування на NameFilter. Перемістіть елемент керування текстом під повзунок.
3. Укажіть для властивості галереї Елементи такий вираз:
   Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
4. У режимі Попереднього перегляду встановіть повзунок на 30 і введіть літеру g в елементі керування введення тексту. У галереї показано єдиний продукт, кількість одиниць якого менше 30 та ім'я якого містить літеру "g".
   

Поради та хитрості

• Будь-коли можна вибрати кнопку попереднього перегляду (), щоб побачити, що вже створено та протестувати результати.
• Під час розробки програми можна змінювати розмір елементів керування та переміщувати їх за допомогою натискання та перетягування.
• Натисніть клавішу ESC або виберіть X, щоб закрити вікно попереднього перегляду.
• Під час використання галереї виберіть перший елемент у галереї, щоб змінити всі елементи в галереї. Наприклад, виберіть перший елемент, щоб додати межу до всіх елементів у галереї.
• Щоб оновити властивості галереї, виберіть будь-який елемент у галереї, за винятком першого. Наприклад, виберіть другий елемент, щоб оновити Items, ShowScrollbar та інші властивості, які застосовуються до галереї (а не до елементів у галереї).

Отримані відомості

У цьому розділі ви навчилися:

• Створювати колекції, імпортувати дані, що містять зображення .jpg до цієї колекції та відображати дані в галереї.
• Настроювати підпис під кожним зображенням у галереї, у якому перелічується кількість одиниць у наявності для цього продукту.
• Додавати межу навколо вибраного елемента.
• Сортувати елементи за іменем продукту за зростанням та спаданням.
• Додавати повзунок і елемент керування вхідним текстом, щоб фільтрувати продукти за одиницями у наявності й назві продукту.

Примітка

Розкажіть нам про свої уподобання щодо мови документації? Візьміть участь в короткому опитуванні. (зверніть увагу, що це опитування англійською мовою)

Проходження опитування займе близько семи хвилин. Персональні дані не збиратимуться (декларація про конфіденційність).