Razumijevanje izgleda obrasca s podacima za aplikacije od gotovih gradivnih elemenata

Jednostavno stvorite privlačan i učinkovit obrazac kada stvarate aplikaciju od gotovih gradivnih elemenata u servisu Power Apps. Na primjer, razmotrite ovaj osnovni obrazac za bilježenje prodajnih naloga:

U ovom ćemo vodiču proći korake za stvaranje tog obrasca. Pogledat ćemo i neke napredne teme kao što je dinamička promjena veličine polja kako bi ispunila dostupni prostor.

Prije nego što počnete

Ako ste novi u ( Power Apps ili ste aplikacije generirali samo automatski), trebali biste izraditi aplikaciju od nule prije nego što zaronite u ovaj članak. Stvaranjem aplikacije od početka čete se upoznati s potrebnim konceptima koji se u ovom članku spominju bez objašnjenja, kao što su dodavanje izvora podataka i kontrola.

Ovaj je članak napisan kao da imate izvor podataka koji se zove Prodajna narudžba i koji sadrži polja na prethodnoj grafici. Ako imate licencu Power Apps po korisniku, po aplikaciji ili probnu dozvolu i dozvole administratora sustava ili osobe za prilagodbu sustava, možete stvoriti tablicu i Microsoft Dataverse dodati slična polja.

Dodavanje galerije

1. Izradite aplikaciju za tablete od početka te dodajte svoj izvor podataka.

   Sve o čemu se raspravlja u ovom članku vrijedi i za rasporede za telefone, ali aplikacije za telefone često imaju samo jedan okomiti stupac.

2. Dodajte okomitu kontrolu Galerija i postavite njezino svojstvo Stavke na "Prodajna narudžba".

   (Nije obavezno) Da biste odgovarali primjerima u ovom vodiču, promijenite izgled galerije tako da prikazuje samo naslov i podnaslov .

   

3. U galeriji kliknite ili dodirnite SO004.

   

   Ovaj će se zapis pojaviti u obliku koji izradite slijedeći korake u nastavku ovog članka.

Dodavanje naslovne trake

1. Dodajte prazan zaslon na koji ćete staviti obrazac.

   Izvan ovog vodiča možete staviti kontrole Galerija i Obrazac za uređivanje na isti zaslon, ali imat ćete više prostora za rad ako ih postavite na zasebne zaslone.

2. Na vrhu novog zaslona dodajte kontrolu Oznaka ... i postavite njezino svojstvo Tekst na ovaj izraz:
   "Prodajna narudžba" & Galerija1.Selected.SalesOrderId

   Oznaka prikazuje broj prodajnog naloga zapisa kojeg ste odabrali u galeriji.

3. (izborno) Oblikujte oznaku na sljedeći način:

   1. Postavite svojstvo Poravnaj na Sredina.

   2. Postavite svojstvo Veličina na 20.

   3. Postavite svojstvo Ispuni na Navy .

   4. Postavite svojstvo Boja na Bijela.

   5. Postavite njegovo svojstvo Width na Parent.Width.

   6. Postavite njegova svojstva X i Y na 0.

      

Dodavanje obrasca

1. Dodajte kontrolu Obrazac za uređivanje, a zatim je premjestite i promijenite joj veličinu da biste ispunili zaslon ispod oznake.

   U sljedećem koraku povezat ćete kontrolu obrasca s izvorom podataka Prodajna narudžba pomoću desnog okna, a ne trake formule. Ako upotrijebite traku formule, obrazac neće prema zadanim postavkama prikazati nijedno polje. Svako polje koje želite možete prikazati odabirom jednog ili više potvrdnih okvira u desnom oknu.

2. U desnom oknu kliknite ili dodirnite strelicu prema dolje pokraj opcije Nije odabran izvor podataka, a zatim kliknite ili dodirnite Prodajna narudžba.

   Zadani skup polja iz izvora podataka Prodajni nalog pojavit će se u jednostavnom izgledu s tri stupca. Međutim, mnoga polja su prazna, a njihovo namještanje u konačne položaje može potrajati nekoliko trenutaka.

3. Postavite svojstvo obrasca Stavka na Galerija1.Odabrano.

   Obrazac prikazuje zapis koji ste odabrali u galeriji, ali zadani skup polja možda neće odgovarati onome što želite u svom konačnom proizvodu.

4. U desnom oknu sakrijte svako od tih polja uklanjanjem potvrdnog okvira:

   • ID prodajne narudžbe
   • Račun
   • Prodavač
   • Kontakt za račun

5. Premjestite polje Stanje narudžbe tako da ga povučete ulijevo, a zatim ispustite na drugu stranu polja Referenca narudžbenice klijenta.

   Vaš zaslon trebao bi sličiti na ovaj primjer:

   

Odaberite podatkovnu karticu

Svako prikazano polje ima odgovarajuću podatkovnu karticu na obrascu. Ta kartica uključuje skup kontrola za naslov polja, okvir za unos, zvjezdicu (koja se pojavljuje ako je polje obavezno) i poruku pogreške potvrde valjanosti.

Karticu možete odabrati i izravno na obrascu. Kada se odabere kartica, iznad ne se pojavljuje crni natpis.

Napomena

Ako želite izbrisati karticu (a ne samo sakriti), odaberite je, a zatim pritisnite Izbriši.

Rasporedite kartice u stupce

Prema zadanoj postavci, obrasci u aplikacijama za tablete imaju tri stupca, a u aplikacijama za telefone jedan. Možete odrediti ne samo koliko stupaca obrazac ima već i trebaju li sve kartice stati unutar granica stupca.

Na ovoj je slici broj stupaca u obrascu promijenjen s tri na četiri s potvrđenim okvirom Prikvači na stupce . Kartice u obrascu su automatski raspoređene kako bi odgovarale novom rasporedu.

Promjena veličine kartica u više stupaca

Ovisno o podacima u svakoj o kartica, možda ćete željeti da neke kartice stanu u jedan stupac, a druge protežu kroz više stupaca. Ako kartica sadrži više podataka nego što želite prikazati u jednom stupcu, karticu možete proširiti tako da je odaberete, a zatim povučete ručicu na lijevom ili desnom rubu njenog okvira za odabir. Kako povlačite ručicu, kartica će se „poravnati” s granicama stupca.

Kako biste svoj dizajn učinili fleksibilnijim, a istovremeno zadržali dio strukture, možete povećati broj stupaca do 12. Ta promjena će vam omogućiti jednostavnu konfiguraciju svake kartice kako bi imala raspon cijelog obrasca, polovine, trećine, četvrtine, šestine obrasca itd. Pogledajmo to na djelu.

1. U desnom oknu postavite broj stupaca u obrascu na 12.

   

   Obrazac se ne mijenja na očigled, ali imate više točaka za poravnavanje dok povlačite lijevu ili desnu ručicu.

2. Povećajte širinu kartice Datum narudžbe povlačenjem ručke s desne strane za jednu točku privlačenja udesno.

   Kartica se proteže kroz četiri od 12 stupaca obrasca (odnosno, 1/3 obrasca) umjesto samo tri od 12 stupaca obrasca (odnosno, 1/4 obrasca). Svaki puta kada povećavate širinu kartice za jednu točku poravnanja, kartica će zauzeti dodatnu 1/12 obrasca.

   

3. Ponovite prethodni korak s referentnim karticama Status narudžbe i Referentne kartice narudžbenice kupca.

   

4. Promijenite veličinu kartica Naziv i Opis tako da zauzimaju šest stupaca (ili 1/2) obrasca.

5. Neka se prva dva retka adrese za isporuku protežu kroz cijeli obrazac:

Gotovi ste. Imamo svoj željeni obrazac koji sadrži mješavinu redaka koji imaju različite brojeve stupaca:

