Adatok megjelenítése, rendezése és szűrése egy vászonalkalmazás galériájában

Létrehozhat egy katalógust, amely megjeleníti a termékekre vonatkozó képeket és szövegeket, valamint rendezi és szűri ezt az információt.

A Power Apps-ben a hagyományos termékkatalógusokhoz hasonló katalógus segítségével mutathat be számos, hasonló jellegű elemet. A katalógusok remekül használhatók olyan termékinformációk megjelenítésére, mint a név és az ár. Ebben a témakörben létre fog hozni egy katalógust, majd az Excelhez hasonló funkciók segítségével rendezi és szűri az információkat. Ezenkívül egy elem kijelölésekor szegély jelenik meg körülötte.

Előfeltételek

• Regisztráljon a Power Apps használatára, majd jelentkezzen be ugyanazoknak a hitelesítő adatoknak a használatával, amelyekkel regisztrált.
• Táblagép-alkalmazást létrehozhat sablonból, adatok alapján vagy sablon nélkül.
• Tekintse át a vezérlők konfigurálása témát.
• Ezek a lépések bemeneti adatként a .jpg-képeket tartalmazó CreateFirstApp mintafájlt használják. A zip-fájl egy Excelbe konvertálható XML-fájlt tartalmaz. Egyébként a Power Apps automatikusan olvassa be a .zip-fájlokban található fájlokat, és sikeresen importálja azokat. Letöltheti és használhatja ezeket a mintaadatokat, vagy importálhatja a saját adatait.

Adatok megjelenítése katalógusban

1. Hozzon létre egy Inventory (Leltár) nevű gyűjteményt a mintaadatok alapján. Lépések:

   1. A Beszúrás lapon kattintson a Vezérlők, majd az Importálás elemre:

      

   2. Az importvezérlő OnSelect tulajdonságát állítsa be a következő képletre:
      Collect(Inventory, Import1.Data)

      

   3. Az Import Data (Adatimportálás) gombra kattintva nyissa meg a Windows Explorert. Válassza ki a CreateFirstApp.zip fájlt, majd kattintson az Open (Megnyitás) elemre.

   4. A Fájl menüben válassza a Gyűjtemények elemet. Az Inventory (Leltár) gyűjteményben megtalálja az importált adatok listáját:

      

      Létrehozta az Inventory (Leltár) gyűjteményt, amely öt termékről tartalmaz információkat, köztük a képet, a termék nevét és a készleten lévő darabok számát.

      Megjegyzés

      Az importálási vezérlő segítségével Excel-adatokhoz hasonló adatokat importálhat, és létrehozhatja a katalógust. Az importálási vezérlő adatokat importál az alkalmazás létrehozása és előzetes megtekintése során. Az alkalmazás közzététele során az importálási vezérlő jelenleg nem importál adatokat.

2. A visszafelé mutató nyílra kattintva térjen vissza a tervezőhöz.

3. Az Insert (Beszúrás) lapon kattintson vagy koppintson a Gallery (Katalógus) elemre, majd a Horizontal (Vízszintes) katalógusra.

   

4. A jobb oldali ablaktáblán kattintson vagy koppintson arra a változatra, ahol a cím és az alcím átfedi a képet:

   

5. A katalógus Items (Elemek) tulajdonságát állítsa be az Inventory (Leltár) lehetőségre:

   

6. Nevezze át a katalógust ProductGallery-ra, majd helyezze át a katalógust, hogy ne akadályozza a többi vezérlőt. Méretezze át a katalógust úgy, hogy három terméket jelenítsen meg:

   

7. A katalógus első elemén kattintson az alsó feliratra:

   

   Megjegyzés

   Bármely katalógus első elemének megváltoztatása automatikusan megváltoztatja az összes többi elemet is.

8. Állítsa a felirat Text (Szöveg) tulajdonságát a következő kifejezésre:
   ThisItem.UnitsInStock
   

   A művelet után a felirat minden termékből megmutatja a rendelkezésre álló készletet:

A fenti lépésekkel .jpg-képeket tartalmazó adatokat importált egy gyűjteménybe. Felvett egy katalógust, amely megjeleníti az adatokat, és konfigurált egy feliratot, amely minden termékből megmutatja a készleten lévő darabok számát.

A választott elem kiemelése a katalógusban

1. Válasszon ki egy elemet a katalógusban, kivéve az elsőt. Ekkor megjelenik a szerkesztés ikon (a bal felső sarokban). Kattintson a szerkesztés ikonra:
   

2. Az Insert (Beillesztés) lapon kattintson a Shapes (Alakzatok) elemre, majd válassza ki a négyszöget. Ekkor a katalógus minden eleménél egy kék színű, kitöltött négyszög jelenik meg.

3. AHome lapon kattintson a Fill (Kitöltés), majd a No Fill (Nincs kitöltés) elemre.

4. Kattintson a Border (Szegély), majd a Border Style (Szegély stílusa) elemre, és válassza a folytonos vonalat.

5. Kattintson ismét a Border (Szegély) elemre, és a vastagságot állítsa a 3. értékre. Méretezze át úgy a négyszöget, hogy bekeretezze a katalógus adott elemét. A katalógusban szereplő elemek most kék szegéllyel jelennek meg, az alábbi ábrához hasonló módon:
   

6. A Shape (Alakzat) lapon kattintson a Visible (Látható) elemre, majd írja be a képletsávba az alábbi képletet:

   If(ThisItem.IsSelected, true)

   A katalógusban a kijelölt részt kék négyszög szegélyezi. Jelöljön ki néhány elemet a katalógusban, és győződjön meg róla, hogy a négyszög minden kijelölt elem körül megjelenik. Ne feledje, hogy az Előnézetet is megnyithatja, hogy láthassa és tesztelhesse, amit létrehoz.

Az iménti lépésekkel szegélyt hozott létre a kijelölt katalógusbeli elem körül.

Katalógusbeli elemek rendszerezése és szűrése

A következő lépésekben emelkedő és csökkenő sorba rendezheti a katalógus elemeit. Továbbá felvehet egy csúszkát a katalógus elemeinek „szűréséhez” a választott elem készleten lévő darabszáma szerint.

Emelkedő vagy csökkenő sorba rendezés

1. Válasszon ki egy elemet a katalógusban, kivéve az elsőt.

2. Az Items (Elemek) tulajdonság jelenleg az Inventory (Leltár) értékre van beállítva (ez a gyűjtemény neve). Változtassa meg a következőre:

   Sort(Inventory, ProductName)

   Ekkor a galériában lévő elemek a termék neve szerint növekvő sorrendbe kerülnek rendezésre:

   Próbálja ki a csökkenő sorrendet is. Állítsa a katalógus Items (Elemek) tulajdonságát a következő képletre:

   Sort(Inventory, ProductName, Descending)

Csúszka vezérlő és szűrő elemek felvétele a katalógusban

1. Vegyen fel egy csúszka vezérlőt (Insert tab > Controls), nevezze át StockFilter névre, majd helyezze a katalógus alá.

2. Konfigurálja a csúszkát úgy, hogy a felhasználók ne állíthassák a készleten lévő darabszámon kívüli értékre:

   1. A Content (Tartalom) lapon kattintson a Min elemre, és írja be a következő kifejezést:
      Min(Inventory, UnitsInStock)
   2. A Content (Tartalom) lapon kattintson a Max elemre, és írja be a következő kifejezést:
      Max(Inventory, UnitsInStock)

3. Válasszon ki egy elemet a katalógusban, kivéve az elsőt. Állítsa a katalógus Items (Elemek) tulajdonságát a következő kifejezésre:
   Filter(Inventory, UnitsInStock<=StockFilter.Value)

4. Az előnézetben állítsa a csúszkát egy tetszőleges helyre a katalógusban lévő legalacsonyabb és legmagasabb érték között. A csúszka beállítása után a katalógus csak azokat a termékeket tünteti fel, amelyek darabszáma alacsonyabb a választott értéknél:
   

Most adja hozzá a szűrőt:

1. Lépjen vissza a tervezőbe.
2. Az Insert (Beszúrás) lapon, válassza ki a Text (Szöveg) elemet, majd kattintson az Input Text (Szövegbevitel) lehetőségre, és nevezze át az új vezérlőt NameFilterre (Szűrő neve). Helyezze a szöveg vezérlőelemét a csúszka alá.
3. Állítsa a katalógus Items (Elemek) tulajdonságát a következő kifejezésre:
   Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
4. Az előnézetben állítsa a csúszkát 30-ra, majd írja be a g betűt a szövegbeviteli vezérlőbe. A katalógus megjeleníti az egyetlen olyan terméket, amelyből 30-nál kevesebb van készleten, és „g” betűvel kezdődik a neve:
   

Tippek és trükkök

• Bármikor kiválaszthatja az előnézet gombot (), hogy megtekinthesse, amit elkészített, és letesztelhesse azt.
• Amikor alkalmazást tervez, újraméretezheti és kattintással-húzással áthelyezheti a vezérlőelemeket.
• Az előnézeti ablak bezárásához nyomja le az ESC vagy az X billentyűt.
• A katalógus használata során a katalógus összes elemének megváltoztatásához jelölje ki az első elemet. Például ahhoz, hogy a katalógusban található összes elemhez szegélyt adjon, az első elemet kell kijelölnie.
• A katalógus tulajdonságainak frissítéséhez bármely elemet kijelölhet, kivéve a katalógus első elemét. Például jelölje ki a második elemet az Items (Elemek), a ShowScrollbar és egyéb tulajdonságok frissítéséhez, amelyek a katalógusra (és nem a katalógus elemeire) vonatkoznak.

Megszerzett tudás

Ebben a témakörben a következő műveleteket hajtotta végre:

• Létrehozott egy gyűjteményt, amelybe .jpg-képeket tartalmazó adatokat importált, majd megjelenítette azokat egy katalógusban.
• A katalógusban szereplő minden kép alatt feliratot helyezett el, amelyet úgy konfigurált, hogy feltüntesse az adott termék készleten lévő darabszámát.
• Szegélyt adott hozzá az éppen kijelölt elemekhez.
• A termék neve szerint növekvő és csökkenő sorba rendezte az elemeket.
• Felvett egy csúszkát és egy szövegbeviteli vezérlőt, amellyel a készleten lévő darabszám alapján lehet szűrni a termékeket.