Vis, sortér og filtrer data i et PowerApps-galleriShow, sort, and filter data in a PowerApps gallery

Opret et galleri for at vise billeder og tekst om flere produkter, og sortér og filtrer disse oplysninger.Create a gallery to show images and text about several products, and sort and filter that information.

I PowerApps kan du bruge et galleri til at vise flere relaterede varer på samme måde som i et katalog.In PowerApps, you can use a gallery to show several related items, just as you see in a catalog. Gallerierne er velegnede til at vise oplysninger om produkter, f.eks. navne og priser.Galleries are great for showing information about products, such as names and prices. I dette emne opretter vi et galleri og sorterer og filtrerer oplysningerne ved hjælp af Excel-lignende funktioner.In this topic, we create a gallery and sort and filter the information using Excel-like functions. Og når en vare er markeret, anbringes der en ramme rundt om varen.Also, when an item is selected, a border is placed around the item.

Bemærk

I dette emne bruges der en tabletapp.This topic uses a tablet app. Du kan også bruge en telefonapp, men så skal du ændre størrelsen på nogle af kontrolelementerne.You can use a phone app but you will need to resize some of the controls.

ForudsætningerPrerequisites

  • Tilmeld dig PowerApps, og installér PowerApps.Sign up for PowerApps and install PowerApps. Når du åbner PowerApps, skal du logge på med de samme legitimationsoplysninger som dem, du brugte til at tilmelde dig.When you open PowerApps, sign-in using the same credentials that you used to sign up.
  • Opret en tabletapp ud fra en skabelon, ud fra data eller fra bunden.Create a tablet app from a template, from data, or from scratch.
  • Få mere at vide om, hvordan du konfigurerer et kontrolelement.Learn how to configure a control.
  • I disse trin bruges CreateFirstApp som eksempeldata, og de indeholder .jpg-billeder.These steps use the CreateFirstApp as sample input data, which includes .jpg images. Zip-filen indeholder en XML-fil, der kan konverteres til Excel.The zip file includes an XML file that can be converted to Excel. Ellers læser PowerApps automatisk filerne i .zip-filerne og importerer dem.Otherwise, PowerApps automatically reads the files in the .zip files and imports it successfully. Du kan downloade og bruge disse eksempeldata eller importere dine egne.You can download and use this sample data, or import your own.
  1. Opret en samling kaldet Inventory (Lager) ved hjælp af eksempeldataene.Create a collection named Inventory using the sample data. Trinnene omfatter:Steps include:

    1. Vælg Controls (Kontrolelementer) i menuen Insert (Indsæt), og vælg derefter Import (Importér):On the Insert tab, select Controls, and then select Import:

    2. Angiv egenskaben OnSelect for importkontrolelementet til denne formel:Set the OnSelect property of the import control to the following formula:
      Collect(Inventory, Import1!Data)Collect(Inventory, Import1!Data)

    3. Vælg knappen Import Data (Importér data) for at åbne Windows Stifinder.Select the Import Data button to open Windows Explorer. Vælg CreateFirstApp.zip, og vælg Open (Åbn).Select CreateFirstApp.zip, and select Open.
    4. Vælg Collections (Samlinger) i menuen File (Filer).In the File menu, select Collections. Samlingen Inventory (Lager) vises med de data, du har importeret:The Inventory collection is listed with the data you imported:

      Du har netop oprettet samlingen Inventory (Lager), der indeholder oplysninger om fem produkter, herunder et billede af designet, navnet på produktet og antallet af enheder på lager.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.

      Bemærk

      Importkontrolelementet bruges til at importere Excel-lignende data og oprette samlingen.The import control is used to import Excel-like data and create the collection. Importkontrolelementet importerer data, når du opretter din app og får vist din app.The import control imports data when you are creating your app, and previewing your app. I øjeblikket importerer importkontrolelementet ikke data, når du publicerer din app.Currently, the import control does not import data when you publish your app.

  2. Vælg Pil tilbage for at vende tilbage til designeren.Select the back arrow to return to the designer.
  3. Klik eller tryk på Gallery (Galleri) under fanen Insert (Indsæt), og klik eller tryk derefter på galleriet Horizontal (Vandret).On the Insert tab, click or tap Gallery, and then click or tap the Horizontal gallery.

  4. I højre rude skal du klikke eller trykke på den indstilling, hvor titlen og undertitlen overlejrer grafikken:In the right-hand pane, click or tap the option in which the title and the subtitle overlay the graphic:

  5. Angiv egenskaben Items (Varer) for galleriet til Inventory (Lager):Set the Items property of the gallery to Inventory:

  6. Omdøb galleriet til ProductGallery (Produktgalleri), og flyt galleriet, så det ikke blokerer for de andre kontrolelementer.Rename the gallery to ProductGallery, and move the gallery so it doesn't block the other controls. Skift størrelsen på galleriet, så det viser tre produkter:Resize the gallery so it shows three products:

  7. Vælg den nederste etiket i det første element i galleriet:In the first item of the gallery, select the bottom label:

    Bemærk

    Når du ændrer det første element i et galleri, ændrer du automatisk alle andre elementer i galleriet.When you change the first item in any gallery, you automatically change all other items in the gallery.

  8. Angiv egenskaben Text (Tekst) for etiketten til følgende udtryk:Set the Text property of the label to the following expression:
    ThisItem!UnitsInStockThisItem!UnitsInStock

    Når du gør det, viser etiketten antallet af enheder på lager for hvert produkt:When you do this, the label shows the units in stock for each product:

Bemærk

Som standard er egenskaben Text (Tekst) for den øverste etiket angivet til ThisItem!ProductName.By default, the Text property of the top label is set to ThisItem!ProductName. Du kan ændre det til et af de andre elementer i din samling.You can change it to any other item in your collection. Hvis din samling f.eks. indeholder felterne ProductDescription (Produktbeskrivelse) eller Price (Pris), kan du angive etiketten til ThisItem!ProductDescription eller ThisItem!Price.For example, if your collection has ProductDescription or Price fields, you can set the label to ThisItem!ProductDescription or ThisItem!Price.

Ved hjælp af disse trin har du importeret data, der indeholder .jpg-billeder, til en samling.Using these steps, you imported data that includes .jpg images into a collection. Du har derefter tilføjet et galleri, der viser dataene, og konfigureret en etiket til at vise antallet af enheder på lager for hvert produkt.You then added a gallery that displays the data and configured a label to show the units in stock for each product.

  1. Vælg et hvilket som helst element i galleriet undtagen det første.Select any item in the gallery except the first one. Redigeringsikonet vises (øverste venstre hjørne).The edit icon displays (upper left corner). Vælg redigeringsikonet:Select the edit icon:
  2. Vælg Shapes (Figurer) under fanen Insert (Indsæt), og vælg derefter rektanglet.On the Insert tab, select Shapes, and then select the rectangle. Et blåt udfyldt rektangel vises i de enkelte gallerielementer.A blue solid rectangle appears in each gallery item.
  3. Under fanen Home (Hjem) skal du vælge Fill (Udfyldning) og derefter vælge No Fill (Ingen udfyldning).On the Home tab, select Fill, and then select No Fill.
  4. Vælg Border (Ramme), vælg Border Style (Rammetypografi), og vælg derefter den udfyldte linje.Select Border, select Border Style, and then select the solid line.
  5. Vælg Border (Ramme) igen, og angiv tykkelsen til 3.Select Border again, and set the thickness to 3. Skift størrelsen på rektanglet, så det omgiver gallerielementet.Resize the rectangle so that it surrounds the gallery item. Elementerne i galleriet har nu en blå ramme og ser sådan ud:The items in your gallery now have a blue border and should look similar to the following:
  6. Under fanen Shape (Figur) skal du vælge Visible (Synlig) og derefter angive følgende formel på formellinjen:On the Shape tab, select Visible, and then enter the following formula in the Formula Bar:

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

    Et blåt rektangel omgiver den aktuelle markering i et galleri.A blue rectangle surrounds the current selection in a gallery. Vælg et par gallerielementer for at kontrollere, at rektanglet vises rundt om alle de elementer, du vælger.Select a few gallery items to confirm that the rectangle appears around each item that you select. Husk, at du kan også åbne eksempelvisningen for at se og teste det, du opretter.Remember, you can also open Preview to see and test what you're creating.

Tip

Markér rektanglet, vælg Reorder (Omarranger) under fanen Home (Hjem), og vælg derefter Send to Back (Placer bagest).Select the rectangle, select Reorder on the Home tab, and then select Send to Back. Ved hjælp af denne funktion kan du markere et gallerielement, uden at rammen blokerer noget.Using this feature, you can select a gallery item without the border blocking anything.

Ved hjælp af disse trin har du tilføjet en ramme omkring den aktuelle markering i galleriet.Using these steps, you added a border around the current selection in the gallery.

I disse trin vil vi sortere gallerielementerne i stigende og faldende rækkefølge.In these steps, we are going to sort the gallery items in ascending and descending order. Desuden føjer vi en skyder til 'filter'-gallerielementer efter enheder på lager, som du vælger.Also, we'll add a slider control to 'filter' gallery items by the units in stock that you choose.

Sortér i stigende eller faldende rækkefølgeSort in ascending or descending order

  1. Vælg et hvilket som helst element i galleriet undtagen det første.Select any item in the gallery except the first one.
  2. Egenskaben Items (Elementer) er angivet til Inventory (Lager – navnet på din samling).The Items property is currently set to Inventory (the name of your collection). Du kan ændre det til følgende:Change it to the following:

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

    Når du gør det, sorteres elementerne i galleriet efter produktets navn i stigende rækkefølge: When you do this, the items in the gallery are sorted by the product name in ascending order:

    Prøv at sortere i faldende rækkefølge.Try descending order. Angiv egenskaben Items (Elementer) for galleriet til følgende formel:Set the Items property of the gallery to the following formula:

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

  1. Tilføj en skyder (fanen Insert (Indsæt) > Controls (Kontrolelementer)), omdøb den til StockFilter, og flyt den under galleriet.Add a Slider control (Insert tab > Controls), rename it to StockFilter, and move it under the gallery.
  2. Konfigurer skyderen, så brugere ikke kan konfigurere den til en værdi uden for området for antal enheder på lager:Configure the slider so that users can't set it to a value outside the range of units in stock:

    1. Under fanen Content (Indhold) skal du vælge Min og derefter angive følgende udtryk:On the Content tab, select Min, and then enter the following expression:
      Min(Inventory, UnitsInStock)
    2. Under fanen Content (Indhold) skal du vælge Max (Maks) og derefter angive følgende udtryk:On the Content tab, select Max, and then enter the following expression:
      Max(Inventory, UnitsInStock)
  3. Vælg et hvilket som helst element i galleriet undtagen det første.Select any item in the gallery except the first one. Angiv egenskaben Items (Elementer) for galleriet til følgende udtryk:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value)
  4. I eksempelvisning skal du justere skyderen til en værdi, der er mellem det højeste og det laveste antal i galleriet.In Preview, adjust the slider to a value that's between the highest and the lowest quantity in the gallery. Når du justerer skyderen, viser galleriet kun de produkter, der er mindre end den værdi, du vælger:As you adjust the slider, the gallery shows only those products that are less than the value you choose:

Lad os nu tilføje vores filter:Now, let's add to our filter:

  1. Gå tilbage til designeren.Go back to the designer.
  2. Under fanen Insert (Indsæt) skal du vælge Text (Tekst), vælge Input Text (Inputtekst) og omdøbe det nye kontrolelement til NameFilter.On the Insert tab, select Text, select Input Text, and rename the new control to NameFilter. Flyt tekstkontrolelementet under skyderen.Move the text control below the slider.
  3. Angiv egenskaben Items (Elementer) for galleriet til følgende udtryk:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value && NameFilter!Text in ProductName)
  4. I eksempelvisning skal du indstille skyderen til 30 og skrive bogstavet g i kontrolelementet til tekstinput.In Preview, set the slider to 30, and type the letter g in the text-input control. Galleriet viser det eneste produkt med mindre end 30 enheder på lager, og som har et navn med bogstavet "g":The gallery shows the only product with less than 30 units in stock and has a name with the letter "g":

tip og tricksTips and Tricks

  • Du kan når som helst vælge knappen Vis udskrift () for at se, hvad du har oprettet, og teste det.At anytime, you can select the preview button () to see what you created and test it.
  • Når du designer din app, kan du ændre størrelsen på kontrolelementer og flytte dem rundt ved hjælp af klik og træk.When designing your app, you can re-size the controls and move them around using click-and-drag.
  • Tryk på ESC, eller vælg krydset (X) for at lukke eksempelvinduet.Press ESC or select the X to close the preview window.
  • Når du bruger et galleri, kan du markere det første element i galleriet for at ændre alle elementer i galleriet.When using a gallery, select the first item in the gallery to change all items in the gallery. Vælg f.eks. det første element for at føje en ramme til alle elementer i galleriet.For example, select the first item to add a border to all items in the gallery.
  • Hvis du vil opdatere egenskaberne for galleriet, skal du vælge et element i galleriet undtagen det første.To update the properties of the gallery, select any item in the gallery except the first one. Du kan f.eks. vælge det andet element for at opdatere Items (Elementer), ShowScrollbar (Vis rulleliste) og andre egenskaber, der gælder for galleriet (ikke elementerne i galleriet).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).

Det har du lærtWhat you learned

I dette emne har du:In this topic, you:

  • Oprettet en samling, importeret data, der indeholder .jpg-billeder, til denne samling og vist dataene i et galleri.Created a collection, imported data that includes .jpg images into that collection, and showed the data in a gallery.
  • Konfigureret en etiket, der viser en liste over enheder på lager for den pågældende vare, under de enkelte billeder i galleriet.Under each image in the gallery, configured a label that lists the units in stock for that item.
  • Tilføjet en ramme omkring det den vare, du har valgt.Added a border around the item that you select.
  • Sorteret varerne efter produktnavn i stigende og faldende rækkefølge.Sorted the items by product name in ascending and descending order.
  • Tilføjet en skyder og et kontrolelement til inputtekst for at filtrere produkter efter antal enheder på lager og produktnavn.Added a slider and an input text control to filter the products by units in stock and product name.