Create a gallery to show images and text about several products, and sort and filter that information.
In PowerApps, you can use a gallery to show several related items, just as you see in a catalog. Galleries are great for showing information about products, such as names and prices. In this topic, we create a gallery and sort and filter the information using Excel-like functions. Also, when an item is selected, a border is placed around the item.
This topic uses a tablet app. You can use a phone app but you will need to resize some of the controls.
Create a collection named Inventory using the sample data. Steps include:
1. Set the OnSelect property of the import control to the following formula:
1. Select the Import Data button to open Windows Explorer. Select CreateFirstApp.zip, and select Open. 1. In the File menu, select Collections. The Inventory collection is listed with the data you imported:
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.
Select the back arrow to return to the designer.
On the Insert tab, click or tap Gallery, and then click or tap the Horizontal gallery.
In the right-hand pane, click or tap the option in which the title and the subtitle overlay the graphic:
Set the Items property of the gallery to Inventory:
Rename the gallery to ProductGallery, and move the gallery so it doesn't block the other controls. Resize the gallery so it shows three products:
In the first item of the gallery, select the bottom label:
Set the Text property of the label to the following expression:
When you do this, the label shows the units in stock for each product:
By default, the Text property of the top label is set to
ThisItem!ProductName. You can change it to any other item in your collection. For example, if your collection has ProductDescription or Price fields, you can set the label to
Using these steps, you imported data that includes .jpg images into a collection. You then added a gallery that displays the data and configured a label to show the units in stock for each product.
On the Shape tab, select Visible, and then enter the following formula in the Formula Bar:
A blue rectangle surrounds the current selection in a gallery. Select a few gallery items to confirm that the rectangle appears around each item that you select. Remember, you can also open Preview to see and test what you're creating.
Select the rectangle, select Reorder on the Home tab, and then select Send to Back. Using this feature, you can select a gallery item without the border blocking anything.
Using these steps, you added a border around the current selection in the gallery.
In these steps, we are going to sort the gallery items in ascending and descending order. Also, we'll add a slider control to 'filter' gallery items by the units in stock that you choose.
The Items property is currently set to Inventory (the name of your collection). Change it to the following:
When you do this, the items in the gallery are sorted by the product name in ascending order:
Try descending order. Set the Items property of the gallery to the following formula:
Sort(Inventory, ProductName, Descending)
Configure the slider so that users can't set it to a value outside the range of units in stock:
Select any item in the gallery except the first one. Set the Items property of the gallery to the following expression:
In Preview, adjust the slider to a value that's between the highest and the lowest quantity in the gallery. As you adjust the slider, the gallery shows only those products that are less than the value you choose:
Now, let's add to our filter:
Filter(Inventory, UnitsInStock<=StockFilter!Value && NameFilter!Text in ProductName)
In this topic, you: