Показвайте, сортирайте и филтрирайте данни в галерия с приложения на платното

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

В Power Apps можете да използвате галерия, за да покажете няколко свързани артикула, точно както виждате в каталог. Галереите са чудесни за показване на информация за продукти, като имена и цени. В тази тема създаваме галерия и сортираме и филтрираме информацията с помощта на функции, подобни на Excel. Също така, когато е избран елемент, около него се поставя рамка.

Бележка

Тази тема използва приложение за таблет. Можете да използвате приложение за телефон, но ще трябва да промените размера на някои от контролите.

Предварителни изисквания

• Регистрирайте се за Power Apps, след което влезте, като използвате идентификационните данни, с които се регистрирахте.
• Създаване на приложение за таблет от шаблон, от данни или от самото начало.
• Научете как да конфигурирате контрола.
• Тези стъпки използват CreateFirstApp като примерни входни данни, които включват .jpg изображения. Zip файлът включва XML файл, който може да бъде преобразуван в Excel. В противен случай Power Apps автоматично чете файловете в .zip файловете и ги импортира успешно. Можете да изтеглите и използвате тези примерни данни или да импортирате свои.

Показване на данни в галерия

1. Създайте колекция с име Складова наличност, използвайки примерните данни. Стъпките включват:

   1. В раздела Вмъкване изберете Контроли и след това изберете Импортиране:

      

   2. Задайте свойството OnSelect на контролата за импортиране на следната формула:
      Collect(Inventory, Import1.Data)

      

   3. Изберете бутона Импортиране на данни за отваряне на Windows Explorer. Изберете CreateFirstApp.zip и изберете Отворено.

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

      

      Току-що създадохте колекцията на инвентар, която съдържа информация за пет продукта, включително дизайнерско изображение, името на продукта и броя на наличните единици.

      Бележка

      Контролът за импортиране се използва за импортиране на данни, подобни на Excel и създаване на колекцията. Контролът на импортиране импортира данни, когато създавате приложението си и визуализирате. В момента контролът върху импортирането не импортира данни, когато публикувате приложението си.

2. Изберете стрелката назад да се върнете към дизайнера.

3. В раздела Вмъкване щракнете върху или докоснете Галерия и след това щракнете върху или докоснете Хоризонталната галерия.

   

4. В десния прозорец щракнете или докоснете опцията, в която заглавието и субтитрите наслагват графиката:

   

5. Задайте свойството Елементи на галерията на Инвентар:

   

6. Преименувайте галерията в ProductGallery и преместете галерията, така че да не блокира останалите контроли. Преоразмерете галерията, така че да показва три продукта:

   

7. В първия елемент на галерията изберете долния етикет:

   

   Бележка

   Когато промените първия елемент във всяка галерия, вие автоматично променяте всички останали елементи в галерията.

8. Задайте свойството Текст на етикета на следния израз:
   ThisItem.UnitsInStock
   

   Когато направите това, етикетът показва единиците в наличност за всеки продукт:

Бележка

По подразбиране свойството Текст на горния етикет е зададено на ThisItem.ProductName. Можете да го промените на всеки друг елемент от вашата колекция. Например, ако вашата колекция има Описание на продукта или Цена полета, на които можете да зададете етикета на ThisItem.ProductDescription или ThisItem.Price.

Използвайки тези стъпки, вие импортирахте данни, които включват .jpg изображения в колекция. След това добавихте галерия, която показва данните и сте конфигурирали етикет, който да показва единиците в наличност за всеки продукт.

Маркирайте избрания от вас галерия

1. Изберете всеки елемент от галерията с изключение на първия. Показва се иконата за редактиране (горен ляв ъгъл). Изберете иконата за редактиране:
   

2. В раздела Вмъкване изберете Форми и след това изберете правоъгълника. Син плътен правоъгълник се появява във всеки елемент от галерията.

3. В раздела Начало изберете Запълване, след което изберете Без запълване.

4. Изберете граница, изберете Граничен стил и след това изберете плътната линия.

5. Изберете граница отново и задайте дебелината на 3. Преоразмерете правоъгълника, така че да заобикаля елемент от галерията. Елементите във вашата галерия сега имат синя рамка и трябва да изглеждат подобно на следното:
   

6. В раздела форма изберете видимо и след това въведете следната формула в лентата с формули:

   If(ThisItem.IsSelected, true)

   Син правоъгълник обгражда текущата селекция в галерия. Изберете няколко елемента от галерията, за да потвърдите, че правоъгълникът се появява около всеки избран от вас елемент. Не забравяйте, че можете също да отворите Преглед , за да видите и тествате какво създавате.

Съвет

Изберете правоъгълника, изберете Пренареждане на Начало и след това изберете Изпращане към „Назад”. Използвайки тази функция, можете да изберете елемент от галерия, без рамката да блокира нищо.

Използвайки тези стъпки, вие добавихте рамка около текущата селекция в галерията.

Сортиране и филтриране на елементи в галерията

В тези стъпки ще сортираме елементите на галерията във възходящ и низходящ ред. Също така ще добавим плъзгащо управление, за да „филтрираме“ елементи от галерията по избраните от вас запаси.

Сортиране във възходящ или низходящ ред

1. Изберете всеки елемент от галерията с изключение на първия.

2. Свойството Елементи в момента собствеността е зададена на инвентаризация (името на вашата колекция). Променете го на следното:

   Sort(Inventory, ProductName)

   Когато направите това, елементите в галерията се сортират по името на продукта във възходящ ред:

   Опитайте с низходящо сортиране. Задайте свойството Елементи на галерията на следната формула:

   Sort(Inventory, ProductName, Descending)

Добавете контрола за плъзгач и елементи на филтъра в галерията

1. Добавете контрола за плъзгач (раздел Вмъкване > Контроли), преименувайте го на StockFilter, и го преместете под галерията.

2. Конфигурирайте плъзгача, така че потребителите да не могат да го зададат на стойност извън диапазона от налични единици:

   1. В раздела Съдържание изберете Мин. и след това въведете следния израз:
      Min(Inventory, UnitsInStock)
   2. В раздела Съдържание изберете Макс. и след това въведете следния израз:
      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 или изберете х, за да затворите прозореца за визуализация.
• Когато използвате галерия, изберете първия елемент в галерията, за да промените всички елементи в галерията. Например, изберете първия елемент, за да добавите рамка към всички елементи в галерията.
• За да актуализирате свойствата на галерията, изберете всеки елемент от галерията с изключение на първия. Например, изберете втория елемент, за да актуализирате Елементи, ShowScrollbar и други свойства, които се отнасят за галерията (не за елементите в галерията).

Какво научихте

В тази тема вие:

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

Бележка

Можете ли да ни споделите повече за езиковите си предпочитания за документацията? Попълнете кратко проучване. (имайте предвид, че това проучване е на английски език)

Проучването ще отнеме около седем минути. Не се събират лични данни (декларация за поверителност).