Adatűrlap elrendezés vászonalkalmazásokhoz

A Power Appsben könnyen létrehozhat egy mutatós és hatékony űrlapot egy vászonalapú alkalmazás fejlesztésekor. Vegyük példaként ezt az értékelési rendelések rögzítésére szolgáló alapvető űrlapot:

Ebben az oktatóanyagban végigvesszük az űrlap létrehozásához szükséges lépéseket. Érintünk néhány speciális témakört is, például a mezők dinamikus méretezését a rendelkezésre álló terület kitöltéséhez.

Előzetes teendők

Ha először használja a Power Appst (vagy csak automatikusan hozott létre alkalmazásokat), érdemes előzmények nélküli új alkalmazást készítenie az alapoktól kezdve, mielőtt alaposabban elmerülne ebben a cikkben. Egy teljesen új alkalmazás készítésével megismerheti az említett, de nem a jelen cikkben ismertetett szükséges fogalmakat, például az adatforrások és a vezérlők hozzáadását.

A cikk úgy van megírva, mintha egy Értékesítési rendelés nevű adatforrással rendelkezne, amely az előző ábrában szereplő mezőket tartalmazza. Ha rendelkezik a Power Apps felhasználó-, alkalmazás- vagy próbalicencével, valamint rendszergazdai vagy rendszertestreszabói jogosultságokkal, akkor létrehozhat egy táblázatot a Microsoft Dataverse szolgáltatásban, és hozzáadhat hasonló mezőket.

Katalógus hozzáadása

1. Hozzon létre egy tabletalkalmazást az elejéről, és adja hozzá az adatforrását.

   Minden, a jelen cikkben tárgyalt téma érvényes a telefonos elrendezésekre is, de a telefonos alkalmazások gyakran csak egy függőleges oszloppal rendelkeznek.

2. Vegyen fel egy Gallery (Katalógus) vezérlőelemet, majd állítsa az Items (Elemek) tulajdonságát „Értékesítési rendelés” értékre.

   (választható) A jelen oktatóanyagban szereplő példáknak megfelelően módosítsa a katalógus Layout (Elrendezés) tulajdonságát a Title and subtitle (Cím és alcím) értékre.

   

3. Kattintson vagy koppintson a katalógus SO004 elemére.

   

   Ez a rekord a cikk későbbi részét követve létrehozott űrlapon jelenik majd meg.

Címsor hozzáadása

1. Adjon hozzá üres űrlapot ott, ahová az űrlapot hozzá szeretné adni.

   A jelen oktatóanyagon kívül ugyanazon a képernyőn helyezheti el a katalógus és szerkesztési űrlap vezérlőket, de ha külön képernyőkön helyezi el őket, több helye lesz a munkához.

2. Az új képernyő tetején helyezzen el egy Label (Címke) vezérlőt, és állítsa Text (Szöveg) tulajdonságát a következő értékre:
   "Értékesítési rendelés: " & Gallery1.Selected.SalesOrderId

   A címke a katalógusban kiválasztott rekord értékesítésirendelés-számát mutatja.

3. (választható) Formázza a címkét a következő módon:

   1. Állítsa be az Align (Igazítás) tulajdonságot a Center (Középre) értékre.

   2. Állítsa a Size (Méret) tulajdonságot 20-ra.

   3. Állítsa a Fill (Kitöltés) tulajdonságot Navy (Tengerészkék) -re.

   4. Állítsa a Color (Szín) tulajdonságot White (Fehér) -re.

   5. Állítsa a Width (Szélesség) tulajdonságot a Parent.Width értékre.

   6. Állítsa a X és Y tulajdonságokat 0-ra.

      

Űrlap hozzáadása

1. Adjon hozzá egy Edit form (Szerkesztési űrlap) vezérlőt, majd helyezze át és méretezze át a címke alatti képernyő kitöltéséhez.

   A következő lépésben összekapcsolja majd az űrlap-vezérlőelemet az Értékesítési rendelés adatforrással, a szerkesztőléc helyett a jobb oldali ablaktábla használatával. Ha a szerkesztőlécet használja, alapértelmezés szerint egy mező sem jelenik meg az űrlapon. Mindig megjelenítheti a kívánt mezőket a jobb oldali ablaktáblában egy vagy több jelölőnégyzet bejelölésével.

2. A jobb oldali ablaktáblában kattintson vagy koppintson a lefelé mutató nyílra a Nincs kiválasztva adatforrás elem mellett, majd kattintson vagy koppintson a Sales order (Értékesítési rendelés) lehetőségre.

   A Sales order (Értékesítési rendelés) adatforrásból származó mezők alapértelmezett készlete egy egyszerű, háromoszlopos elrendezésben jelenik meg, sok azonban üres, és néhány pillanatig eltarthat, amíg a végső helyzetükbe kerülnek.

3. Az Item (Elem) tulajdonságot állítsa Gallery1.Selected értékre.

   Az űrlap a katalógusban kiválasztott rekordot jeleníti meg, de a mezők alapértelmezett készlete nem mindig felel meg annak, amit a végtermékben szeretne.

4. A jobb oldali ablaktáblában rejtse el az egyes mezőket a jelölőnégyzet jelölésének törlésével:

   • Sales Order ID (Értékesítési megrendelés azonosítója)
   • Partner
   • Sales person (Értékesítő)
   • Account contact (Partner kapcsolattartója)

5. Helyezze át az Order status (Rendelésállapot) mezőt balra húzva, majd a Customer purchase order reference (Vevői beszerzésirendelés-hivatkozás) mező másik oldalán elengedve azt.

   A képernyőnek a következő példához hasonlónak kell lennie:

   

Adatkártya kiválasztása

Minden megjelenített mezőhöz megfelelő adatkártya tartozik az űrlapon. Ez a kártya a mezőnév, a beviteli mező, a csillag (amely akkor jelenik meg, ha a mező megadása kötelező) és egy érvényesítési hibaüzenet vezérlőinek csoportját tartalmazza.

A kártyákat közvetlenül az űrlapon is kijelölheti. A kártya kiválasztásakor felette fekete felirat jelenik meg.

Kártyák oszlopokba rendezése

Alapértelmezés szerint a táblagépes alkalmazásokban az űrlapok háromoszloposak, a telefonos alkalmazásokban pedig egyoszloposak. Nem csak arról rendelkezhet, hogy hány oszlop legyen az űrlapon, hanem arról is, hogy az összes kártyának el kell-e férnie az oszlop határain belül.

Az ábrán az űrlapon szereplő oszlopok számát háromról négyre változtattuk, a Snap to columns (Oszlopokhoz igazítás) jelölőnégyzet bejelölése mellett. Az űrlapon lévő kártyák automatikusan az új elrendezésnek megfelelően rendeződnek.

Kártyák átméretezése több oszlopban

Az egyes kártyákon található adatoktól függően előfordulhat, hogy egyes kártyáknak egy oszlopban kell elférniük, míg más kártyákat több oszlopra szeretne felosztani. Ha a kártya több adatot tartalmaz, mint amennyi egyetlen oszlopban megjeleníthető, jelölje ki, és a kiválasztási mező jobb vagy bal szélén lévő fogópont húzásával állítsa nagyobb szélességűre a kártyát. A fogópont húzásakor a kártya illeszkedik az oszlophatárokhoz.

Az oszlopok száma 12-re növelhető a kialakítás rugalmasabbá tétele érdekében az eredeti szerkezet részleges megőrzése mellett. Ezzel a változtatással könnyen konfigurálhatja az egyes kártyákat az egész űrlapra, illetve annak felére, harmadára, negyedére, hatodára kiterjedőre és így tovább. Lássuk, hogy működik ez a valóságban.

1. A jobb oldali ablaktáblában állítsa az űrlap oszlopainak számát a 12 értékre.

   

   Az űrlap látható módon nem változik, de a bal vagy jobb fogópont húzásakor több illesztési pont áll rendelkezésére.

2. Növelje az Order date (Rendelési dátum) kártya szélességét a fogópont egy illesztési ponttal jobbra való húzásával.

   A kártya az űrlap 12 oszlopából négyre (vagy az űrlap 1/3-ára) terjed ki, a 12 oszlopból csak három (vagy az űrlap egynegyede) helyett. Ha egy beillesztési ponttal növeli a kártya szélességét, a kártya az űrlap egy további 1/12-ed részére terjed ki.

   

3. Ismételje meg az előző lépést a Order status (Rendelési állapot) és Customer purchase order reference (Vevői megrendelési hivatkozás) kártyákon.

   

4. Méretezze át a kártyák Név és Leírás elemét hat oszlopra (vagy az űrlap felére).

5. A szállítási cím első két sorát terjessze ki az űrlap teljes szélességére:

