Създайте галерия с подробности в приложение за платно

Статия
03/15/2023

Следвайте инструкциите стъпка по стъпка, за да създадете галерия с подробности в приложение за платно за управление на фиктивни данни в базата данни на Northwind Traders. Тази тема е част от поредица, която обяснява как да се изгради бизнес приложение на релационни данни в Microsoft Dataverse. За най-добри резултати проучете тези теми в тази последователност:

Създаване на галерията за поръчки.
Създаване на формуляр за обобщение.
Създайте галерия с подробности (тази тема).

Определяне на областите на екраните.

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

Преди да започнете тази тема, трябва да инсталирате базата данни, както е описано по-горе в тази тема. След това трябва или да създадете галерия за поръчки и обобщената форма или да отворите Поръчки на Northwind (Платно) - Започнете част 3 приложението, което вече съдържа тази галерия и този формуляр.

Създайте друга заглавна лента

В горната част на екрана изберете етикет контрола, който действа като заглавна лента, копирайте го с натискане на Ctrl-C и след това го поставете чрез натискане на Ctrl-V:
Преоразмерете и преместете копието така, че да се появи точно под формуляра за обобщение.
Премахнете текста от копието по един от следните начини:
- Щракнете двукратно върху текста, за да го изберете, и натиснете Delete.
- Задайте свойството Текст на етикета на празен низ ("").

Добавяне на галерия

Вмъкнете контрола галерия с оформление Празна вертикала:

Новата галерия, която ще показва подробности за поръчката, се появява в горния ляв ъгъл.
Затворете диалоговия прозорец източник на данни и след това преоразмерете и преместете галерията с подробности в долния десен ъгъл, под новата лента на заглавието:
Задайте свойството Елементи на Галерия с подробности на тази формула:
```
Gallery1.Selected.'Order Details'
```
Ако се появи грешка, потвърдете, че галерията с поръчки е кръстена Gallery1 (в екрана Дървовиден изглед близо до левия ръб). Ако тази галерия има различно име, преименувайте я Gallery1.

Току-що свързахте двете галерии. Когато потребителят избере поръчка в галерията с поръчки, тази селекция идентифицира запис в таблицата Поръчки. Ако тази поръчка съдържа една или повече договорени покупки, записът в Поръчки таблицата е свързана с един или повече записи в Подробности за поръчката таблица и данните от тези записи се появяват в галерията с подробности. Това поведение отразява връзката един към много, която е създадена за вас между таблиците Поръчки и подробности за поръчката. Формулата, която сте посочили, „разхожда“ тази връзка, използвайки точкова нотация:

Показване на имена на продукти

В галерията с подробности изберете Добавете елемент от раздела „Вмъкване”, за да изберете шаблона на галерията:

Уверете се, че сте избрали шаблона на галерията вместо самата галерия. Ограждащото поле трябва да е леко вътре в границата на галерията и вероятно по-къса от височината на галерията. Докато вмъквате контроли в този шаблон, те се повтарят за всеки елемент от галерията.
В раздела Вмъкване вмъкнете етикет в галерията с подробности.

Етикетът трябва да се появи в галерията; ако не стане, опитайте отново, но не забравяйте да изберете шаблона на галерията, преди да поставите етикета.
Задайте свойството Текст на новия етикет на тази формула:
```
ThisItem.Product.'Product Name'
```
Ако не се появи текст, изберете стрелката за Поръчка 0901 близо до дъното на галерията за поръчки.
Преоразмерете етикета, така че да се появи пълният текст:

Този израз преминава от запис в таблицата подробности за поръчката. Записът се съхранява в ThisItem над таблицата Поръчайте продукти чрез връзка много към едно:

Колоната Име на продукта (и други колони, които ще използвате) се извличат:

Показване на продуктови изображения

В раздела Вмъкване вмъкнете контрола Изображение в галерията с подробности:
Преоразмерете и преместете изображението и етикета един до друг.

Съвет