Izmijenite kontrole na kartici

Adresa za isporuku uključuje nekoliko informacija koje želimo vizualno grupirati zajedno za korisnika. Svako će polje ostati vlastita podatkovna kartica, ali možemo manipulirati kontrolama unutar kartica kako bi se bolje uklopile.

1. Odaberite karticu Adresa prvog retka isporuke, odaberite oznaku unutar te kartice, a zatim izbrišite prve tri riječi iz teksta.

   

2. Odaberite karticu Drugi redak adrese za isporuku, odaberite oznaku unutar te kartice, a zatim izbrišite sav tekst na njoj.

   Možete biti u napasti ukloniti kontrolu oznake. U mnogim slučajevima će to odlično funkcionirati. Međutim, formule mogu ovisiti o prisutnosti te kontrole. Sigurniji je pristup uklanjanje teksta ili postavljanje svojstva Vidljivo kontrole na false.

   

3. Na istoj kartici pomaknite okvir za unos teksta preko oznake kako biste smanjili razmak između prvog i drugog retka adrese.

   Visina kartice će se smanjiti kada sadržaj zauzima manje mjesta.

   

Prebacimo sada pozornost na treći redak adrese. Slično onome što smo upravo napravili, skratimo tekst svake oznake za te kartice i posložimo okvir za unos teksta s desne strane svake oznake. Evo koraka za državnu karticu :

Korak	Opis	Rezultat
1	Odaberite državnu karticu tako da se oko nje pojave ručke za hvatanje.
2	Odaberite oznaku unutar te kartice tako da se oko ne pojave ručice.
3	Postavite kursor s desne strane teksta, a zatim izbrišite dio koji vam nije potreban.
4	Pomoću ručica na bočnim stranama, promijenite veličinu kontrole oznake kako bi odgovarala novoj veličini teksta.
5	Odaberite kontrolu unosa teksta unutar te kartice.
6	Pomoću ručica na bočnim stranama, promijenite veličinu kontrole unosa teksta na veličinu koju želite.
7	Povucite okvir za unos teksta s desne strane kontrole oznake, a zatim ispustite okvir za unos teksta.
Naše izmjene državne iskaznice sada su dovršene.

Rezultat za potpuni treći redak adrese:

Mnoge kartice započinju s dinamičkim formulama za svojstva. Na primjer, kontrola Unos teksta kojoj smo promijenili veličinu i premjestili iznad imala je svojstvo Width na temelju širine nadređenog. Kada pomaknete kontrolu ili joj promijenite veličinu, te dinamičke formule se zamjenjuju statičkim vrijednostima. Ako želite, možete vratiti dinamičke formule pomoću trake formula.

Isključivanje poravnanja sa stupcima

Ponekad ćete željeti preciznije upravljanje od onoga koje vam omogućuje standardnih 12 stupaca. U tim slučajevima možete isključiti opciju Prikvači na stupce i zatim ručno pozicionirati kartice. Obrazac će nastaviti poravnavanje sa 12 stupaca, ali možete i držati tipke Alt ili Ctrl + Shift nakon što započnete promjenu veličine ili premještanje kako biste nadjačali točke za poravnanje. Dodatne informacije potražite u članku Tipkovni prečaci alternativnog ponašanja.

U našem primjeru sve četiri komponente koje čine treći redak adrese potpuno su iste širine. To možda nije najbolji raspored zato što su nazivi gradova dulji od kratica država, a okvir za unos teksta za države/regije je kratak zbog duljine svoje oznake. Da biste optimizirali taj prostor, isključite opciju Prikvači na stupce u desnom oknu, a zatim držite pritisnute tipke Alt ili Ctrl+Shift nakon što počnete određivati veličinu i pozicioniranje tih kartica.

Nakon pažljive promjene položaja, rezultat ima odgovarajuće veličine za svako polje i ujednačene vodoravne razmake između polja:

Ukratko, koje su razlike kada je Snap to columns uključen i isključen ?

Ponašanje	Poravnanje sa stupcima uključeno	Poravnanje sa stupcima isključeno
Promjena veličine se poravna na	Broj stupaca koje odaberete: 1, 2, 3, 4, 6 ili 12	12 stupaca
Poravnanje promjene veličine može se nadjačati	Ne	Da, pomoću tipki Alt ili Ctrl+Shift nakon početka promjene veličine
Kartice automatski mijenjaju raspored između redaka (više o tome kasnije)	Da	Ne

Postavljanje širine i visine

Kao i sa svim ostalim u servisu Power Apps, izgledom obrasca upravljaju svojstva na kontrolama kartice. Kao što je već opisano, možete promijeniti vrijednosti tih svojstava povlačenjem kontrola na druge lokacije ili povlačenjem ručki za promjenu veličine kontrola. Međutim, otkrit ćete situacije u kojima ćete željeti razumjeti ta svojstva i njima preciznije manipulirati, posebno kada svoje obrasce činite dinamičnima putem formula.

Osnovni raspored: X, Y i širina

Svojstva X i Y kontroliraju položaj karata. Kada radimo s kontrolama na neobrađenom radnom području, ta svojstva pružaju apsolutni položaj. U obrascu, ta svojstva imaju drugačije značenje:

• X: Redoslijed unutar reda.
• Y: Broj retka.

Slično kontrolama na radnom području, svojstvo Width određuje minimalnu širinu kartice (više o minimalnom aspektu u trenutku).

Pogledajmo svojstva X, Y i Width kartica u našem obliku:

Redci s preljevom

Što se događa ako su kartice u retku preširoke da bi stale u taj redak? Obično se ne trebate brinuti o toj mogućnosti. S uključenom opcijom Prikvači na stupce , ova tri svojstva automatski će se prilagoditi tako da se sve lijepo uklapa u retke bez prelijevanja.

No ako je opcija Prikvači na stupce isključena ili je Širina temeljena na formuli na jednoj ili više kartica, može doći do prekoračenja retka. U tom slučaju, kartice će se automatski omotati, time efektivno stvarajući novi redak. Na primjer, ručno promijenimo svojstvo Širina naše referentne kartice narudžbenice kupca (prvi redak, treća stavka) na 500:

Tri kartice gornjeg retka postale su preširoke za vodoravne mjere, stoga je dodan novi redak u koji se postavlja preljev. Y koordinata za sve ove karte i dalje je ista na 0, a kartice Ime i Opis i dalje imaju Y od 1. Kartice koje imaju različite vrijednosti Y ne spajaju se u recima.

To ponašanje možete upotrijebiti za stvaranje potpuno dinamičkog rasporeda u kojemu se kartice postavljaju na temelju Z-redoslijeda, popunjavajući vodoravno koliko god prostora mogu prije nego što prijeđu u sljedeći redak. Da biste postigli ovaj učinak, dajte svim kartama istu vrijednost Y i upotrijebite X za redoslijed karata.

Popunjavanje prostora: WidthFit

Preljev u posljednjem primjeru stvorio je razmak iza kartice statusa narudžbe, koja je bila druga kartica u prvom retku. Mogli bismo ručno prilagoditi svojstva širine dviju preostalih kartica kako bismo popunili ovaj prostor, ali ovaj pristup je zamoran.

Kao alternativu koristite svojstvo WidthFit . Ako je ovo svojstvo postavljeno na true za jednu ili više karata u nizu, preostali prostor u retku bit će ravnomjerno podijeljen između njih. Zbog ovog ponašanja smo ranije rekli da je svojstvo Width kartice minimalno , a ono što se vidi može biti šire. To svojstvo nikada neće uzrokovati smanjenje kartice, samo njezino širenje.

Ako na kartici statusa narudžbe postavimo WidthFit na true , ona popunjava raspoloživi prostor, dok prva kartica ostaje nepromijenjena:

Ako također podesimo WidthFit na true na kartici Datum narudžbe, obje će kartice ravnomjerno podijeliti raspoloživi prostor:

Ručke na tim karticama uzimaju u obzir dodatnu širinu koju pruža WidthFit, a ne minimalnu širinu koju pruža svojstvo Width . Može biti zbunjujuće manipulirati svojstvom Width dok je WidthFit uključen; možda ćete ga htjeti isključiti, promijeniti Width, a zatim ga ponovno uključiti.

Kada bi WidthFit mogao biti koristan? Ako imate polje koje se koristi samo u određenim situacijama, možete postaviti njegovo svojstvo Vidljivo na false, a ostale kartice u retku automatski će popuniti prostor oko njega. Možda želite upotrijebiti formulu koja prikazuje polje samo kada drugo polje im određenu vrijednosti.

Ovdje ćemo svojstvo Vidljivo polja Status narudžbe postaviti na statički false :

Kada se druga kartica efektivno ukloni, treća kartica se može vratiti u redak u kojem se nalazi prva kartica. Prva kartica i dalje ima WidthFit postavljen na true, tako da se sama proširuje kako bi popunila raspoloživi prostor.

Budući da je status narudžbe nevidljiv, ne možete ga tako jednostavno odabrati na radnom području. Međutim, možete odabrati bilo koju kontrolu, vidljivu ili ne, u hijerarhijskom popisu na lijevoj strani zaslona.

Visina

Svojstvo Visina upravlja visinom svake kartice. Kartice imaju ekvivalent WidthFit za visinu i uvijek je postavljen natrue . Zamislite da svojstvo HeightFit postoji, ali nemojte ga tražiti u proizvodu jer takvo svojstvo još nije izloženo.

To ponašanje ne možete izmijeniti, stoga mijenjanje visina kartica može biti zahtjevno. Sve kartice unutar retka izgledaju kao da su iste visine kao i najviša kartica. Možete vidjeti ovakav redak:

Koja kartica čini redak visokim? Na prethodnoj slici odabrana je kartica Ukupni iznos i prikazuje se visoka, ali njezino svojstvo Visina postavljeno je na 80 (isto kao i visina prvog retka). Da biste smanjili visinu retka, morate smanjiti visinu najviše karte u tom retku, a ne možete identificirati najvišu kartu bez pregleda svojstva Visina svake kartice.

AutoHeight

Kartica također može biti viša nego što očekujete ako sadrži kontrolu za koju je svojstvo AutoHeight postavljeno na true. Primjerice, mnoge kartice sadrže oznaku koja prikazuje poruku pogreške ako vrijednost polja uzrokuje problem s provjerom valjanosti.

Bez teksta za prikaz (bez pogreške), oznaka se sažima na visinu vrijednosti nula. Da ne znate drugačije, pomislili biste da ga nema, a cijela stvar treba upravo tako funkcionirati:

Na lijevoj strani zaslona popis kontrola prikazuje ErrorMessage1, što je naša kontrola oznaka. Kada ažurirate aplikaciju, možete odabrati tu kontrolu kako biste joj dali određenu visinu i prikazali ručice kojima možete pozicionirati kontrolu i promijeniti joj veličinu. "A" u plavom okviru označava da je kontrola postavila značajku AutoHeight na true:

Svojstvo Tekst ove kontrole postavljeno je na Parent.Error, koje se koristi za dobivanje informacija o dinamičkoj pogrešci na temelju pravila provjere valjanosti. U svrhu ilustracije, statički postavimo svojstvo Text ove kontrole, koje će povećati njezinu visinu (a time i visinu kartice) kako bi se prilagodilo duljini teksta:

Učinimo poruku o pogrešci nešto dužom, a to će ponovno uzrokovati rast kontrole i kartice kako bi joj se prilagodile. Visina retka se ukupno povećava, istovremeno zadržavajući poravnanje između kartica: