Разберете оформлението за формуляр за данни за приложения на платното

Лесно създайте атрактивна и ефективна форма, когато изграждате приложение за платно в Power Apps. Например, помислете за този основен формуляр за записване на поръчки за продажби:

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

Преди да започнете

Ако сте нови в Power Apps (или имате само генерирани приложения автоматично), ще искате да го направите изградете приложение от нулата, преди да се потопите в тази статия. Чрез изграждането на приложение от нулата ще се запознаете с необходимите концепции, като добавяне на източници на данни и контроли, които са споменати, но не са обяснени в тази статия.

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

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

1. Създайте приложение за таблет от нулата и добавете своя източник на данни.

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

2. Добавете вертикална контрола галерия и задайте свойството й Елементи на 'Поръчка за продажба'.

   (незадължително) За да съответствате на примерите в този урок, променете галерията Оформление да се показва само Заглавие и подзаглавие.

   

3. В галерията щракнете или докоснете SO004.

   

   Този запис ще се появи във формата, която изграждате, като следвате стъпки по-късно в тази статия.

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

1. Добавете празен екран, където ще поставите формуляра.

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

2. В горната част на новия екран добавете контрола етикет и задайте свойството й Текст на този израз:
   "Sales Order " & Gallery1.Selected.SalesOrderId

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

3. (незадължително) Форматирайте етикета, както следва:

   1. Задайте свойството Подравняване на Център.

   2. Задайте свойството Размер на 20.

   3. Задайте свойството Запълване на Навигация.

   4. Задайте свойството Цвят на Бяло.

   5. Задайте свойството широчина на Parent.Width.

   6. Задайте свойството х и Y на 0.

      

Добавяне на формуляр

1. Добавете и контрола Редактиране на формуляр, след това я преместете и оразмерете, за да запълни екрана под етикета.

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

2. В десния панел щракнете или докоснете стрелката надолу до Не е избран източник на данни и след това щракнете или докоснете Поръчка за продажба.

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

3. Задайте свойството Елемент на формуляра на Gallery1.Selected.

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

4. В десния панел скрийте всяко от тези полета, като премахнете квадратчето за отметка:

   • ИД на поръчка за продажби
   • Клиент
   • Специалист по продажбите
   • Контакт на акаунта

5. Преместете полето Състояние на поръчката, като го плъзнете вляво и след това го пуснете от другата страна на полето Справка за поръчка за покупка на клиента.

   Вашият екран трябва да прилича на този пример:

   

Избор на карта с данни

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

Можете също да изберете карти директно във формата. Когато е избрана карта, над нея се появява черен надпис.

Бележка

За да изтриете карта (не само да я скриете), изберете я и натиснете Delete.

Подредете картите в колони

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

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

Преоразмерете картите в няколко колони

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

За да направите дизайна си по-гъвкав, но да запазите някаква структура, можете да увеличите броя на колоните до 12. С тази промяна можете лесно да конфигурирате всяка карта, за да обхване цялата форма, половината от формуляра, една трета, една четвърт, една шеста и т.н. Нека видим това в действие.

1. В десния прозорец задайте броя на колоните във формата на 12.

   

   Формата видимо не се променя, но имате повече точки за щракване, когато влачите дясната дръжка за хващане.

2. Увеличете ширината на картата Дата на поръчка, като плъзнете дръжката за захващане отдясно, една точка за щракване вдясно.

   Картата обхваща четири от 12-те колони на формуляра (или 1/3 от формуляра), вместо само три от 12-те колони на формуляра (или 1/4 от формуляра). Всеки път, когато увеличите ширината на картата с една точка за щракване, тя обхваща допълнително 1/12 от формуляра.

   

3. Повторете предишната стъпка с карти Състояние на поръчката и Справка за поръчка за покупка на клиента.

   

4. Преоразмерете име и описание карти, които заемат шест колони (или 1/2) от формуляра.

5. Първите два реда от адреса за доставка се простират изцяло през формата:

Всичко е готово. Имаме желания от нас формуляр, смесвайки редове с различен брой колони:

Манипулирайте контролите в картата

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

1. Изберете Първи ред за адрес за доставка карта, изберете етикета в тази карта и след това изтрийте първите три думи от текста.

   

2. Изберете Втори ред за адрес за доставка карта, изберете етикета в тази карта и след това изтрийте целия текст.

   Може да е изкушаващо да премахнете контрола на етикета и в много случаи това ще работи добре. Но формулите може да зависят от присъствието на този контрол. По-сигурният подход е да премахнете текста или да зададете свойството видимо на контрола на невярно.

   

3. В същата карта преместете полето за въвеждане на текст върху етикета, за да намалите интервала между първия и втория ред на адреса.

   Височината на картата се свива, когато съдържанието й заема по-малко място.

   

Сега нека насочим вниманието си към третия ред на адреса. Подобно на това, което току-що направихме, нека да съкратим текста на всеки етикет за тези карти и да подредим полето за въвеждане на текст вдясно от всеки етикет. Ето стъпките за картата състояние:

Стъпка	Описание	Резултат
1	Изберете картата състояние, така че дръжките за захващане се появяват около нея.
2	Изберете етикета с тази карта, така че дръжките за захващане се появяват около нея.
3	Поставете курсора вдясно от текста и след това изтрийте частта, която не ни трябва.
4	Използвайки дръжките за захващане отстрани, оразмерете контрола на етикета, за да пасне на новия размер на текста.
5	Изберете контрола за въвеждане на текст в тази карта.
6	Използвайки дръжките за захващане отстрани, оразмерете контрола за въвеждане на текст до желания размер.
7	Плъзнете нагоре полето за въвеждане на текст вдясно от контрола за етикети и след това пуснете полето за въвеждане на текст.
Нашите модификации на картата състояние вече са пълни.

Резултатът за целия трети адресен ред:

Много от картите започват с динамични формули за техните свойства. Например, контролът за въвеждане на текст, който променихме размера и се премести по-горе, имаше свойство широчина въз основа на ширината на неговия родител. Когато премествате или преоразмерявате контрола, тези динамични формули се заменят със статични стойности. Ако искате, можете да възстановите динамичните формули, като използвате лентата с формули.

Изключване на прихващане към колоните

Понякога ще искате по-фин контрол, отколкото стандартните 12 колони могат да осигурят. В тези случаи можете да изключите Прихващане към колони и след това поставете картите ръчно. Формулярът ще продължи да щракне до 12 колони, но можете също така да задържите клавишите Alt или Ctrl + Shift, след като започнете преоразмеряване или препозициониране, за да отмените точките за щракване. За повече информация вижте алтернативни клавишни комбинации за поведение.

В нашия пример, четирите компонента, съставляващи третия ред на адреса, имат абсолютно една и съща ширина. Но това може да не е най-доброто оформление, тъй като имената на градове са по-дълги от съкращенията на държавата, а полето за въвеждане на текст за държави / региони е кратко поради дължината на неговия етикет. За да оптимизирате това пространство, изключете Преминаване към колони в десния панел и след това задръжте клавишите Alt или Ctrl + Shift, след като започнете да оразмерявате и позиционирате тези карти.

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

В обобщение какви са разликите, когато Преминаване към колони е включен срещу изключен?

Поведение	Преминаване към включени колони	Преминаване към изключени колони
Преоразмерете прихващанията до	Брой колони, които сте избрали: 1, 2, 3, 4, 6 или 12	12 колони
Премахването на размера може да бъде отменено	Не	Да, с клавишите Alt или Ctrl + Shift след стартиране на размера
Картите автоматично се препредават между редовете (повече за това по-късно)	Да	Не

Задаване на височина и ширина

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

Основно оформление: X, Y и ширина

Свойствата х и Y контролират позицията на картите. Когато работим с контроли върху суровото платно, тези свойства осигуряват абсолютна позиция. Във форма тези свойства имат различно значение:

• х: Поръчка в рамките на един ред.
• Y: Номер на ред.

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

Нека да разгледаме свойствата х, Y и широчина на картите в нашия формуляр:

Препълнени редове

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

Но със Преминаване към колони изключено или базирано на формула широчина върху една или повече от вашите карти може да се случи препълване на ред. В този случай картите автоматично ще се увиват, така че на практика да се създаде друг ред. Например, нека ръчно да променим свойството широчина на нашата карта Справка за поръчка за покупка на клиента (първи ред, трети елемент) до 500:

Трите карти на горния ред вече не се побират хоризонтално, а друг ред е създаден, за да обвие преливането. Координатата Y за всички тези карти е все още една и съща при 0 и картите име и описание все още имат Y от 1. Карти, които имат различни стойности Y не се обединяват в редове.

Можете да използвате това поведение, за да създадете напълно динамично оформление, при което картите се поставят въз основа на Z-ред, като се попълват колкото е възможно повече, преди да преминете към следващия ред. За да постигнете този ефект, дайте на всички карти еднаква стойност Y и използвайте х за реда на картите.

Пространства за запълване: WidthFit

Преливането в последния пример създаде интервал след картата Състояние на поръчката, която беше втората карта на първия ред. Можехме ръчно да коригираме свойствата широчина на двете останали карти за запълване на това пространство, но този подход е досаден.

Като алтернатива използвайте свойството WidthFit. Ако това свойство е настроено на вярно за една или повече карти подред, всяко останало място на реда ще бъде равномерно разделено между тях. Това поведение е защо казахме по-рано, че свойството широчина на картата е минимум и това, което се вижда, може да бъде по-широко. Това свойство никога няма да доведе до свиване на картата, а само разширяване.

Ако зададем WidthFit на вярно на картата Състояние на поръчката, тя попълва наличното пространство, докато първата карта остава непроменена:

Ако и ние зададем WidthFit на вярно на Дата на поръчка картата, и двете карти равномерно ще разделят наличното пространство:

Дръжките за захващане на тези карти вземат предвид допълнителната ширина, осигурена от WidthFit, а не минималната ширина, предоставена от свойството широчина. Може да бъде объркващо да се манипулира свойството широчина, докато WidthFit е включен; може да искате да го изключите, да направите промени в широчина и след това го включете отново.

Кога може WidthFit да бъде полезен? Ако имате поле, което се използва само в определени ситуации, можете да го зададете свойството видимо на невярно, а останалите карти от реда автоматично ще запълнят пространството около него. Може да искате да използвате формула, която показва поле само когато друго поле има определена стойност.

Тук ще настроим свойството видим на полето Състояние на поръчката на статично невярно:

С ефективно премахване на втората карта, третата карта вече може да се върне на същия ред като първата карта. Първата карта все още има WidthFit зададен на вярно, така че той сам се разширява, за да запълни наличното пространство.

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

Височина

Свойството височина управлява височината на всяка карта. Картите са равностойни на WidthFit за височина и винаги е настроен на вярно. Представете си, че свойството HeightFit съществува, но не го търсете в продукта, тъй като такова свойство все още не е изложено.

Не можете да изключите това поведение, така че промяната на височините на картите може да бъде предизвикателство. Всички карти в един ред изглежда са с еднаква височина като най-високата карта. Може да виждате реда като този:

Коя карта прави реда висок? В предишната графика, картата Обща сума е избрана и изглежда висока, но нейното свойство височина е настроено на 80 (същото като височината на първия ред). За да намалите височината на един ред, трябва да намалите височина от най-високата карта в този ред и не можете да идентифицирате най-високата карта, без да прегледате свойството височина на всяка карта.

AutoHeight

Картата може също да е по-висока, отколкото очаквате, ако съдържа контрола, за която свойството AutoHeight е настроено на вярно. Например, много карти съдържат етикет, който показва съобщение за грешка, ако стойността на полето причини проблем с валидирането.

Без текст за показване (без грешка), етикетът се свива до нулева височина. Ако не знаехте по-добре, нямаше да знаете, че е там, и това е както трябва:

В лявата част на екрана се показва списъкът с контролите ErrorMessage1, което е нашият контрол върху етикетите. Докато актуализирате приложение, можете да изберете този елемент за управление, за да му дадете известна височина и да покажете дръжки за захващане, с които можете да позиционирате и оразмерите контрола. „A” в синьо поле показва, че контролата има AutoHeight зададено на вярно:

Свойството Текст на тази контрола е зададено на Parent.Error, която се използва за получаване на динамична информация за грешки въз основа на правила за валидиране. За илюстрация, нека да настроим статично свойство Текст на това управление, което ще увеличи височината му (и като разширение, височината на картата), за да побере дължината на текста:

Нека да направим съобщението за грешка малко по-дълго и отново контролът и картата растат, за да се поберат. Редът като цяло расте във височина, като поддържа вертикално подравняване между картите:

Бележка

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

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