За фино управление на размера и позицията на контролата, започнете да го преоразмерявате или премествате без да натискате клавиша Alt и след това продължете да преоразмерявате или премествате контрола, докато задържите клавиша Alt:
Задайте свойството Изображение на изображението на тази формула:
```
ThisItem.Product.Picture
```
Отново изразът препраща към продукт, който е свързан с тази подробност за поръчката и извличане на полето Снимка за показване.
Намалете височината на шаблона на галерията, така че повече от един запис Подробности за поръчка се появява в даден момент:

Покажи количество и цена на продукта

В раздела Вмъкване вмъкнете друг етикет в галерията с подробности и след това преоразмерете и преместете новия етикет вдясно от информацията за продукта.
Задайте свойството Текст на новия етикет на този израз:
```
ThisItem.Quantity
```
Тази формула извлича информация директно от таблицата подробности за поръчката (не се изисква връзка).
В раздела Начало променете подравняването на този елемент на Дясно:
В раздела Вмъкване вмъкнете друг етикет в галерията с подробности и след това преоразмерете и преместете етикета вдясно от етикета за количество.
Задайте свойството Текст на новия етикет на тази формула:
```
Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Ако не включвате езиковия маркер ([$-en-US]), той ще бъде добавен за вас въз основа на вашия език и регион. Ако използвате различен езиков маркер, ще искате да премахнете $ точно след затварянето на квадратната скоба (]) и след това добавете свой собствен символ на валута в тази позиция.
В раздела Начало променете подравняването на този елемент на Дясно:
В раздела Вмъкване вмъкнете друга контрола на етикет в галерията с подробности и след това преоразмерете и преместете новия етикет вдясно от единичната цена.
Задайте свойството Текст на новия етикет на тази формула:
```
Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Още веднъж, ако не включвате езиковия маркер ([$-en-US]), той ще бъде добавен за вас въз основа на вашия език и регион. Ако маркерът е различен, ще искате да използвате вашия собствен символ на валутата вместо $ точно след затварянето на квадратната скоба (]).
В раздела Начало променете подравняването на този елемент на Дясно:

Завършихте добавянето на контроли в галерията с подробности за сега.
В екрана Дървовиден изглед, изберете Screen1, за да се гарантира, че галерията с подробности вече не е избрана.

Добавете текст в новата лента на заглавието

В раздела Вмъкване вмъкнете още един етикет на екрана:
Преоразмерете и преместете новия етикет над снимките на продуктите във втората заглавна лента и след това променете цвета на текста на бял в раздела Начало.
Щракнете двукратно върху текста на етикета и след това въведете Продукт:
Копирайте и поставете етикета на продукта, след което преоразмерете и преместете копието над колоната с количество.
Щракнете двукратно върху текста на новия етикет и след това въведете Количество:
Копирайте и поставете етикета за количество, след което преоразмерете и преместете копието над колоната с единична цена.
Щракнете двукратно върху текста на новия етикет и след това въведете Единична цена:
Копирайте и поставете етикета за единична цена, след което преоразмерете и преместете копието над колоната с разширена цена.
Щракнете двукратно върху текста на новия етикет и след това въведете Разширено:

Показване на общи суми за поръчката

Намалете височината на галерията с подробности, за да направите място за общата сума на поръчката в долната част на екрана:
Копирайте и поставете заглавната лента в средата на екрана и след това преместете копието в долната част на екрана:
Копирайте и поставете етикета на продукта от средната лента на заглавието и след това преместете копието в долната лента на заглавието, вляво от колоната Количество.
Щракнете двукратно върху текста на новия етикет и след това въведете този текст:
Общи суми за поръчки:
Копирайте и поставете етикета за общата стойност на поръчката, след което преоразмерете и преместете копието вдясно от етикета за обща поръчка.
Задайте свойството Текст на новия етикет на тази формула:
```
Sum( Gallery1.Selected.'Order Details', Quantity )
```
Тази формула показва предупреждение за делегиране, но можете да я пренебрегнете, защото нито една поръчка няма да съдържа повече от 500 продукта.
На раздела Начало, задайте подравняването на текста на новия етикет на Дясно:
Копирайте и поставете тази контрола на етикета, след което преоразмерете и преместете копието по колоната разширени.
Задайте свойството Текст на копието на тази формула:
```
Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
```
Тази формула показва предупреждение за делегиране, но можете да я пренебрегнете, защото нито една поръчка няма да съдържа повече от 500 продукта.

Добавете място за нови подробности

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

Намалете височината на галерията с подробности достатъчно, за да освободите място за място за редактиране на единичен елемент под тази галерия.

В това пространство ще добавите контроли, така че потребителят да може да добави подробности за поръчката:
В раздела вмъкване, поставете етикет и след това преоразмерете и го преместете под галерията с подробности.
Щракнете двукратно върху текста на новия етикет и след това натиснете Delete.
На раздела Начало, задайте цвета на Запълване на новия етикет на LightBlue:

Изберете продукт

В раздела Вмъкване изберете Контроли > Комбинирано поле:

Контролата Комбинирано поле се появява в горния ляв ъгъл.
В диалоговия прозорец на полета изберете източник на данни Поръчайте продукти.
В раздела Свойства на комбинираното поле, изберете редактиране (до Полета), за да отворите екрана Данни. Уверете се, че Основен текст и SearchField са настроени на nwind_productname.

Вие определяте логическото име, защото екранът Данни все още не поддържа показваните имена в този случай:
Затворете прозореца Данни.
В раздела Свойства близо до десния ръб, превъртете надолу, изключете Разрешаване на множествен избор и да се гарантира това Разрешаване на търсене е включен:
Преоразмерете и преместете комбинираното поле в светлосинята зона, точно под колоната с име на продукта в галерията с подробности:

В това комбинирано поле потребителят ще посочи запис в таблицата Продукт за записа подробности за поръчката, който приложението ще създаде.
Докато държите клавиша Alt, изберете стрелката на полето за комбинация.

Съвет

Задържайки клавиша Alt, можете да взаимодействате с контролите в Power Apps Studio, без да отваряте режим за предварителен преглед.
В списъка с продукти, който се показва, изберете продукт:

Добавете изображение на продукт

В раздела Вмъкване изберете Медия > Изображение:

Контролата Изображение се появява в горния ляв ъгъл:
Преоразмерете и преместете изображението в светлосинята област под другите изображения на продукта и до полето за комбиниране.
Задайте свойството Изображение на изображението да:
```
ComboBox1.Selected.Picture
```
Използвате същия трик, както сте използвали, за да покажете снимката на служителя в обобщената форма. Избраното свойство на комбинираното поле връща целия запис на какъвто и да е продукт, избран от потребителя, включително полето Снимка.

Добавете кутия с количество

В раздела Вмъкване изберете Текст > Въвеждане на текст:

Контролата Въвеждане на текст се появява в горния ляв ъгъл:
Преоразмерете и преместете полето за въвеждане на текст вдясно до комбинираното поле под колоната за количество в галерията с подробности:

Използвайки това поле за въвеждане на текст, потребителят ще посочи полето количество на записа подробности за поръчката.
Задайте свойството По подразбиране на тази контрола на "":
В раздела Начало задайте подравняването на текст на тази контрола на Дясно:

Покажете единицата и разширените цени

В раздела вмъкване, вмъкнете контрола етикет.

Етикетът се появява в горния ляв ъгъл на екрана:
Преоразмерете и преместете етикета вдясно от контрола за въвеждане на текст и задайте свойството Текст на етикета на тази формула:
```
Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Този контрол показва Каталожна цена от Поръчайте продукти таблицата. Тази стойност ще определи полето Единична цена в записа подробности за поръчката.

Бележка

За този сценарий стойността е само за четене, но други сценарии могат да изискват потребителят на приложението да я промени. В този случай използвайте контрола Въвеждане на текст и задайте свойството й По подразбиране на Каталожна цена.
В раздела Начало задайте подравняването на текст на етикета на каталожна цена на Дясно:
Копирайте и поставете етикета за каталожна цена на поръчката, след което преоразмерете и преместете копието вдясно от етикета за каталожна цена.
Задайте свойството Текст на новия етикет на тази формула:
```
Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Този контрол показва разширената цена въз основа на количеството, което потребителят на приложението посочи, и на списъчната цена на продукта, който потребителят на приложението е избрал. Това е чисто информационна за потребителя на приложението.
Щракнете двукратно върху контрола за въвеждане на текст за количество и след това въведете число.

Етикетът за разширена цена се преизчислява, за да се покаже новата стойност:

Добавяне на икона за добавяне

В раздела Вмъкване изберете Икони > Добавяне:

Иконата се появява в горния ляв ъгъл на екрана.
Преоразмерете и преместете тази икона в десния ръб на светлосинята зона и след това задайте свойството OnSelect на иконите на тази формула:
```
Patch( 'Order Details',
    Defaults('Order Details'),
    {
        Order: Gallery1.Selected,
        Product: ComboBox1.Selected,
        Quantity: Value(TextInput1.Text),
        'Unit Price': ComboBox1.Selected.'List Price'
    }
);
Refresh( Orders );
Reset( ComboBox1 );
Reset( TextInput1 )
```
Като цяло функцията Корекция актуализира и създава записи, а конкретните аргументи в тази формула определят точните промени, които функцията ще направи.
- Първият аргумент указва източник на данни (в този случай подробности за поръчката таблица), в която функцията ще актуализира или създаде запис.
- Вторият аргумент указва, че функцията ще създаде запис със стойностите по подразбиране за подробности за поръчката таблица, освен ако в третия аргумент не е посочено друго.
- Третият аргумент уточнява, че четири колони в новия запис ще съдържат стойности от потребителя.
  - Колоната Поръчка ще съдържа номера на поръчката, която потребителят е избрал в галерията на поръчките.
  - Колоната Продукт ще съдържа името на продукта, който потребителят е избрал в полето за комбиниране, което показва продуктите.
  - Колоната Количество ще съдържа стойността, която потребителят посочва в полето за въвеждане на текст.
  - Колоната Единична цена ще съдържа списъчната цена на продукта, който потребителят е избрал за тази подробност за поръчката.
Бележка

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

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

Поръчката отразява информацията, която сте посочили:
(незадължително) Добавете още един артикул към поръчката.
Натиснете Esc, за да затворите режима на преглед.

Премахнете детайла за поръчка

В центъра на екрана изберете шаблона на галерията с подробности:
В раздела Вмъкване изберете Икони > Кошче:

Иконата за кошче се появява в горния ляв ъгъл на шаблона на галерия.
Преоразмерете и преместете тази икона за кошче на дясната страна на шаблона на галерията с подробности и след това задайте свойството OnSelect на иконата на тази формула:
```
Remove( 'Order Details', ThisItem ); Refresh( Orders )
```
От това писане не можете да премахнете запис директно от връзка, така че Премахване функция премахва запис директно от свързаната таблица. Този артикул указва записа, който трябва да се премахне, взет от същия запис в галерията с подробности, където се появява иконата на кошчето.

Отново, операцията използва кеширани данни, така че Обнови функцията информира Поръчки таблица, че приложението е променило една от свързаните таблици.
Натиснете F5, за да отворите режим Преглед, след което изберете иконата Кошче до всеки запис подробности за поръчка, който искате да премахнете от поръчката.
Опитайте да добавите и премахнете различни детайли от поръчките си:

В заключение

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

Втори контрол на галерията, свързан с галерията на поръчките чрез релация „един към много“: Gallery2.Items = Gallery1.Selected.'Order Details'
Релация много към едно между от таблицата подробности за поръчка и таблицата с продукти на поръчката: ThisItem.Product.'Product Name' и ThisItem.Product.Picture
Функцията Варианти за получаване на списък с продукти: Choices( 'Order Details'.Product' )
Свойството Избрани на комбинирано поле като пълния свързан много към един запис: ComboBox1.Selected.Picture и ComboBox1.Selected.'List Price'
Функцията Корекция за създаване на запис подробности за поръчката: Patch( 'Order Details', Defaults( 'Order Details' ), ... )
Функцията Премахване за изтриване на запис подробности за поръчката: Remove( 'Order Details', ThisItem )

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

Бележка

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

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

Споделяне чрез