Különböző magasságú elemek megjelenítése PowerApps katalógusokbanShow items of different heights in a PowerApps gallery

Ha az adatkészletben szereplő különböző tételek ugyanabban a mezőben különböző mennyiségű adatot tartalmaznak, a több adatot tartalmazó mezők is teljes mértékben megjeleníthetők anélkül, hogy a kevesebb adatot tartalmazó mezőbe üres karaktereket kellene beszúrni.If different items in your data set contain different amounts of data in the same field, you can completely show items that contain more data without adding empty space after items that contain less data. Rugalmas magasságú katalógus hozzáadásával és beállításával:Add and configure a Flexible height gallery control so that you can:

  • olyan Felirat vezérlőket konfigurálhat, melyek a bennük megjelenő tartalomtól függően változtatják méretüket;Configure Label controls to expand or shrink based on their contents.
  • lehetővé válik, hogy az egyes vezérlőelemek közvetlenül a fölöttük szereplő vezérlő alatt helyezkedjenek el.Position each control so that it automatically appears just under the control above it.

Ebben az oktatóanyagban padlóburkolási termékekkel kapcsolatos információkat jelenít majd meg egy Rugalmas magasságú katalógus vezérlőelemben.In this tutorial, you show data about flooring products in a Flexible height gallery control. A termékek képe 5 pixellel az áttekintés alatt fog megjelenni, függetlenül attól, hogy az áttekintő rész öt sornyi szöveget vagy két sornyi szöveget tartalmaz-e.The image of each product appears 5 pixels below the overview, whether the overview contains five lines of text or two lines.

A kész alkalmazás

Ajánlott olvasmánySuggested reading

Ha még soha nem adott hozzá vezérlőelemeket katalógushoz, először kövesse az Elemlista megjelenítése a PowerAppsben című útmutató lépéseit, majd térjen vissza ehhez a témakörhöz.If you've never added controls to a gallery, follow the steps in Show a list of items before you proceed in this topic.

Adatok felvétele üres alkalmazásbaAdd data to a blank app

  1. Töltse le ezt a neveket, áttekintéseket, és padlóburkolási termékek képére mutató hivatkozásokat tartalmazó Excel-fájlt.Download this Excel file, which contains names, overviews, and links to images of flooring products.

    Padlóburkolási termékek

  2. Töltse fel az Excel-fájlt egy felhőbeli tárfiókba, például egy OneDrive-, Dropbox- vagy Google Drive-fiókba.Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.
  3. A PowerApps Studióban kattintson vagy koppintson a Fájl menü Új elemére.In PowerApps Studio, click or tap New on the File menu.
  4. Kattintson vagy koppintson a Telefonos elrendezés elemre az Üres alkalmazás csempén.On the Blank app tile, click or tap Phone layout.

    A Fájl menü Új pontja

  5. Vegyen fel egy kapcsolatot, amely az Excel-fájl FlooringEstimates táblájára mutat.Add a connection to the FlooringEstimates table in the Excel file.

    Ha további információkra van szüksége, tekintse át az Adatkapcsolat hozzáadása PowerAppsben témát.For more information, see Add a connection.

  1. A Beszúrás lapon kattintson vagy koppintson a Katalógus, majd a Rugalmas magasság lehetőségre.On the Insert tab, click or tap Gallery, and then click or tap Flexible height.

    Katalógus hozzáadása

  2. Méretezze át a katalógust úgy, hogy a teljes képernyőt kitöltse.Resize the gallery to take up the entire screen.
  3. Állítsa a katalógus Items (Elemek) tulajdonságát a FlooringEstimates értékre.Set the gallery's Items property to FlooringEstimates.

Terméknevek megjelenítéseShow the product names

  1. A katalógus bal felső sarkában a ceruzát ábrázoló ikonra kattintva vagy koppintva jelölje ki a katalógussablont.In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.

    Ceruza ikon

  2. Miközben a katalógussablont kijelölve hagyja, vegyen fel hozzá egy Felirat vezérlőt.With the gallery template selected, add a Label control to it.
  3. Állítsa a Felirat vezérlő Text (Szöveg) tulajdonságát a következő kifejezésre:Set the Text property of the Label control to this expression:
    ThisItem.Name ThisItem.Name

    Felirat hozzáadása

Termékáttekintések megjelenítéseShow the product overviews

  1. A katalógussablon kijelölve hagyása mellett vegyen fel még egy Felirat vezérlőt, és helyezze azt az előző Felirat vezérlő alá.With the gallery template selected, add another Label control, and move it below the first Label control.
  2. Állítsa a második Felirat vezérlő Text (Szöveg) tulajdonságát a következő kifejezésre:Set the Text property of the second Label control to this expression:
    ThisItem.OverviewThisItem.Overview
  3. A második Felirat vezérlő kijelölve hagyása mellett kattintson a névcímke ikonra a Képernyők panelen, és nevezze át a vezérlőt ÁttekintőSzöveg névre.With the second Label control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.

    Felirat átnevezése

  4. Állítsa át az ÁttekintőSzöveg mező AutoHeight (Automatikus magasság) tulajdonságát true (igaz) értékre.Set the AutoHeight property of the OverviewText box to true.

    Ezzel a lépéssel biztosítható, hogy a mező mérete a tartalomhoz igazodva megnőhessen vagy összemehessen.This step ensures that the box will grow or shrink to fit its contents.

    Automatikusan beállított magasságú szövegmező

Termékképek megjelenítéseShow the product images

  1. Állítsa át a sablon méretét úgy, hogy kétszer olyan magas legyen, mint eddig volt.Resize the template so that it's twice as tall as it was.

    Így sokkal könnyebb vezérlőket felvenni az alkalmazásba, ugyanakkor ez a változtatás nem befolyásolja, hogyan fog kinézni az alkalmazás használat közben.You can add controls to the template more easily as you build the app, and this change won't affect how the app looks when it runs.

  2. A katalógussablont kijelölve hagyva vegyen fel egy Kép vezérlőt, és helyezze az ÁttekintőSzöveg mezője alá.With the gallery template selected, add an Image control, and move it below the OverviewText box.
  3. Állítsa a Kép vezérlőelem Image (Kép) tulajdonságának értékét a következő kifejezésre:Ensure that the Image property of the Image control is set to this expression:
    ThisItem.ImageThisItem.Image
  4. A Kép vezérlőelem Y tulajdonságát állítsa be az ÁttekintőSzöveg elhelyezkedése és mérete alapján, ahogy az alábbi kifejezésben szerepel:Set the Y property of the Image control based on the position and the size of the OverviewText box, as in this expression:
    ÁttekintőSzöveg.Y + ÁttekintőSzöveg.Height + 5OverviewText.Y + OverviewText.Height + 5

    A kész alkalmazás

Ha szeretne további vezérlőket az alkalmazáshoz adni, alkalmazza továbbra is ezt az elvet: minden vezérlő Y tulajdonságát a felette levő vezérlő Y és Height (Magasság) tulajdonságához képest határozza meg.Apply the same concept if you want to add more controls: set each control's Y property based on the Y and Height properties of the control above it.

Következő lépésekNext steps

Tudjon meg többet a katalógus vezérlők és a képletek alkalmazásáról.Learn more about how to work with a gallery control and formulas.