Képek rendezése és szűrése PowerApps-katalógusbanShow, sort, and filter data in a PowerApps gallery

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.Create a gallery to show images and text about several products, and sort and filter that information.

A PowerApps-ben a hagyományos termékkatalógusokhoz hasonló katalógus segítségével mutathat be számos, hasonló jellegű elemet.In PowerApps, you can use a gallery to show several related items, just as you see in a catalog. A katalógusok remekül használhatók olyan termékinformációk megjelenítésére, mint a név és az ár.Galleries are great for showing information about products, such as names and prices. 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.In this topic, we create a gallery and sort and filter the information using Excel-like functions. Ezenkívül egy elem kijelölésekor szegély jelenik meg körülötte.Also, when an item is selected, a border is placed around the item.

Megjegyzés

Ez a témakör táblagép-alkalmazást használ.This topic uses a tablet app. Telefonos alkalmazást is használhat, de ebben az esetben át kell méretezni egyes vezérlőelemeket.You can use a phone app but you will need to resize some of the controls.

ElőfeltételekPrerequisites

  • Regisztráció a PowerApps szolgáltatásra, és a PowerApps telepítése.Sign up for PowerApps and install PowerApps. A PowerApps megnyitásakor a regisztráció során használt hitelesítő adatokkal jelentkezzen be.When you open PowerApps, sign-in using the same credentials that you used to sign up.
  • Táblagép-alkalmazást létrehozhat sablonból, adatok alapján vagy sablon nélkül.Create a tablet app from a template, from data, or from scratch.
  • Ismerje meg a vezérlők konfigurálását.Learn how to configure a control.
  • Ezek a lépések bemeneti adatként a .jpg-képeket tartalmazó CreateFirstApp mintafájlt használják.These steps use the CreateFirstApp as sample input data, which includes .jpg images. A zip-fájl egy Excelbe konvertálható XML-fájlt tartalmaz.The zip file includes an XML file that can be converted to Excel. Egyébként a PowerApps automatikusan olvassa be a .zip-fájlokban található fájlokat, és sikeresen importálja azokat.Otherwise, PowerApps automatically reads the files in the .zip files and imports it successfully. Letöltheti és használhatja ezeket a mintaadatokat, vagy importálhatja a saját adatait.You can download and use this sample data, or import your own.
  1. Hozzon létre egy Inventory (Leltár) nevű gyűjteményt a mintaadatok alapján.Create a collection named Inventory using the sample data. Lépések:Steps include:

    1. A Beszúrás lapon kattintson a Vezérlők, majd az Import elemre:On the Insert tab, select Controls, and then select Import:

    2. Az importvezérlő OnSelect tulajdonságát állítsa be a következő képletre:Set the OnSelect property of the import control to the following formula:
      Collect(Inventory, Import1!Data)Collect(Inventory, Import1!Data)

    3. Az Import Data (Adatimportálás) gombra kattintva nyissa meg a Windows Explorert.Select the Import Data button to open Windows Explorer. Válassza ki a CreateFirstApp.zip fájlt, majd kattintson az Open (Megnyitás) elemre.Select CreateFirstApp.zip, and select Open.
    4. A Fájl menüben válassza ki a Collections (Gyűjtemények) elemet.In the File menu, select Collections. Az Inventory (Leltár) gyűjteményben megtalálja az importált adatok listáját:The Inventory collection is listed with the data you imported:

      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.You've just created the Inventory collection, which contains information about five products, including a design image, the name of the product, and the number of units in stock.

      Megjegyzés

      Az importálási vezérlő segítségével Excel-adatokhoz hasonló adatokat importálhat, és létrehozhatja a katalógust.The import control is used to import Excel-like data and create the collection. Az importálási vezérlő adatokat importál az alkalmazás létrehozása és előzetes megtekintése során.The import control imports data when you are creating your app, and previewing your app. Az alkalmazás közzététele során az importálási vezérlő jelenleg nem importál adatokat.Currently, the import control does not import data when you publish your app.

  2. A visszafelé mutató nyílra kattintva térjen vissza a tervezőhöz.Select the back arrow to return to the designer.
  3. Az Insert (Beszúrás) lapon kattintson vagy koppintson a Gallery (Katalógus) elemre, majd a Horizontal (Vízszintes) katalógusra.On the Insert tab, click or tap Gallery, and then click or tap the Horizontal gallery.

  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:In the right-hand pane, click or tap the option in which the title and the subtitle overlay the graphic:

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

  6. Nevezze át a katalógust ProductGallery-ra, majd helyezze át a katalógust, hogy ne akadályozza a többi vezérlőt.Rename the gallery to ProductGallery, and move the gallery so it doesn't block the other controls. Méretezze át a katalógust úgy, hogy három terméket jelenítsen meg:Resize the gallery so it shows three products:

  7. A katalógus első elemén kattintson az alsó feliratra:In the first item of the gallery, select the bottom label:

    Megjegyzés

    Bármely katalógus első elemének megváltoztatása automatikusan megváltoztatja az összes többi elemet is.When you change the first item in any gallery, you automatically change all other items in the gallery.

  8. Állítsa a felirat Text (Szöveg) tulajdonságát a következő kifejezésre:Set the Text property of the label to the following expression:
    ThisItem!UnitsInStockThisItem!UnitsInStock

    A művelet után a felirat minden termékből megmutatja a rendelkezésre álló készletet:When you do this, the label shows the units in stock for each product:

Megjegyzés

Alapértelmezés szerint a felső felirat Text (Szöveg) tulajdonsága: ThisItem!ProductName.By default, the Text property of the top label is set to ThisItem!ProductName. Ezt a katalógusban szereplő bármely elem esetén megváltoztathatja.You can change it to any other item in your collection. Például, ha a katalógus tartalmazza a ProductDescription (Termékleírás) vagy a Price (Ár) elemet, a feliratot a ThisItem!ProductDescription vagy a ThisItem!Price értékre módosíthatja.For example, if your collection has ProductDescription or Price fields, you can set the label to ThisItem!ProductDescription or ThisItem!Price.

A fenti lépésekkel .jpg-képeket tartalmazó adatokat importált egy gyűjteménybe.Using these steps, you imported data that includes .jpg images into a collection. 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.You then added a gallery that displays the data and configured a label to show the units in stock for each product.

  1. Válasszon ki egy elemet a katalógusban, kivéve az elsőt.Select any item in the gallery except the first one. Ekkor megjelenik a szerkesztés ikon (a bal felső sarokban).The edit icon displays (upper left corner). Kattintson a szerkesztés ikonra:Select the edit icon:
  2. Az Insert (Beillesztés) lapon kattintson a Shapes (Alakzatok) elemre, majd válassza ki a négyszöget.On the Insert tab, select Shapes, and then select the rectangle. Ekkor a katalógus minden eleménél egy kék színű, kitöltött négyszög jelenik meg.A blue solid rectangle appears in each gallery item.
  3. AHome lapon kattintson a Fill (Kitöltés), majd a No Fill (Nincs kitöltés) elemre.On the Home tab, select Fill, and then select No Fill.
  4. Kattintson a Border (Szegély), majd a Border Style (Szegély stílusa) elemre, és válassza a folytonos vonalat.Select Border, select Border Style, and then select the solid line.
  5. Kattintson ismét a Border (Szegély) elemre, és a vastagságot állítsa a 3. értékre.Select Border again, and set the thickness to 3. Méretezze át úgy a négyszöget, hogy bekeretezze a katalógus adott elemét.Resize the rectangle so that it surrounds the gallery item. A katalógusban szereplő elemek most kék szegéllyel jelennek meg, az alábbi ábrához hasonló módon:The items in your gallery now have a blue border and should look similar to the following:
  6. A Shape (Alakzat) lapon kattintson a Visible (Látható) elemre, majd írja be a képletsávba az alábbi képletet:On the Shape tab, select Visible, and then enter the following formula in the Formula Bar:

    If(ThisItem!IsSelected, true)If(ThisItem!IsSelected, true)

    A katalógusban a kijelölt részt kék négyszög szegélyezi.A blue rectangle surrounds the current selection in a gallery. 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.Select a few gallery items to confirm that the rectangle appears around each item that you select. Ne feledje, hogy az előnézetet is megnyithatja a folyamatban lévő munka megtekintéséhez.Remember, you can also open Preview to see and test what you're creating.

Tipp

Válassza ki a négyszöget, kattintson a Home lapon található Reorder (Átrendezés) elemre, majd kattintson a Send to Back (Hátraküldés) elemre.Select the rectangle, select Reorder on the Home tab, and then select Send to Back. Ezzel a funkcióval úgy is kijelölheti a katalógus egy elemét, hogy nem kerül köré az esetleg akadályt okozó szegély.Using this feature, you can select a gallery item without the border blocking anything.

Az iménti lépésekkel szegélyt hozott létre a kijelölt katalógusbeli elem körül.Using these steps, you added a border around the current selection in the gallery.

A következő lépésekben emelkedő és csökkenő sorba rendezheti a katalógus elemeit.In these steps, we are going to sort the gallery items in ascending and descending order. 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.Also, we'll add a slider control to 'filter' gallery items by the units in stock that you choose.

Emelkedő vagy csökkenő sorba rendezésSort in ascending or descending order

  1. Válasszon ki egy elemet a katalógusban, kivéve az elsőt.Select any item in the gallery except the first one.
  2. Az Items (Elemek) tulajdonság jelenleg az Inventory (Leltár) értékre van beállítva (ez a gyűjtemény neve).The Items property is currently set to Inventory (the name of your collection). Változtassa meg a következőre:Change it to the following:

    Sort(Inventory, ProductName)Sort(Inventory, ProductName)

    Ez a művelet a katalógus elemeit terméknév szerint növekvő sorba rendezi: When you do this, the items in the gallery are sorted by the product name in ascending order:

    Próbálja ki a csökkenő sorrendet is.Try descending order. Állítsa a katalógus Items (Elemek) tulajdonságát a következő képletre:Set the Items property of the gallery to the following formula:

    Sort(Inventory, ProductName, Descending)Sort(Inventory, ProductName, Descending)

  1. Vegyen fel egy csúszka vezérlőt (Insert tab > Controls), nevezze át StockFilter névre, majd helyezze a katalógus alá.Add a Slider control (Insert tab > Controls), rename it to StockFilter, and move it under the gallery.
  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:Configure the slider so that users can't set it to a value outside the range of units in stock:

    1. A Content (Tartalom) lapon kattintson a Min elemre, és írja be a következő kifejezést:On the Content tab, select Min, and then enter the following expression:
      Min(Inventory, UnitsInStock)
    2. A Content (Tartalom) lapon kattintson a Max elemre, és írja be a következő kifejezést:On the Content tab, select Max, and then enter the following expression:
      Max(Inventory, UnitsInStock)
  3. Válasszon ki egy elemet a katalógusban, kivéve az elsőt.Select any item in the gallery except the first one. Állítsa a katalógus Items (Elemek) tulajdonságát a következő kifejezésre:Set the Items property of the gallery to the following expression:
    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.In Preview, adjust the slider to a value that's between the highest and the lowest quantity in the gallery. 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:As you adjust the slider, the gallery shows only those products that are less than the value you choose:

Most adja hozzá a szűrőt:Now, let's add to our filter:

  1. Lépjen vissza a tervezőbe.Go back to the designer.
  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).On the Insert tab, select Text, select Input Text, and rename the new control to NameFilter. Helyezze a szöveg vezérlőelemét a csúszka alá.Move the text control below the slider.
  3. Állítsa a katalógus Items (Elemek) tulajdonságát a következő kifejezésre:Set the Items property of the gallery to the following expression:
    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.In Preview, set the slider to 30, and type the letter g in the text-input control. 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:The gallery shows the only product with less than 30 units in stock and has a name with the letter "g":

tippek és trükkökTips and Tricks

  • Az előnézet gomb () lenyomásával bármikor megtekintheti és tesztelheti a munkáját.At anytime, you can select the preview button () to see what you created and test it.
  • Alkalmazás tervezésekor újraméretezheti és kattintással-húzással áthelyezheti a vezérlőket.When designing your app, you can re-size the controls and move them around using click-and-drag.
  • Az előnézeti ablak bezárásához nyomja le az ESC vagy az X billentyűt.Press ESC or select the X to close the preview window.
  • A katalógus használata során a katalógus összes elemének megváltoztatásához jelölje ki az első elemet.When using a gallery, select the first item in the gallery to change all items in the gallery. Például ahhoz, hogy a katalógusban található összes elemhez szegélyt adjon, az első elemet kell kijelölnie.For example, select the first item to add a border to all items in the gallery.
  • A katalógus tulajdonságainak frissítéséhez bármely elemet kijelölhet, kivéve a katalógus első elemét.To update the properties of the gallery, select any item in the gallery except the first one. 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.For example, select the second item to update the Items, ShowScrollbar, and other properties that apply to the gallery (not the items in the gallery).

Megszerzett tudásWhat you learned

Ebben a témakörben a következő műveleteket hajtotta végre:In this topic, you:

  • Létrehozott egy gyűjteményt, amelybe .jpg-képeket tartalmazó adatokat importált, majd megjelenítette azokat egy katalógusban.Created a collection, imported data that includes .jpg images into that collection, and showed the data in a gallery.
  • 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.Under each image in the gallery, configured a label that lists the units in stock for that item.
  • Szegélyt adott hozzá az éppen kijelölt elemekhez.Added a border around the item that you select.
  • A termék neve szerint növekvő és csökkenő sorba rendezte az elemeket.Sorted the items by product name in ascending and descending order.
  • 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.Added a slider and an input text control to filter the products by units in stock and product name.