Gegevens weergeven, sorteren en filteren in een PowerApps-galerieShow, sort, and filter data in a PowerApps gallery

Maak een galerie om afbeeldingen en tekst over verschillende producten weer te geven en sorteer en filter deze informatie.Create a gallery to show images and text about several products, and sort and filter that information.

In PowerApps kunt u een galerie gebruiken om meerdere verwante items weer te geven, net zoals in een catalogus gebeurt.In PowerApps, you can use a gallery to show several related items, just as you see in a catalog. Galerieën zijn ideaal voor het tonen van informatie over producten, zoals namen en prijzen.Galleries are great for showing information about products, such as names and prices. Dit onderwerp behandelt het maken van een galerie en het sorteren en filteren van informatie met behulp van Excel-achtige functies.In this topic, we create a gallery and sort and filter the information using Excel-like functions. Wanneer een item is geselecteerd, wordt er een rand om het item weergegeven.Also, when an item is selected, a border is placed around the item.

Notitie

In dit onderwerp wordt een tablet-app gebruikt.This topic uses a tablet app. U kunt ook een smartphone-app gebruiken, maar dan zult u de maat van sommige besturingselementen moeten aanpassen.You can use a phone app but you will need to resize some of the controls.

VereistenPrerequisites

  • Registreer u voor PowerApps en installeer PowerApps.Sign up for PowerApps and install PowerApps. Meld u bij het openen van PowerApps aan met dezelfde referenties die u hebt gebruikt om u te registreren.When you open PowerApps, sign-in using the same credentials that you used to sign up.
  • Maak een tablet-app op basis van een sjabloon, op basis van gegevens of maak een volledig nieuwe app.Create a tablet app from a template, from data, or from scratch.
  • Lees hoe u een besturingselement kunt configureren.Learn how to configure a control.
  • Deze stappen gebruiken de inhoud van de map CreateFirstApp als voorbeeld van invoergegevens, welke ook JPG-afbeeldingen bevat.These steps use the CreateFirstApp as sample input data, which includes .jpg images. Het zip-bestand bevat een XML-bestand dat naar Excel kan worden geconverteerd.The zip file includes an XML file that can be converted to Excel. Anders leest PowerApps automatisch de bestanden in de .zip-bestanden, waarna deze worden geïmporteerd.Otherwise, PowerApps automatically reads the files in the .zip files and imports it successfully. U kunt deze voorbeeldgegevens downloaden en gebruiken of uw eigen gegevens importeren.You can download and use this sample data, or import your own.
  1. Maak een verzameling met de naam Inventaris, op basis van de voorbeeldgegevens.Create a collection named Inventory using the sample data. Volg hiervoor onder andere de volgende stappen:Steps include:

    1. Selecteer op het tabblad Invoegen de optie Besturingselementen en selecteer vervolgens Importeren:On the Insert tab, select Controls, and then select Import:

    2. Stel de eigenschap OnSelect van het besturingselement voor importeren in op de volgende formule:Set the OnSelect property of the import control to the following formula:
      Collect(Inventory, Import1!Data)Collect(Inventory, Import1!Data)

    3. Selecteer de knop Gegevens importeren op Windows Verkenner te openen.Select the Import Data button to open Windows Explorer. Selecteer CreateFirstApp.zip en selecteer Openen.Select CreateFirstApp.zip, and select Open.
    4. Selecteer Verzamelingen in het menu Bestand.In the File menu, select Collections. De verzameling Inventaris wordt getoond, met daarin de gegevens die u hebt geïmporteerd:The Inventory collection is listed with the data you imported:

      U hebt zojuist verzameling Inventaris gemaakt, met daarin informatie over vijf producten, zoals een afbeelding van het ontwerp, de naam van het product en het aantal artikelen in voorraad.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.

      Notitie

      Het besturingselement importeren wordt gebruikt om op Excel-achtige wijze gegevens te importeren en de verzameling te maken.The import control is used to import Excel-like data and create the collection. Het besturingselement importeren importeert gegevens wanneer u uw app maakt en wanneer u een voorbeeldweergave van uw app genereert.The import control imports data when you are creating your app, and previewing your app. Het besturingselement importeren importeert momenteel geen gegevens wanneer u uw app publiceert.Currently, the import control does not import data when you publish your app.

  2. Selecteer de pijl naar links om terug te keren naar de ontwerpfunctie.Select the back arrow to return to the designer.
  3. Ga naar het tabblad Invoegen, klik of tik op Galerie en klik of tik vervolgens op de galerie Horizontaal.On the Insert tab, click or tap Gallery, and then click or tap the Horizontal gallery.

  4. Klik of tik in het rechterdeelvenster op de optie waarbij de titel en de ondertitel over de afbeelding heen worden weergegeven:In the right-hand pane, click or tap the option in which the title and the subtitle overlay the graphic:

  5. Stel de eigenschap Items van de galerie in op Inventory:Set the Items property of the gallery to Inventory:

  6. Wijzig de naam van de galerie naar ProductGallery, en verplaats de galerie, zodat de andere besturingselementen niet worden geblokkeerd.Rename the gallery to ProductGallery, and move the gallery so it doesn't block the other controls. Pas het formaat van de galerie aan, zodat er drie producten worden weergegeven:Resize the gallery so it shows three products:

  7. Selecteer het label onder het eerste item in de galerie:In the first item of the gallery, select the bottom label:

    Notitie

    Wanneer u het eerste item in een galerie wijzigt, wijzigt u automatisch alle andere items in de galerie.When you change the first item in any gallery, you automatically change all other items in the gallery.

  8. Stel de eigenschap Text van het label in op de volgende expressie:Set the Text property of the label to the following expression:
    ThisItem!UnitsInStockThisItem!UnitsInStock

    Hierdoor toont het label voor ieder product hoeveel artikelen er op voorraad zijn:When you do this, the label shows the units in stock for each product:

Notitie

Standaard is de eigenschap Text van het bovenste label ingesteld op ThisItem!ProductName.By default, the Text property of the top label is set to ThisItem!ProductName. U kunt dit wijzigen naar ieder ander item in uw verzameling.You can change it to any other item in your collection. Als uw verzameling bijvoorbeeld velden heeft voor ProductDescription of Price, kunt u het label instellen op ThisItem!ProductDescription of ThisItem!Price.For example, if your collection has ProductDescription or Price fields, you can set the label to ThisItem!ProductDescription or ThisItem!Price.

Met behulp van deze stappen hebt u een set gegevens, waarom een aantal JPG-afbeeldingen, geïmporteerd naar een verzameling.Using these steps, you imported data that includes .jpg images into a collection. U hebt vervolgens een galerie toegevoegd die deze gegevens weergeeft en een label geconfigureerd om voor elk product te tonen hoeveel artikelen er op voorraad zijn.You then added a gallery that displays the data and configured a label to show the units in stock for each product.

  1. Selecteer een willekeurig item in de galerie, behalve het eerste item.Select any item in the gallery except the first one. Het bewerkingspictogram wordt weergegeven (linkerbovenhoek).The edit icon displays (upper left corner). Selecteer het bewerkingspictogram:Select the edit icon:
  2. Selecteer op het tabblad Invoegen de optie Vormen en selecteer vervolgens de rechthoek.On the Insert tab, select Shapes, and then select the rectangle. Er verschijnt een egaal blauwe rechthoek in elk galerie-item.A blue solid rectangle appears in each gallery item.
  3. Selecteer op het tabblad Start de optie Opvulling en selecteer vervolgens Geen opvulling.On the Home tab, select Fill, and then select No Fill.
  4. Selecteer Rand, selecteer den Randstijl en selecteer vervolgens de ononderbroken lijn.Select Border, select Border Style, and then select the solid line.
  5. Selecteer nogmaals Rand en stel de dikte in op 3.Select Border again, and set the thickness to 3. Wijzig de grootte van de rechthoek, zodat deze het galerie-item omringt.Resize the rectangle so that it surrounds the gallery item. De items in uw galerie hebben nu een blauwe rand en zouden moeten lijken op de onderstaande afbeelding:The items in your gallery now have a blue border and should look similar to the following:
  6. Selecteer op het tabblad Vormen de optie Zichtbaar en voer in de formulebalk de volgende formule in:On the Shape tab, select Visible, and then enter the following formula in the Formula Bar:

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

    De huidige selectie in een galerie wordt omringd door een blauwe rechthoek.A blue rectangle surrounds the current selection in a gallery. Selecteer enkele galerie-items om te controleren of de rechthoek inderdaad wordt weergegeven rond elk item dat u selecteert.Select a few gallery items to confirm that the rectangle appears around each item that you select. Denk eraan dat u ook het Voorbeeld kunt openen om wat u maakt te bekijken en testen.Remember, you can also open Preview to see and test what you're creating.

Tip

Selecteer de rechthoek, selecteert dan op het tabblad Start de optie Volgorde wijzigen en selecteer vervolgens Naar achtergrond.Select the rectangle, select Reorder on the Home tab, and then select Send to Back. Met deze functie kunt u een galerie-item selecteren zonder dat de rand iets blokkeert.Using this feature, you can select a gallery item without the border blocking anything.

Met behulp van deze stappen hebt u een rand om de huidige selectie in de galerie toegevoegd.Using these steps, you added a border around the current selection in the gallery.

In deze stappen gaan we de galerie-items in oplopende of aflopende volgorde sorteren.In these steps, we are going to sort the gallery items in ascending and descending order. Bovendien gaan we een schuifregelaar toevoegen om de galerie-items te filteren op basis van een op te geven aantal artikelen dat op voorraad is.Also, we'll add a slider control to 'filter' gallery items by the units in stock that you choose.

In oplopende of aflopende volgorde sorterenSort in ascending or descending order

  1. Selecteer een willekeurig item in de galerie, behalve het eerste item.Select any item in the gallery except the first one.
  2. De eigenschap Items is momenteel ingesteld op Inventory (de naam van uw verzameling).The Items property is currently set to Inventory (the name of your collection). Verander dit naar:Change it to the following:

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

    Als u dit doet, worden de items in de galerie op productnaam gesorteerd, in oplopende volgorde: When you do this, the items in the gallery are sorted by the product name in ascending order:

    Probeer eens te sorteren op aflopende volgorde.Try descending order. Stel de eigenschap Items van de galerie in op de volgende formule:Set the Items property of the gallery to the following formula:

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

  1. Voeg een schuifregelaar toe (tabblad Invoegen > Besturingselementen), wijzig de naam naar StockFilter en verplaats deze naar onder de galerie.Add a Slider control (Insert tab > Controls), rename it to StockFilter, and move it under the gallery.
  2. Configureer de schuifregelaar zo, dat gebruikers deze niet kunnen instellen op een waarde buiten het waardebereik van de voorraadaantallen:Configure the slider so that users can't set it to a value outside the range of units in stock:

    1. Selecteer op het tabblad Inhoud de eigenschap Min en voer de volgende expressie in:On the Content tab, select Min, and then enter the following expression:
      Min(Inventory, UnitsInStock)
    2. Selecteer op het tabblad Inhoud de eigenschap Max en voer de volgende expressie in:On the Content tab, select Max, and then enter the following expression:
      Max(Inventory, UnitsInStock)
  3. Selecteer een willekeurig item in de galerie, behalve het eerste item.Select any item in the gallery except the first one. Stel de eigenschap Items van de galerie in op de volgende expressie:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value)
  4. Verschuif in het Voorbeeld de schuifregelaar naar een waarde tussen het hoogste en het laagste voorraadaantal in de galerie.In Preview, adjust the slider to a value that's between the highest and the lowest quantity in the gallery. Als u de schuifregelaar aanpast, worden alleen producten getoond waarvan de voorraadwaarde kleiner is dan de waarde die u hebt gekozen:As you adjust the slider, the gallery shows only those products that are less than the value you choose:

Nu gaan we ons filter toevoegen:Now, let's add to our filter:

  1. Ga terug naar de ontwerpomgeving.Go back to the designer.
  2. Selecteer op het tabblad Invoegen de optie Tekst, selecteer dan Tekstinvoer en wijzig de naam van het nieuwe besturingselement naar NameFilter.On the Insert tab, select Text, select Input Text, and rename the new control to NameFilter. Plaats het tekstbesturingselement onder de schuifregelaar.Move the text control below the slider.
  3. Stel de eigenschap Items van de galerie in op de volgende expressie:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value && NameFilter!Text in ProductName)
  4. Stel in de Preview de schuifregelaar in op 30 en typ in het besturingselement voor tekstinvoer de letter g.In Preview, set the slider to 30, and type the letter g in the text-input control. De galerie toont nu het enige product met minder dan 30 artikelen op voorraad en een naam met de letter "g":The gallery shows the only product with less than 30 units in stock and has a name with the letter "g":

Tips en trucsTips and Tricks

  • U kunt op ieder moment de knop Voorbeeld () gebruiken om te zien wat u hebt gemaakt en om dit te testen.At anytime, you can select the preview button () to see what you created and test it.
  • Wanneer u uw app ontwerpt, kunt u de grootte van de besturingselementen aanpassen en ze verplaatsen door te klikken en te slepen.When designing your app, you can re-size the controls and move them around using click-and-drag.
  • Druk op Esc of selecteer de X om het voorbeeldvenster te sluiten.Press ESC or select the X to close the preview window.
  • Wanneer u een galerie gebruikt, selecteert u het eerste item in de galerie om alle items in de galerie te wijzigen.When using a gallery, select the first item in the gallery to change all items in the gallery. Selecteer bijvoorbeeld het eerste item om een rand toe te voegen aan alle items in de galerie.For example, select the first item to add a border to all items in the gallery.
  • Om de eigenschappen van de galerie bij te werken, selecteert u een willekeurig item in de galerie, behalve het eerste item.To update the properties of the gallery, select any item in the gallery except the first one. Selecteer bijvoorbeeld het tweede item voor het bijwerken van eigenschappen als Items, ShowScrollbar en andere eigenschappen die betrekking hebben op de galerie zelf (en niet op de items in de galerie).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).

Wat u hebt geleerdWhat you learned

In dit onderwerp hebt u het volgende geleerd:In this topic, you:

  • Een verzameling maken, gegevens importeren naar die verzameling, waaronder JPG-afbeeldingen, en het weergeven van deze gegevens in een galerie.Created a collection, imported data that includes .jpg images into that collection, and showed the data in a gallery.
  • Het configureren van een tabel onder elke afbeelding in de galerie, met daarin de voorraadaantallen per item.Under each image in the gallery, configured a label that lists the units in stock for that item.
  • Het toevoegen van een rand rondom het item dat wordt geselecteerd.Added a border around the item that you select.
  • De items sorteren op productnaam, in oplopende of aflopende volgorde.Sorted the items by product name in ascending and descending order.
  • Een schuifregelaar en een tekstbesturingselement toevoegen om producten te filteren op basis van de productnaam en het aantal items op voorraad.Added a slider and an input text control to filter the products by units in stock and product name.