Készen van. Az általunk kívánt űrlapon az oszlopok különböző számú sorra keverednek:

A kártya vezérlőinek kezelése

A szállítási cím több adatból áll, amelyeket szeretnénk vizuálisan egy csoportba rendezni a felhasználó számára. Az egyes mezők a saját adatkártyájukban maradnak, de módosíthatjuk a kártyán belül a vezérlőket, hogy azok jobban illeszkedjenek egymáshoz.

1. Válassza ki a First line of Delivery address (Kézbesítési cím első sora) kártyát, válassza ki a címkét a kártyán belül, majd törölje a szöveg első három szavát.

   

2. Válassza ki a Second line of Delivery address (Kézbesítési cím második sora) kártyát, válassza ki a címkét a kártyán belül, majd törölje a teljes szöveget.

   Csábító lehetőség, hogy eltávolíthatjuk a címkevezérlőt, és számos esetben ez jól működhet. Azonban képletek függhetnek attól, hogy megtalálható-e az adott vezérlő. A biztonságosabb megoldás, ha eltávolítjuk a szöveget, vagy false (hamis) értékre állítjuk a vezérlőelem Visible (Látható) tulajdonságát.

   

3. Ugyanezen kártyán helyezze a beviteli mezőt a címkére a cím első és második sora közötti térköz csökkentése érdekében.

   A kártya magassága zsugorodik, amikor annak tartalma kevesebb helyet foglal el.

   

Most térjünk át a cím harmadik sorára. Hasonlóan ahhoz, amit előbb csináltunk, most rövidítsük le minden címke szövegét ezeken a kártyákon, és a bemeneti szövegmezőt rendezzük a jobb oldalra minden címkén. A lépések a State (Állam) kártya esetén a következők:

Lépés	Ismertetés	Eredmény
1	Kiválasztva a State (Állam) kártyát, körülötte fogópontok jelennek meg.
2	A kártyán belüli címkét kiválasztva, körülötte fogópontok jelennek meg.
3	Vigye a kurzort a szöveg jobb oldalára, és törölje annak nem szükséges részét.
4	Az oldalsó fogópontok segítségével méretezze a címke vezérlőjét az új szövegmérethez.
5	Válassza ki a bemeneti vezérlőelemet a kártyán belül.
6	Az oldalsó fogópontok használatával állítsa be a bemeneti vezérlőelem kívánt méretét.
7	A bemeneti szövegmezőt húzza a címke vezérlőtől felfelé és jobbra, majd engedje fel az egérgombot.
Ezzel elkészült a State (Állam) kártya módosításaival.

A teljes harmadik címsorra vonatkozó eredmény:

Számos kártya dinamikus képletekből kiinduló tulajdonságokkal rendelkezik. Például az általunk a fentiekben átméretezett és áthelyezett szövegbeviteli vezérlőelem Width (Szélesség) tulajdonsága a szülővezérlő szélességén alapszik. Ha áthelyezi vagy átméretezi a vezérlőt, ezeket a dinamikus képleteket statikus értékekkel helyettesíti. A szerkesztőléc segítségével visszaállíthatja a dinamikus képleteket.

Oszlopokhoz illesztés kikapcsolása

Néha szüksége lehet finomabb szabályozásra, mint amit a szokásos 12 oszlop biztosíthat. Ezekben az esetekben kikapcsolhatja az oszlopokhoz illesztést, majd helyezze el manuálisan a kártyákat. Az űrlap 12 oszlopra való illesztéssel folytatódik, de az átméretezés vagy áthelyezés elkezdése után az Alt vagy a Ctrl + Shift billentyű lenyomva tartása mellett felülbírálhatja az illesztési pontokat. További információkért lásd: alternatív viselkedés billentyűparancsai.

A példánkban a harmadik sorban az cím mind a négy összetevőjének azonos a szélessége. Azonban ez nem a lehetséges legjobb elrendezés, mivel a városnév hosszabb, mint az állam rövidítése, és az országok és régiók bemeneti szövegmezője rövid a címke hossza miatt. Ezen terület optimalizálása érdekében kapcsolja ki az oszlopokhoz illesztést a jobb oldali ablaktáblában, majd nyomja le az Alt vagy Ctrl+Shift billentyűket a kártyák méretezésének és elhelyezésének megkezdését követpen.

A gondos elhelyezés után az eredmény minden mező megfelelő mérete, egyenletes vízszintes térközzel a mezők között:

Összefoglalva, mik a különbségek az Oszlopokhoz illesztés engedélyezése és annak kikapcsolása között?

Beállított szélesség és magasság

Az űrlap elrendezését, mint a Power Appsban mindent, a kártyavezérlők tulajdonságai szabályozzák. A már leírtak szerint a vezérlők különböző helyre húzásával vagy a vezérlők a fogópontok húzásával való átméretezésével a tulajdonságok értékeit módosíthatja. De olyan helyzetek is adódhatnak, amelyekben pontosabban meg szeretné érteni és módosítani ezeket a tulajdonságokat, különösen akkor, ha képleteket tartalmazó dinamikus űrlapokat készít.

Alapszintű elrendezés: X, Y és Width (Szélesség)

Az X és Y tulajdonságok a kártyák pozícióját szabályozzák. Amikor a nyers vásznon vezérlőkkel dolgozunk, ezek a tulajdonságokat egy abszolút helyzetet adnak meg. Az űrlapokon ezen tulajdonságok eltérő jelentéssel rendelkeznek:

• X: Egy soron belüli sorrend.
• Y: A sor száma.

A vásznon levő vezérlőkhöz hasonló a Width (Szélesség) tulajdonság határozza meg a kártya minimális szélességét (erről bővebben később).

Vessen egy pillantást az űrlapon lévő kártyák X, Y, és Width (Szélesség) tulajdonságaira:

Túlcsorduló sorok

Mi történik, ha a sorban a kártyák túl nagyok ahhoz, hogy elférjenek az adott sorban? Általában nem kell foglalkoznia ezzel a lehetőséggel. Az oszlopokhoz illesztés engedélyezésével ezen három tulajdonság automatikusan módosul, hogy minden szépen elférjen túlcsorduló sorok nélkül.

Ha azonban az oszlopokhoz illesztés ki van kapcsolva, vagy képletalapú a Width értéke egy vagy több kártyán, előfordulhatnak túlcsorduló sorok. Ebben az esetben a kártyák automatikusan tördelve lesznek, gyakorlatilag egy újabb sort létrehozva. Például manuálisan módosítsuk a Customer purchase order reference (Vevői beszerzési rendelés hivatkozása) kártya (első sorának, harmadik elem) Width (Szélesség) tulajdonságát az 500 értékre:

A három kártya a felső sorban már nem fér el vízszintesen, és egy új sor létrehozásával át lett tördelve a túlcsorduló sor. Az Y koordináta az összes kártyán továbbra is 0, és a kártyák neve és leírása továbbra is 1 értékű Y tulajdonsággal bír. A különböző Y értékekkel rendelkező kártyák nem lesznek egyesítve a sorok között.

Használhatja ezt a viselkedést egy teljes mértékben dinamikus elrendezés létrehozására, ahol a kártyák elhelyezése egy mélységi (Z) sorrend alapján történik, a lehetséges legnagyobb kitöltéssel, mielőtt a következő sorba helyeződne át. A hatás eléréséhez adjon a kártyákhoz azonos Y értékét, és használja az X értéket a kártyák rendezéséhez.

Területek kitöltéséhez: WidthFit

Az utolsó példában a túlcsordulás létrehozott egy területet az Order status (Rendelésállapot) kártyán, amely az első sorban a második kártya volt. Manuálisan is módosíthatná a Width (Szélesség) tulajdonságot a két fennmaradó kártyán, hogy kitöltse ezt a helyet, de ez a módszer felesleges vesződséggel jár.

Alternatív megoldásként használja a WidthFit tulajdonságot. Ha ezen tulajdonság értéke true (igaz) egy sorban lévő egy vagy több kártya esetén, a sorból fennmaradó hely egyenletesen lesz elosztva közöttük. Ez a viselkedés az, amiért korábban említettük, hogy a kártya Width (Szélesség) tulajdonsága egy minimális érték, és a látható kártya szélesebb lehet. Ez a tulajdonság sosem okozza a kártya szélességének csökkenését, csak kiterjesztését.

Ha az Order status (Rendelésállapot) kártya WidthFit tulajdonsága true (igaz) értékre van állítva, a kártya kitölti a rendelkezésre álló területet, míg az első kártya változatlan marad:

Ha az Order date (Rendelés dátuma) kártyán is true (igaz) értékre állítja a WidthFit tulajdonságot, mindkét kártya egyenletesen ossza fel a rendelkezésre álló területet:

A kártyák fogópontjai a WidthFit által biztosított plusz szélességet veszik figyelembe, nem a Width (Szélesség) tulajdonság által megadott minimális szélességet. Ez összezavarhatja a Width (Szélesség) tulajdonság módosítását, miközben a WidthFit be van kapcsolva; érdemes lehet kikapcsolnia azt, hogy módosításokat végezhessen Width tulajdonságon, majd kapcsolja be újra.

Mikor lehet hasznos a WidthFit? Ha egy mezőt csak bizonyos esetekben használ, false (hamis) értékre állíthatja a Visible (Látható) tulajdonságot, és a sorban a többi kártyák automatikusan kitöltik a körülötte található szabad területet. Előfordulhat, hogy olyan képletet szeretne használni, amely csak akkor jeleníti meg a mezőt, ha egy másik mező adott értékű.

Itt statikus false (hamis) értékre állítjuk az Order status (Rendelésállapot) mező Visible (Látható) tulajdonságát:

A második kártyát gyakorlatilag eltávolítva a harmadik kártya így visszakerülhet ugyanabba a sorba, mint az első kártya. Az első kártya WidthFit beállítása továbbra is true (igaz), így egyedül kitölti a rendelkezésre álló területet.

Mivel az Order status (Rendelésállapot) mező láthatatlan, nem jelölhető ki olyan egyszerűen a vásznon. Azonban bármelyik vezérlőt kiválaszthatja a vezérlők a képernyő bal oldalán található hierarchikus listájában, akár látható, akár nem.

Magasság

A Height (Magasság) tulajdonság az összes kártya magasságát szabályozza. A kártyák rendelkeznek a WidthFit-tel egyenértékű beállítással a Height (Magasság) tulajdonság esetében is, és az mindig true (igaz) értékre van állítva. Tegyük fel, hogy létezik egy HeightFit tulajdonság, de ne keresse a termékben, mert még nincs közzétéve ilyen tulajdonság.

Nem kapcsolhatja ki ezt a viselkedést, így a kártyák magasságának megváltoztatása kihívást jelenthet. Egy soron belül az összes kártya a legmagasabb kártyával egyező magasságúnak tűnik. A sor ehhez hasonló lehet:

Melyik kártya miatt magas a sor? Az előző ábrán a Total amount (Teljes összeg) kártya ki van jelölve, és magas, de a Height (Magasság) tulajdonsága 80 (ugyanaz, mint az első sor magassága). Egy sor magasságának csökkentése érdekében csökkentenie kell a sor legmagasabb kártyájának Height (Magasság) értékét, és nem tudja azonosítani a legmagasabb kártyát minden egyes kártya Height tulajdonságának ellenőrzése nélkül.

AutoHeight

A kártya akkor is lehet a vártnál magasabb, ha olyan vezérlőt tartalmaz, amelynek AutoHeight tulajdonsága true (igaz) értékű. Például sok kártya tartalmaz egy címkét, amely hibaüzenetet jelenít meg, ha a mező értéke érvényesítési hibát okoz.

Megjelenítendő szöveg (hiba) nélkül a címke nulla magasságúra csökken. Ha nem tud róla, nem tudja, hogy ott volt, és ez így helyes:

A képernyő bal oldalán a vezérlők listájában megjelenik az ErrorMessage1 (1. hibaüzenet), ami az általunk használt címkevezérlő. Az alkalmazás frissítésekor kiválaszthatja ezt a vezérlőt, hogy némi magassággal jelenjen meg, és fogópontokkal, amelyekkel elhelyezheti és méretezheti. Az „A” kék mezőben azt jelzi, hogy rendelkezik-e a vezérlő true (igaz) értékű AutoHeight tulajdonsággal:

A vezérlő beállított Text (Szöveg) tulajdonsága Parent.Error, amellyel ellenőrzési szabályok alapján dinamikus hibainformációkhoz juthat. Az illusztráció kedvéért statikusan állítsa be a vezérlő Text tulajdonságát, ami növeli a magasságát (és ennek továbbgyűrűzéseként a kártya magasságát) a szöveg hosszának befogadásához:

Kibővítve a hibaüzenetet a vezérlő és a kártya ismét megnő, hogy elférjen rajta. A teljes sor magassága növekszik, a kártyák közötti függőleges igazítása megőrzése mellett: