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 tek počeli koristiti Power Apps (ili ste do sada samo automatski generirali aplikacije), htjet ćete stvoriti aplikaciju od početka prije nego što se pozabavite ovim člankom. 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 članak je napisan kao da imate izvor podataka koji se zove Prodajni nalog i koji sadrži polja prikazana na prethodnoj slici. Ako imate Power Apps po korisniku, po aplikaciji ili probnoj licenci i dozvole administratora ili osobe zadužene za prilagodbu sustava, možete stvoriti tablicu na usluzi Microsoft Dataverse i 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 Gallery i postavite njezino svojstvo Items na „Prodajni nalog”.

   (izborno) Da biste uskladili svoju aplikaciju s primjerom u vodiču, promijenite Layout galerije kako bi prikazivao 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 postaviti kontrole Gallery i Edit form na isti zaslon, ali imat ćete više prostora za rad ako ih stavite na odvojene zaslone.

2. Na vrhu novog zaslona dodajte kontrolu Label te postavite njezino svojstvo Text na ovaj izraz:
   "Sales Order " & Gallery1.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 Align na Center.

   2. Postavite svojstvo Size na 20.

   3. Postavite svojstvo Fill na Navy.

   4. Postavite svojstvo Color na White.

   5. Postavite svojstvo Width na Parent.Width.

   6. Postavite svojstva X i Y na 0.

      

Dodavanje obrasca

1. Dodajte kontrolu Edit form, a zatim je pomaknite i promijenite joj veličinu kako bi ispunila zaslon ispod oznake.

   U sljedećem ćete koraku spojiti kontrolu obrasca s izvorom podataka za Prodajni nalog koristeći desno oko umjesto trake formula. 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 pored stavke Nije odabran izvor podataka, a zatim kliknite ili dodirnite Prodajni nalog.

   Zadani skup polja iz izvora podataka Prodajni nalog pojavit će se u jednostavnom rasporedu od 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 Item na Gallery1.Selected.

   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 prodajnog naloga
   • Poslovni subjekt
   • Prodajni predstavnik
   • Kontakt računa

5. Pomaknite polje Status narudžbe tako da ga povučete na lijevo, a zatim ispustite s druge strane polja Referenca kupovnog naloga 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.

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 slici je broj stupaca u obrascu promijenjen s tri na četiri, a uz to je odabran i potvrdni okvir Poravnanje sa stupcima. 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čice s desne strane za jednu točku poravnanja 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 za kartice Status narudžbe i Referenca kupovnog naloga klijenta.

   

4. Promijenite veličinu kartica Ime i Opis kako bi zauzele š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 Prvi redak adrese za isporuku, odaberite oznaku unutar te kartice, a zatim izbrišite prve dvije riječi iz teksta.

   

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

   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 pristup je ukloniti tekst ili postaviti svojstvo Visible te 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. Ovo su koraci za karticu Stanje:

Korak	Opis	Rezultat
1	Odaberite karticu Stanje tako da se oko ne pojave ručice.
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.
Time smo dovršili promjene kartice Stanje.

Rezultat za potpuni treći redak adrese:

Mnoge kartice započinju s dinamičkim formulama za svojstva. Na primjer, kontrola unosa teksta kojoj smo promijenili veličinu i koju smo premjestili iznad imala je svojstvo Width koje se temeljilo na širini nadređenog svojstva. 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 Poravnanje sa stupcima i ručno postaviti 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. Više informacija potražite u odjeljku Tipkovni prečaci za alternativna 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 Poravnanje sa stupcima u desnom oknu, a zatim držite tipke Alt ili Ctrl+Shift nakon što započnete promjenu veličine i položaja 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 između uključenog i isključenog Poravnanja sa stupcima?

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 upravljaju položajem kartica. 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: poredak unutar retka.
• Y: broj retka.

Slično kontrolama na radnom području, svojstvo Width navodi minimalnu širinu kartice (više o minimalnim proporcijama ubrzo).

Pogledajmo svojstva X, Y i Width za kartice u našem obrascu:

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. Kada je uključeno Snap to columns, ta tri svojstva će se automatski prilagoditi kako bi se sve lijepo složilo unutar redaka bez prelijevanja.

No, ako je Snap to columns isključeno ili ako se Width na jednoj ili više kartica temelji na formuli, može doći do prelijevanja retka. U tom slučaju, kartice će se automatski omotati, time efektivno stvarajući novi redak. Na primjer, ako ručno promijenimo svojstvo Width za karticu Referenca kupovnog naloga klijenta (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. Koordinata Y i dalje ostaje 0 za sve te kartice, a kartice Ime i Opis i dalje imaju vrijednost 1 za koordinatu Y. Kartice koje imaju različite vrijednosti koordinate Y ne spajaju se između različitih redaka.

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. Za postizanje tog učinka dajte svim karticama istu vrijednost koordinate Y, a koordinatu X upotrijebite za redoslijed kartica.

Popunjavanje prostora: WidthFit

Preljev u zadnjem primjeru je stvorio prostor nakon kartice Status narudžbe koja je bila druga kartica u prvom redu. Možemo ručno prilagoditi svojstvo Width za preostale dvije kartice kako bi se taj prostor popunio, ali taj je pristup naporan.

mjesto toga, upotrijebite svojstvo WidthFit. Ako se to svojstvo postavi na true za jednu ili više kartica u retku, sav preostali prostor u retku će se ravnomjerno raspodijeliti među njima. To ponašanje je razlog zbog kojeg smo ranije rekli da je svojstvo Width za karticu minimum, a ono što se vidi može biti šire. To svojstvo nikada neće uzrokovati smanjenje kartice, samo njezino širenje.

Ako postavimo svojstvo WidthFit na true za karticu Status narudžbe, ona će popuniti dostupan prostor, a prva kartica se neće promijeniti:

Ako svojstvo WidthFit postavimo na true i za karticu Datum narudžbe, obje kartice će jednako podijeliti dostupan prostor:

Uhvatite ručice na tim karticama i uzmite 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 uključeno svojstvo WidthFit; možda ćete ga htjeti isključiti, izvršiti promjene svojstva Width, a zatim ga ponovno uključiti.

Kada svojstvo WidthFit može biti od koristi? Ako imate polje koje se koristi samo u nekim situacijama, za njega možete postaviti svojstvo Visible na false, a druge kartice u retku se automatski ispuniti prostor oko njega. Možda želite upotrijebiti formulu koja prikazuje polje samo kada drugo polje im određenu vrijednosti.

Ovdje ćemo postaviti svojstvo Visible za polje Status narudžbe na statično false:

Kada se druga kartica efektivno ukloni, treća kartica se može vratiti u redak u kojem se nalazi prva kartica. Svojstvo WidthFit je za prvu karticu i dalje postavljeno na true, stoga se ona sama proširuje kako bi popunila preostali prostor.

S obzirom da je Status narudžbe nevidljiv, ne možete 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 Height upravlja visinom svake od kartica. Kartice imaju ekvivalent svojstvu WidthFit za Height koje je uvijek postavljeno na true. Zamislite da svojstvo HeightFit postoji al ga nemojte tražiti u proizvodu zato što to svojstvo još uvijek 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 Ukupan iznos koja izgleda visoko, ali njezino svojstvo Height je postavljeno na 80 (isto kao i visina prvog reda). Da biste smanjili visinu retka, morate smanjiti Height najviše kartice u tom retku, a najvišu karticu ne možete odrediti bez da pregledate svojstvo Height svake kartice.

AutoHeight

Kartica može biti viša nego što ste očekivali 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, a to je naša kontrola oznake. 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 ukazuje da kontrola ima svojstvo AutoHeight postavljeno na true:

Svojstvo Text za tu kontrolu postavljeno je na Parent.Error, a to se koristi za dobivanje dinamičkih informacija o pogreškama na temelju pravila provjere valjanosti. U svrhu ilustracije, možemo statički postaviti svojstvo Text za tu kontrolu, a to će povećati njezinu visinu (a samim time i visinu kartice) kako bi se prilagodila 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: