Zobrazení, třídění a filtrování dat v galerii PowerAppsShow, sort, and filter data in a PowerApps gallery

Vytvořením galerie můžete zobrazit obrázky a text k několika produktům, přičemž tyto informace se dají řadit a filtrovat.Create a gallery to show images and text about several products, and sort and filter that information.

V PowerApps můžete pomocí galerie zobrazit několik souvisejících položek podobně jako v katalogu.In PowerApps, you can use a gallery to show several related items, just as you see in a catalog. Galerie se skvěle hodí k zobrazení informací o produktech, jako jsou názvy a ceny.Galleries are great for showing information about products, such as names and prices. V tomto tématu vytvoříme galerii a pomocí funkcí jako v Excelu umožníme řazení a filtrování informací.In this topic, we create a gallery and sort and filter the information using Excel-like functions. Při výběru nějaké položky se kolem ní také zobrazí ohraničení.Also, when an item is selected, a border is placed around the item.

Poznámka

V tomto tématu se používá aplikace pro tablet.This topic uses a tablet app. Můžete použít aplikaci pro telefon, ale budete muset změnit velikost některých ovládacích prvků.You can use a phone app but you will need to resize some of the controls.

PožadavkyPrerequisites

  • Zaregistrujte se do služby PowerApps a nainstalujte ji.Sign up for PowerApps and install PowerApps. Když PowerApps otevřete, přihlaste se stejnými údaji, které jste použili k registraci.When you open PowerApps, sign-in using the same credentials that you used to sign up.
  • Vytvořte aplikaci pro tablet ze šablony, z dat nebo od začátku.Create a tablet app from a template, from data, or from scratch.
  • Zjistěte, jak se konfiguruje ovládací prvek.Learn how to configure a control.
  • V tomto postupu se pro ukázková vstupní data používá soubor CreateFirstApp obsahující obrázky .jpg.These steps use the CreateFirstApp as sample input data, which includes .jpg images. Tento zazipovaný soubor obsahuje soubor XML, který můžete převést na soubor Excelu.The zip file includes an XML file that can be converted to Excel. PowerApps soubory v tomto souboru .zip automaticky přečte a úspěšně naimportuje.Otherwise, PowerApps automatically reads the files in the .zip files and imports it successfully. Můžete si stáhnout a použít tato ukázková data nebo můžete naimportovat svoje vlastní.You can download and use this sample data, or import your own.
  1. Pomocí ukázkových dat vytvořte kolekci s názvem Inventory.Create a collection named Inventory using the sample data. Postup je následující:Steps include:

    1. Na kartě Vložit vyberte Ovládací prvky a pak vyberte Importovat:On the Insert tab, select Controls, and then select Import:

    2. Nastavte vlastnost OnSelect ovládacího prvku importu na následující vzorec:Set the OnSelect property of the import control to the following formula:
      Collect(Inventory; Import1!Data)Collect(Inventory, Import1!Data)

    3. Výběrem tlačítka Import dat otevřete Průzkumníka Windows.Select the Import Data button to open Windows Explorer. Vyberte soubor CreateFirstApp.zip a pak vyberte Otevřít.Select CreateFirstApp.zip, and select Open.
    4. V nabídce Soubor vyberte Kolekce.In the File menu, select Collections. Zobrazí se kolekce Inventory s daty, která jste naimportovali:The Inventory collection is listed with the data you imported:

      Právě jste vytvořili kolekci Inventory, která obsahuje informace o pěti produktech včetně obrázku designu, názvu produktu a počtu jednotek v zásobách.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.

      Poznámka

      Ovládací prvek importu se používá k importu dat excelového typu a vytvoření kolekce.The import control is used to import Excel-like data and create the collection. Tento ovládací prvek naimportuje data při vytváření a zobrazení náhledu aplikace.The import control imports data when you are creating your app, and previewing your app. Při publikování aplikace ovládací prvek importu v současnosti data nenaimportuje.Currently, the import control does not import data when you publish your app.

  2. Výběrem černé šipky se vraťte do návrháře.Select the back arrow to return to the designer.
  3. Na kartě Vložit klikněte nebo klepněte na Galerie a pak klikněte nebo klepněte na Vodorovně.On the Insert tab, click or tap Gallery, and then click or tap the Horizontal gallery.

  4. V pravém podokně klikněte nebo klepněte na možnost překryvného názvu a titulku:In the right-hand pane, click or tap the option in which the title and the subtitle overlay the graphic:

  5. Nastavte vlastnost Items této galerie na Inventory:Set the Items property of the gallery to Inventory:

  6. Přejmenujte galerii na ProductGallery a přemístěte ji, aby nepřekrývala ostatní ovládací prvky.Rename the gallery to ProductGallery, and move the gallery so it doesn't block the other controls. Změňte velikost galerie tak, aby zobrazovala tři produkty:Resize the gallery so it shows three products:

  7. U první položky galerie vyberte dolní popisek:In the first item of the gallery, select the bottom label:

    Poznámka

    Při změně první položky v libovolné galerii se automaticky změní všechny ostatní položky v této galerii.When you change the first item in any gallery, you automatically change all other items in the gallery.

  8. Nastavte vlastnost Text tohoto popisku na následující výraz:Set the Text property of the label to the following expression:
    ThisItem!UnitsInStockThisItem!UnitsInStock

    Když to uděláte, zobrazí popisek jednotky v zásobách pro jednotlivé produkty:When you do this, the label shows the units in stock for each product:

Poznámka

Vlastnost Text horního popisku je standardně nastavená na ThisItem!ProductName.By default, the Text property of the top label is set to ThisItem!ProductName. Můžete ji změnit na jakoukoli jinou položku v kolekci.You can change it to any other item in your collection. Pokud má kolekce například pole ProductDescription nebo Price, můžete popisek nastavit na ThisItem!ProductDescription nebo ThisItem!Price.For example, if your collection has ProductDescription or Price fields, you can set the label to ThisItem!ProductDescription or ThisItem!Price.

Pomocí tohoto postupu jste do kolekce naimportovali data obsahující obrázky .jpg.Using these steps, you imported data that includes .jpg images into a collection. Pak jste přidali galerii, která tato data zobrazuje, a nakonfigurovali popisek tak, aby zobrazoval jednotky v zásobách pro jednotlivé produkty.You then added a gallery that displays the data and configured a label to show the units in stock for each product.

  1. Vyberte v galerii jakoukoli položku kromě první.Select any item in the gallery except the first one. Zobrazí se ikona pro úpravy (v levém horním rohu).The edit icon displays (upper left corner). Vyberte ikonu pro úpravy:Select the edit icon:
  2. Na kartě Vložit vyberte Obrazce a pak vyberte pravoúhelník.On the Insert tab, select Shapes, and then select the rectangle. Ve všech položkách galerie se zobrazí modrý plný pravoúhelník.A blue solid rectangle appears in each gallery item.
  3. Na kartě Domů vyberte Vyplnit a pak vyberte Bez výplně.On the Home tab, select Fill, and then select No Fill.
  4. Vyberte Ohraničení, vyberte Styl ohraničení a pak vyberte plnou čáru.Select Border, select Border Style, and then select the solid line.
  5. Znovu vyberte Ohraničení a nastavte tloušťku na 3.Select Border again, and set the thickness to 3. Upravte velikost pravoúhelníku tak, aby ohraničoval položku galerie.Resize the rectangle so that it surrounds the gallery item. Položky v galerii teď mají modré ohraničení a měly by vypadat podobně jako na následujícím obrázku:The items in your gallery now have a blue border and should look similar to the following:
  6. Na kartě Obrazec vyberte Viditelný a do řádku vzorců zadejte následující vzorec:On the Shape tab, select Visible, and then enter the following formula in the Formula Bar:

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

    Aktuální výběr v galerii se ohraničí modrým čtyřúhelníkem.A blue rectangle surrounds the current selection in a gallery. Výběrem několika položek galerie ověřte, že se modrý čtyřúhelník zobrazí kolem každé vybrané položky.Select a few gallery items to confirm that the rectangle appears around each item that you select. Nezapomeňte, že můžete také otevřít Náhled , kde si svůj výtvor prohlédnete a otestujete.Remember, you can also open Preview to see and test what you're creating.

Tip

Vyberte čtyřúhelník, vyberte Změnit pořadí na kartě Domů a pak vyberte Přenést do pozadí.Select the rectangle, select Reorder on the Home tab, and then select Send to Back. Pomocí této funkce můžete položku galerie vybrat, aniž by ohraničení něco překrývalo.Using this feature, you can select a gallery item without the border blocking anything.

Tímto postupem jste kolem aktuálního výběru v galerii přidali ohraničení.Using these steps, you added a border around the current selection in the gallery.

V následujícím postupu seřadíme položky galerie ve vzestupném a sestupném pořadí.In these steps, we are going to sort the gallery items in ascending and descending order. Přidáme také ovládací prvek posuvníku pro „filtrování“ položek galerie podle zvolených jednotek v zásobách.Also, we'll add a slider control to 'filter' gallery items by the units in stock that you choose.

Řazení ve vzestupném nebo sestupném pořadíSort in ascending or descending order

  1. Vyberte v galerii jakoukoli položku kromě první.Select any item in the gallery except the first one.
  2. Vlastnost Items je aktuálně nastavená na Inventory (název vaší kolekce).The Items property is currently set to Inventory (the name of your collection). Změňte ji takto:Change it to the following:

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

    Když to uděláte, seřadí se položky v galerii ve vzestupném pořadí podle názvu produktu: When you do this, the items in the gallery are sorted by the product name in ascending order:

    Vyzkoušejte sestupné pořadí.Try descending order. Nastavte vlastnost Items této galerie na následující vzorec:Set the Items property of the gallery to the following formula:

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

  1. Přidejte ovládací prvek Posuvník (karta Vložit > Ovládací prvky), přejmenujte ho na StockFilter a přemístěte pod galerii.Add a Slider control (Insert tab > Controls), rename it to StockFilter, and move it under the gallery.
  2. Nakonfigurujte posuvník tak, aby ho uživatelé nemohli nastavit na hodnotu mimo rozsah jednotek v zásobách:Configure the slider so that users can't set it to a value outside the range of units in stock:

    1. Na kartě Obsah vyberte Min a zadejte následující výraz:On the Content tab, select Min, and then enter the following expression:
      Min(Inventory, UnitsInStock)
    2. Na kartě Obsah vyberte Max a zadejte následující výraz:On the Content tab, select Max, and then enter the following expression:
      Max(Inventory, UnitsInStock)
  3. Vyberte v galerii jakoukoli položku kromě první.Select any item in the gallery except the first one. Nastavte vlastnost Items této galerie na následující výraz:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value)
  4. V náhledu nastavte posuvník na hodnotu, která je mezi nejvyšším a nejnižším množstvím v galerii.In Preview, adjust the slider to a value that's between the highest and the lowest quantity in the gallery. Při nastavení posuvníku se v galerii zobrazí jenom produkty s menším množstvím než je zvolená hodnota:As you adjust the slider, the gallery shows only those products that are less than the value you choose:

Teď přidáme filtr:Now, let's add to our filter:

  1. Vraťte se do návrháře.Go back to the designer.
  2. Na kartě Vložit vyberte Text, vyberte Textové zadání a přejmenujte tento nový ovládací prvek na NameFilter.On the Insert tab, select Text, select Input Text, and rename the new control to NameFilter. Přemístěte ovládací prvek textu pod posuvník.Move the text control below the slider.
  3. Nastavte vlastnost Items této galerie na následující výraz:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value && NameFilter!Text in ProductName)
  4. V náhledu nastavte posuvník na 30 a do ovládacího prvku pro zadání textu zadejte písmeno g.In Preview, set the slider to 30, and type the letter g in the text-input control. V galerii se zobrazí jenom produkt s méně než 30 jednotkami v zásobách, jehož název zároveň obsahuje písmeno „g“:The gallery shows the only product with less than 30 units in stock and has a name with the letter "g":

Tipy a trikyTips and Tricks

  • Kdykoli můžete vybrat tlačítko náhledu () a zobrazit a otestovat to, co jste vytvořili.At anytime, you can select the preview button () to see what you created and test it.
  • Při návrhu aplikace můžete velikost a umístění ovládacích prvků měnit přetahováním.When designing your app, you can re-size the controls and move them around using click-and-drag.
  • Stisknutím klávesy ESC nebo výběrem symbolu X okno náhledu zavřete.Press ESC or select the X to close the preview window.
  • Když při používání galerie vyberete první položku v galerii, změníte tím všechny položky v galerii.When using a gallery, select the first item in the gallery to change all items in the gallery. První položku například vyberte, pokud chcete všechny položky v galerii doplnit o ohraničení.For example, select the first item to add a border to all items in the gallery.
  • Pokud chcete aktualizovat vlastnosti galerie, vyberte v galerii libovolnou položku kromě první.To update the properties of the gallery, select any item in the gallery except the first one. Druhou položku například vyberte, pokud chcete aktualizovat Items, ShowScrollbar a jiné vlastnosti, které se vztahují na galerii (ne na položky v galerii).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).

Co jste se naučiliWhat you learned

V tomto tématu jste:In this topic, you:

  • Vytvořili kolekci, naimportovali do této kolekce data obsahující obrázky .jpg a zobrazili v galerii tato data.Created a collection, imported data that includes .jpg images into that collection, and showed the data in a gallery.
  • Pod jednotlivými obrázky v galerii nakonfigurovali popisek, který zobrazuje jednotky v zásobách pro danou položku.Under each image in the gallery, configured a label that lists the units in stock for that item.
  • Přidali ohraničení kolem vybrané položky.Added a border around the item that you select.
  • Seřadili položky ve vzestupném a sestupném pořadí podle názvu produktu.Sorted the items by product name in ascending and descending order.
  • Přidali ovládací prvek posuvníku a textového zadání pro filtrování produktů podle jednotek v zásobách a názvu produktu.Added a slider and an input text control to filter the products by units in stock and product name.