Visa objekt med olika höjd i ett PowerApps-galleriShow items of different heights in a PowerApps gallery

Om olika objekt i datauppsättningen innehåller olika mängder data i samma fält, kan du visa objekt som innehåller mer data utan att lägga till ett tomt utrymme efter objekt som innehåller mindre data.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. Lägg till och konfigurera en gallerikontroll för Flexibel höjd så att du kan:Add and configure a Flexible height gallery control so that you can:

  • Konfigurera etiketter för att öka eller minska baserat på deras innehåll.Configure Label controls to expand or shrink based on their contents.
  • Placera varje kontroll så att den automatiskt visas under kontrollen som ligger ovanför.Position each control so that it automatically appears just under the control above it.

I den här självstudien visas data om golvläggningsprodukter i en gallerikontroll för Flexibel höjd.In this tutorial, you show data about flooring products in a Flexible height gallery control. Bilden av varje produkt visas 5 bildpunkter under översikten, oavsett om den innehåller fem rader eller två rader med text.The image of each product appears 5 pixels below the overview, whether the overview contains five lines of text or two lines.

Appen är klar

Förslag på läsningSuggested reading

Om du aldrig har lagt till kontroller i ett galleri, följer du stegen i Visa en lista med objekt innan du fortsätter i det här avsnittet.If you've never added controls to a gallery, follow the steps in Show a list of items before you proceed in this topic.

Lägga till data i en tom appAdd data to a blank app

  1. Hämta den här Excel-filen som innehåller namn, översikter och länkar till bilder av golvläggningsprodukter.Download this Excel file, which contains names, overviews, and links to images of flooring products.

    Golvläggningsprodukter

  2. Ladda upp Excel-filen till ett molnlagringskonto, till exempel OneDrive, Dropbox eller Google Drive.Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.
  3. I PowerApps Studio klickar eller trycker du på Nytt i menyn Arkiv.In PowerApps Studio, click or tap New on the File menu.
  4. På panelen Tom app klickar du på eller trycker på Layout för mobil.On the Blank app tile, click or tap Phone layout.

    Nytt alternativ på menyn Arkiv

  5. Lägg till en anslutning till tabellen FlooringEstimates i Excel-filen.Add a connection to the FlooringEstimates table in the Excel file.

    Du hittar mer information i Lägg till en anslutning.For more information, see Add a connection.

  1. Klicka eller tryck på Galleri på fliken Infoga och klicka eller tryck sedan på galleriet Flexibel höjd.On the Insert tab, click or tap Gallery, and then click or tap Flexible height.

    Lägg till galleri

  2. Ändra storlek på galleriet så att det fyller hela skärmen.Resize the gallery to take up the entire screen.
  3. Ställ in galleriets egenskap för Objekt till FlooringEstimates.Set the gallery's Items property to FlooringEstimates.

Visa produktnamnenShow the product names

  1. Klicka eller tryck på pennikonen i det övre vänstra hörnet i galleriet för att välja gallerimallen.In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.

    Pennikon

  2. När du har valt gallerimall lägger du till en etikettkontroll.With the gallery template selected, add a Label control to it.
  3. Ställ in egenskapen Text i etikettkontrollen med följande uttryck:Set the Text property of the Label control to this expression:
    ThisItem.Name ThisItem.Name

    Lägg till etikett

Visa produktöversikternaShow the product overviews

  1. När du har valt gallerimall, lägger du till en annan etikettkontroll och placerar den under den första etikettkontrollen.With the gallery template selected, add another Label control, and move it below the first Label control.
  2. Ställ in egenskapen Text i den andra etikettkontrollen med följande uttryck:Set the Text property of the second Label control to this expression:
    ThisItem.OverviewThisItem.Overview
  3. När den andra etikettkontrollen är markerad, klickar eller trycker du på namnetikettsikonen på fliken Innehåll och byter namn på kontrollen till OverviewText.With the second Label control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.

    Byt namn på etikett

  4. Ange egenskapen AutoHeight för rutan OverviewText till true.Set the AutoHeight property of the OverviewText box to true.

    Det här steget säkerställer att rutan kommer att öka eller minskas så att innehållet får plats.This step ensures that the box will grow or shrink to fit its contents.

    Automatisk höjd på texten

Visa produktbildernaShow the product images

  1. Ändra storlek på mallen så att den blir dubbelt så hög.Resize the template so that it's twice as tall as it was.

    Det blir enklare att lägga till kontroller i mallen när du skapar appen och den här ändringen påverkar inte utseendet på appen när den körs.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. När du har valt gallerimall, lägger du till en bildkontroll och placerar den under rutan OverviewText.With the gallery template selected, add an Image control, and move it below the OverviewText box.
  3. Kontrollera att bildegenskapen för bildkontrollen har angetts med det här uttrycket:Ensure that the Image property of the Image control is set to this expression:
    ThisItem.ImageThisItem.Image
  4. Ange Y-egenskapen för bildkontrollen baserat på positionen och storleken på rutan OverviewText, som i det här uttrycket:Set the Y property of the Image control based on the position and the size of the OverviewText box, as in this expression:
    OverviewText.Y + OverviewText.Height + 5OverviewText.Y + OverviewText.Height + 5

    Appen är klar

Tillämpa samma metod om du vill lägga till fler kontroller: Ange varje kontrolls Y-egenskap baserat på egenskaperna Y och Höjd i kontrollen ovanför.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.

Nästa stegNext steps

Läs mer om hur du arbetar med en gallerikontroll och formler.Learn more about how to work with a gallery control and formulas.