Visa, sortera och filtrera data i ett Power Apps-GalleriShow, sort, and filter data in a Power Apps gallery

Skapa ett galleri om du vill visa bilder och text för flera produkter och sortera och filtrera den informationen.Create a gallery to show images and text about several products, and sort and filter that information.

I Power Apps kan du använda ett galleri för att visa flera relaterade objekt, precis som du ser i en katalog.In Power Apps, you can use a gallery to show several related items, just as you see in a catalog. Gallerier är mycket användbara för att visa information om produkter, till exempel namn och priser.Galleries are great for showing information about products, such as names and prices. I det här ämnet skapar vi ett galleri och sorterar och filtrerar informationen med Excel-liknande funktioner.In this topic, we create a gallery and sort and filter the information using Excel-like functions. När ett objekt markeras placeras även en kantlinje runt objektet.Also, when an item is selected, a border is placed around the item.

Anteckning

I det här ämnet används en surfplatteapp.This topic uses a tablet app. Du kan använda en telefonapp men behöver då ändra storlek på vissa kontroller.You can use a phone app but you will need to resize some of the controls.

FörutsättningarPrerequisites

  • Registrera dig för Power Apps och logga sedan in med samma autentiseringsuppgifter som du använde för att registrera dig.Sign up for Power Apps, and then sign in using the same credentials that you used to sign up.
  • Skapa en surfplatteapp från en mall, från data eller från grunden.Create a tablet app from a template, from data, or from scratch.
  • Lär dig hur du konfigurerar en kontroll.Learn how to configure a control.
  • I de här stegen används CreateFirstApp som inkommande exempeldata, vilket inkluderar .jpg-bilder.These steps use the CreateFirstApp as sample input data, which includes .jpg images. Zip-filen innehåller en XML-fil som kan konverteras till Excel.The zip file includes an XML file that can be converted to Excel. Annars läser Power Apps automatiskt filerna i zip-filerna och importerar dem korrekt.Otherwise, Power Apps automatically reads the files in the .zip files and imports it successfully. Du kan hämta och använda dessa exempeldata eller importera egna.You can download and use this sample data, or import your own.
  1. Skapa en samling som heter Inventory med dina exempeldata.Create a collection named Inventory using the sample data. Dessa steg ingår:Steps include:

    1. Välj Controls på fliken Insert och välj sedan Import:On the Insert tab, select Controls, and then select Import:

    2. Ställ in OnSelect -egenskapen för importkontrollen till följande formel:Set the OnSelect property of the import control to the following formula:
      Samla in (inventering, Import1. data)Collect(Inventory; Import1.Data)

    3. Välj Import Data-knappen för att öppna Windows Explorer.Select the Import Data button to open Windows Explorer. Välj CreateFirstApp.zip och välj Open.Select CreateFirstApp.zip, and select Open.

    4. Välj CollectionsFile-menyn.In the File menu, select Collections. Inventeringssamlingen förses med de data som du har importerat:The Inventory collection is listed with the data you imported:

      Du har precis skapat en inventeringssamling som innehåller information om fem produkter, inklusive en designbild, namnet på produkten och antal enheter i 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.

      Anteckning

      Importkontrollen används för att importera Excel-liknande data och skapa samlingen.The import control is used to import Excel-like data and create the collection. Importkontrollen importerar data när du skapar din app och förhandsgranskar din app.The import control imports data when you are creating your app, and previewing your app. För närvarande importerar importkontrollen inte data när du publicerar din app.Currently, the import control does not import data when you publish your app.

  2. Välj bakåtpilen för att återgå till designern.Select the back arrow to return to the designer.

  3. Klicka eller tryck på Galleri på fliken Infoga och klicka eller tryck sedan på galleriet Vågrätt.On the Insert tab, click or tap Gallery, and then click or tap the Horizontal gallery.

  4. Klicka eller tryck på det alternativ där rubriken och undertexten överlappar bilden i rutan till höger:In the right-hand pane, click or tap the option in which the title and the subtitle overlay the graphic:

  5. Ställ in galleriets Items -egenskap till Inventory:Set the Items property of the gallery to Inventory:

  6. Byt namn på galleriet till ProductGallery och flytta galleriet så att det inte blockerar andra kontroller.Rename the gallery to ProductGallery, and move the gallery so it doesn't block the other controls. Ändra storlek på galleriet så att det visar tre produkter:Resize the gallery so it shows three products:

  7. Välj den nedersta etiketten i det första objektet i galleriet:In the first item of the gallery, select the bottom label:

    Anteckning

    När du ändrar det första objektet i något galleri, ändrar du automatiskt alla andra objekt i galleriet.When you change the first item in any gallery, you automatically change all other items in the gallery.

  8. Ställ in Text -egenskapen för etiketten till följande uttryck:Set the Text property of the label to the following expression:
    ThisItem. antal i lagerThisItem.UnitsInStock

    När du gör detta visar etiketten de enheter som finns i lager för varje produkt:When you do this, the label shows the units in stock for each product:

Anteckning

Som standard är Text -egenskapen för den översta etiketten inställd på ThisItem.ProductName.By default, the Text property of the top label is set to ThisItem.ProductName. Du kan ändra det till vilket annat objekt som helst i din samling.You can change it to any other item in your collection. Om din samling till exempel har fälten ProductDescription eller Price kan du ställa in etiketten till 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.

Med de här stegen importerade du data som innehåller .jpg-bilder i en samling.Using these steps, you imported data that includes .jpg images into a collection. Du lade sedan till ett galleri som visar dina data och konfigurerade en etikett för att visa de enheter som finns i lager för varje produkt.You then added a gallery that displays the data and configured a label to show the units in stock for each product.

  1. Markera valfri artikel i galleriet , med undantag för det första.Select any item in the gallery except the first one. Redigeringsikonen visas (övre vänstra hörnet).The edit icon displays (upper left corner). Välj redigeringsikonen:Select the edit icon:

  2. Välj Shapes på fliken Insert och välj därefter rektangeln.On the Insert tab, select Shapes, and then select the rectangle. En blå solid rektangel visas på varje galleriartikel.A blue solid rectangle appears in each gallery item.

  3. Home-fliken väljer du Fill och sedan No Fill.On the Home tab, select Fill, and then select No Fill.

  4. Välj Border och Border Style och välj sedan heldragen linje.Select Border, select Border Style, and then select the solid line.

  5. Välj Border igen och ange tjockleken till 3.Select Border again, and set the thickness to 3. Ändra storleken på rektangeln så att den omger galleriartikeln.Resize the rectangle so that it surrounds the gallery item. Objekten i galleriet har nu en blå kantlinje och bör se ut ungefär så här:The items in your gallery now have a blue border and should look similar to the following:

  6. På fliken Form väljer du Synlig och anger sedan följande formel i formelfältet:On the Shape tab, select Visible, and then enter the following formula in the Formula Bar:

    IF (ThisItem. IsSelected, true)If(ThisItem.IsSelected; true)

    En blå rektangel omger den aktuella markeringen i ett galleri.A blue rectangle surrounds the current selection in a gallery. Markera några galleriartiklar för att bekräfta att rektangeln visas runt varje objekt som du markerar.Select a few gallery items to confirm that the rectangle appears around each item that you select. Kom ihåg att du även kan öppna Preview för att visa och testa det som du skapar.Remember, you can also open Preview to see and test what you're creating.

Tips

Välj rektangeln, välj ReorderHome-fliken och välj sedan Send to Back.Select the rectangle, select Reorder on the Home tab, and then select Send to Back. Med den här funktionen kan du välja en galleriartikel utan att kantlinjen blockerar något.Using this feature, you can select a gallery item without the border blocking anything.

Med de här stegen har du lagt till en kantlinje kring det aktuella valet i galleriet.Using these steps, you added a border around the current selection in the gallery.

I följande steg ska vi sortera galleriartiklarna i stigande och fallande ordning.In these steps, we are going to sort the gallery items in ascending and descending order. Dessutom ska vi lägga till ett skjutreglage för att ”filtrera” galleriartiklar efter de enheter som finns i lager som du väljer.Also, we'll add a slider control to 'filter' gallery items by the units in stock that you choose.

Sortera i stigande eller fallande ordningSort in ascending or descending order

  1. Markera valfri artikel i galleriet , med undantag för det första.Select any item in the gallery except the first one.

  2. Items -egenskapen är för närvarande inställd på Inventory (namnet på din samling).The Items property is currently set to Inventory (the name of your collection). Ändra det till följande:Change it to the following:

    Sort(Inventory; ProductName)Sort(Inventory; ProductName)

    När du gör detta, sorteras objekten i galleriet efter produktnamn i stigande ordning: When you do this, the items in the gallery are sorted by the product name in ascending order:

    Prova fallande ordning.Try descending order. Ställ in egenskapen Items för galleriet till följande formel:Set the Items property of the gallery to the following formula:

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

  1. Lägg till en skjutreglageskontroll (fliken Insert > Controls), byt namn på den till StockFilter och placera den under galleriet.Add a Slider control (Insert tab > Controls), rename it to StockFilter, and move it under the gallery.

  2. Konfigurera skjutreglaget så att användare inte kan ställa in det till ett värde utanför intervallet för enheter i lager:Configure the slider so that users can't set it to a value outside the range of units in stock:

    1. På fliken Content väljer du Min och anger sedan följande uttryck:On the Content tab, select Min, and then enter the following expression:
      Min(Inventory; UnitsInStock)
    2. På fliken Content väljer du Max och anger sedan följande uttryck:On the Content tab, select Max, and then enter the following expression:
      Max(Inventory; UnitsInStock)
  3. Markera valfri artikel i galleriet , med undantag för det första.Select any item in the gallery except the first one. Ställ in Items -egenskapen för galleriet till följande uttryck:Set the Items property of the gallery to the following expression:
    Filter(Inventory; UnitsInStock<=StockFilter.Value)

  4. I Preview justerar du skjutreglaget till ett värde som ligger mellan det högsta och lägsta antalet 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 justerar skjutreglaget, visar galleriet endast de produkter som understiger det värde som du väljer:As you adjust the slider, the gallery shows only those products that are less than the value you choose:

Nu ska vi lägga till vårt filter:Now, let's add to our filter:

  1. Gå tillbaka till designern.Go back to the designer.
  2. På fliken Insert väljer du Text och Input Text och byter namn på den nya kontrollen till NameFilter.On the Insert tab, select Text, select Input Text, and rename the new control to NameFilter. Flytta textkontrollen under skjutreglaget.Move the text control below the slider.
  3. Ställ in Items -egenskapen för galleriet till följande uttryck:Set the Items property of the gallery to the following expression:
    Filter(Inventory; UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
  4. I Förhandsgranskning ställer du in skjutreglaget till 30 och skriver in bokstaven g i kontrollen för textinmatning.In Preview, set the slider to 30, and type the letter g in the text-input control. Galleriet visar den enda produkten med mindre än 30 enheter i lager och har ett namn med bokstaven ”g”:The gallery shows the only product with less than 30 units in stock and has a name with the letter "g":

TipsTips and Tricks

  • Du kan när som helst välja förhandsgranskningsknappen () för att se vad du har skapat och testa det.At anytime, you can select the preview button () to see what you created and test it.
  • När du utformar din app kan du ändra kontrollernas storlek och flytta dem genom att klicka och dra.When designing your app, you can re-size the controls and move them around using click-and-drag.
  • Tryck på ESC eller välj X för att stänga förhandsgranskningsfönstret.Press ESC or select the X to close the preview window.
  • När du använder ett galleri väljer du det första objektet i galleriet för att ändra alla objekt i galleriet.When using a gallery, select the first item in the gallery to change all items in the gallery. Välj till exempel det första objektet för att lägga till en kantlinje till alla objekt i galleriet.For example, select the first item to add a border to all items in the gallery.
  • Markera valfritt objekt i galleriet med undantag för det första om du vill uppdatera egenskaperna för galleriet.To update the properties of the gallery, select any item in the gallery except the first one. Markera till exempel det andra objektet för att uppdatera Items, ShowScrollbar och andra egenskaper som gäller för galleriet (inte objekten 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 här har du lärt digWhat you learned

I det här ämnet har du:In this topic, you:

  • Skapat en samling, importerat data som innehåller .jpg-bilder i samlingen och visat dessa data i ett galleri.Created a collection, imported data that includes .jpg images into that collection, and showed the data in a gallery.
  • Under varje bild i galleriet konfigurerat en etikett som visar enheter i lager för objektet.Under each image in the gallery, configured a label that lists the units in stock for that item.
  • Lagt till en kantlinje runt det objekt som du väljer.Added a border around the item that you select.
  • Sorterat objekten efter produktnamn i stigande och fallande ordning.Sorted the items by product name in ascending and descending order.
  • Lagt till ett skjutreglage och en kontroll för inmatningstext för att filtrera produkterna efter enheter i lager och produktnamn.Added a slider and an input text control to filter the products by units in stock and product name.