Zobrazenie, zoradenie a filtrovanie údajov v galérii služby PowerAppsShow, sort, and filter data in a PowerApps gallery

Vytvorením galérie môžete zobraziť obrázky a text niekoľkých produktov, pričom sa dajú tieto informácie zoradiť a filtrovať.Create a gallery to show images and text about several products, and sort and filter that information.

V službe PowerApps môžete pomocou galérie zobraziť niekoľko súvisiacich položiek podobne ako v katalógu.In PowerApps, you can use a gallery to show several related items, just as you see in a catalog. Galéria sa skvelo hodí na zobrazenie informácií o produktoch, ako sú názvy a ceny.Galleries are great for showing information about products, such as names and prices. V tejto téme vytvoríme galériu a pomocou funkcií ako v Exceli umožníme zoradenie a filtrovanie informácií.In this topic, we create a gallery and sort and filter the information using Excel-like functions. Pri výbere nejakej položky sa okolo nej tiež zobrazí orámovanie.Also, when an item is selected, a border is placed around the item.

Poznámka

V tejto téme sa používa aplikácia pre tablet.This topic uses a tablet app. Môžete použiť aplikáciu pre telefón, ale budete musieť zmeniť veľkosť niektorých ovládacích prvkov.You can use a phone app but you will need to resize some of the controls.

PredpokladyPrerequisites

  • Zaregistrujte sa do PowerApps a potom sa prihláste pomocou rovnakých poverení, ktoré ste použili pri registrácii.Sign up for PowerApps, and then sign in using the same credentials that you used to sign up.
  • Vytvorte aplikáciu pre tablet zo šablóny, údajov alebo úplne od začiatku.Create a tablet app from a template, from data, or from scratch.
  • Zistite, ako sa konfiguruje ovládací prvok.Learn how to configure a control.
  • V tomto postupe sa pre vzorové vstupné údaje používa súbor CreateFirstApp obsahujúci obrázky .jpg.These steps use the CreateFirstApp as sample input data, which includes .jpg images. Tento súbor ZIP obsahuje súbor XML, ktorý je možné previesť do Excelu.The zip file includes an XML file that can be converted to Excel. Inak služba PowerApps automaticky načíta súbory v súboroch ZIP a úspešne ich importuje.Otherwise, PowerApps automatically reads the files in the .zip files and imports it successfully. Tieto vzorové údaje si môžete stiahnuť a použiť, prípadne môžete importovať vlastné.You can download and use this sample data, or import your own.
  1. Pomocou vzorových údajov vytvorte kolekciu s názvom Inventory.Create a collection named Inventory using the sample data. Postup je nasledujúci:Steps include:

    1. Na karte Vložiť vyberte možnosť Ovládacie prvky a potom položku Importovať:On the Insert tab, select Controls, and then select Import:

      1

    2. Nastavte vlastnosť OnSelect ovládacieho prvku importu na nasledujúci vzorec:Set the OnSelect property of the import control to the following formula:
      Collect(Inventory, Import1!Data)Collect(Inventory, Import1!Data)

      12

    3. Výberom tlačidla Import údajov otvorte Windows Prieskumníka.Select the Import Data button to open Windows Explorer. Vyberte súbor CreateFirstApp.zip a potom vyberte možnosť Otvoriť.Select CreateFirstApp.zip, and select Open.

    4. V ponuke Súbor vyberte možnosť Kolekcie.In the File menu, select Collections. Zobrazí sa kolekcia Inventory s údajmi, ktoré ste naimportovali:The Inventory collection is listed with the data you imported:

      3

      Práve ste vytvorili kolekciu Inventory, ktorá obsahuje informácie o piatich produktoch vrátane obrázka návrhu, názvu produktu a počtu jednotiek na sklade.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í prvok importu sa používa na import údajov excelového typu a vytvorenie kolekcie.The import control is used to import Excel-like data and create the collection. Tento ovládací prvok importuje údaje pri vytváraní a zobrazení ukážky aplikácie.The import control imports data when you are creating your app, and previewing your app. Pri publikovaní aplikácie ovládací prvok importu v súčasnosti údaje nenaimportuje.Currently, the import control does not import data when you publish your app.

  2. Výberom čiernej šípky sa vráťte do návrhára.Select the back arrow to return to the designer.

  3. Na karte Vložiť kliknite alebo ťuknite na položku Galéria a potom kliknite alebo ťuknite na možnosť Vodorovne.On the Insert tab, click or tap Gallery, and then click or tap the Horizontal gallery.

    4

  4. Na pravej table kliknite alebo ťuknite na možnosť prekryvné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:

    15

  5. Nastavte vlastnosť Items tejto galérie na možnosť Inventory:Set the Items property of the gallery to Inventory:

    5

  6. Premenujte galériu na ProductGallery a premiestnite ju, aby neprekrývala ostatné ovládacie prvky.Rename the gallery to ProductGallery, and move the gallery so it doesn't block the other controls. Zmeňte veľkosť galérie tak, aby zobrazovala tri produkty:Resize the gallery so it shows three products:

    6

  7. Pri prvej položke galérie vyberte dolné označenie:In the first item of the gallery, select the bottom label:

    7

    Poznámka

    Pri zmene prvej položky v ľubovoľnej galérii sa automaticky zmenia všetky ostatné položky v tejto galérii.When you change the first item in any gallery, you automatically change all other items in the gallery.

  8. Nastavte vlastnosť Text tohto označenia na nasledujúci výraz:Set the Text property of the label to the following expression:
    ThisItem!UnitsInStockThisItem!UnitsInStock

    Keď to urobíte, označenie zobrazí jednotky na sklade pre jednotlivé produkty:When you do this, the label shows the units in stock for each product:

8

Poznámka

Vlastnosť Text horného označenia je štandardne nastavená na hodnotu ThisItem!ProductName.By default, the Text property of the top label is set to ThisItem!ProductName. Môžete ju zmeniť na akúkoľvek inú položku v kolekcii.You can change it to any other item in your collection. Ak má kolekcia napríklad polia ProductDescription alebo Price, môžete označenie nastaviť na hodnotu ThisItem!ProductDescription alebo ThisItem!Price.For example, if your collection has ProductDescription or Price fields, you can set the label to ThisItem!ProductDescription or ThisItem!Price.

Pomocou tohto postupu ste do kolekcie naimportovali údaje obsahujúce obrázky .jpg.Using these steps, you imported data that includes .jpg images into a collection. Potom ste pridali galériu, ktorá tieto údaje zobrazuje, a nakonfigurovali označenie tak, aby zobrazoval jednotky na sklade pre 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 galérii akúkoľvek položku okrem prvej.Select any item in the gallery except the first one. Zobrazí sa ikona na úpravy (v ľavom hornom rohu).The edit icon displays (upper left corner). Vyberte ikonu na úpravy:Select the edit icon:
    9

  2. Na karte Vložiť vyberte možnosť Tvary a potom vyberte pravouholník.On the Insert tab, select Shapes, and then select the rectangle. Vo všetkých položkách galérie sa zobrazí modrý plný pravouholník.A blue solid rectangle appears in each gallery item.

  3. Na karte Domov vyberte možnosť Vyplniť a potom vyberte položku Bez výplne.On the Home tab, select Fill, and then select No Fill.

  4. Vyberte možnosť Orámovanie, vyberte položku Štýl orámovania a potom vyberte plnú čiaru.Select Border, select Border Style, and then select the solid line.

  5. Znova vyberte možnosť Orámovanie a nastavte hrúbku na hodnotu 3.Select Border again, and set the thickness to 3. Upravte veľkosť pravouholníka tak, aby ohraničoval položku galérie.Resize the rectangle so that it surrounds the gallery item. Položky v galérii teraz majú modré orámovanie a mali by vyzerať podobne ako na nasledujúcom obrázku:The items in your gallery now have a blue border and should look similar to the following:
    10

  6. Na karte Tvar vyberte položku Viditeľný a do riadka vzorcov zadajte nasledujúci 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álny výber v galérii sa orámuje modrým štvoruholníkom.A blue rectangle surrounds the current selection in a gallery. Výberom niekoľkých položiek galérie overte, či sa modrý štvoruholník zobrazí okolo každej vybratej položky.Select a few gallery items to confirm that the rectangle appears around each item that you select. Nezabudnite, že môžete tiež otvoriť ukážku 2, kde si svoj výtvor prehliadnete a otestujete.Remember, you can also open Preview 2 to see and test what you're creating.

Tip

Vyberte štvoruholník, vyberte možnosť Zmeniť poradie na karte Domov a potom vyberte položku Preniesť do pozadia.Select the rectangle, select Reorder on the Home tab, and then select Send to Back. Pomocou tejto funkcie môžete vybrať položku galérie bez toho, aby orámovanie niečo prekrývalo.Using this feature, you can select a gallery item without the border blocking anything.

Týmto postupom ste okolo aktuálneho výberu v galérii pridali orámovanie.Using these steps, you added a border around the current selection in the gallery.

V nasledujúcom postupe zoradíme položky galérie vo vzostupnom a zostupnom poradí.In these steps, we are going to sort the gallery items in ascending and descending order. Pridáme tiež ovládací prvok jazdca na „filtrovanie“ položiek galérie podľa zvolených jednotiek na sklade.Also, we'll add a slider control to 'filter' gallery items by the units in stock that you choose.

Zoradenie vo vzostupnom alebo zostupnom poradíSort in ascending or descending order

  1. Vyberte v galérii akúkoľvek položku okrem prvej.Select any item in the gallery except the first one.

  2. Vlastnosť Items je aktuálne nastavená na hodnotu Inventory (názov vašej kolekcie).The Items property is currently set to Inventory (the name of your collection). Zmeňte ju takto:Change it to the following:

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

    Keď to urobíte, položky v galérii sa zoradia vo vzostupnom poradí podľa názvu produktu: 11When you do this, the items in the gallery are sorted by the product name in ascending order: 11

    Vyskúšajte zostupné poradie.Try descending order. Nastavte vlastnosť Items tejto galérie na nasledujúci vzorec:Set the Items property of the gallery to the following formula:

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

  1. Pridajte ovládací prvok Jazdec (karta Vložiť > Ovládacie prvky), premenujte ho na StockFilter a presuňte pod galériu.Add a Slider control (Insert tab > Controls), rename it to StockFilter, and move it under the gallery.

  2. Nakonfigurujte jazdec tak, aby ho používatelia nemohli nastaviť na hodnotu mimo rozsahu jednotiek na sklade:Configure the slider so that users can't set it to a value outside the range of units in stock:

    1. Na karte Obsah vyberte možnosť Min a zadajte nasledujúci výraz:On the Content tab, select Min, and then enter the following expression:
      Min(Inventory, UnitsInStock)
    2. Na karte Obsah vyberte možnosť Max a zadajte nasledujúci výraz:On the Content tab, select Max, and then enter the following expression:
      Max(Inventory, UnitsInStock)
  3. Vyberte v galérii akúkoľvek položku okrem prvej.Select any item in the gallery except the first one. Nastavte vlastnosť Items tejto galérie na nasledujúci výraz:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value)

  4. V ukážke nastavte jazdec na hodnotu, ktorá je medzi najvyšším a najnižším množstvom v galérii.In Preview, adjust the slider to a value that's between the highest and the lowest quantity in the gallery. Pri nastavení jazdca sa v galérii zobrazia iba produkty s menším množstvom, ako je zvolená hodnota:As you adjust the slider, the gallery shows only those products that are less than the value you choose:
    13

Teraz pridáme filter:Now, let's add to our filter:

  1. Vráťte sa do návrhára.Go back to the designer.
  2. Na karte Vložiť vyberte Text, zvoľte Textový vstup a premenujte tento nový ovládací prvok na NameFilter.On the Insert tab, select Text, select Input Text, and rename the new control to NameFilter. Presuňte ovládací prvok textu pod jazdec.Move the text control below the slider.
  3. Nastavte vlastnosť Items tejto galérie na nasledujúci výraz:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value && NameFilter!Text in ProductName)
  4. V ukážke nastavte jazdec na hodnotu 30 a do ovládacieho prvku na zadanie textu zadajte písmeno g.In Preview, set the slider to 30, and type the letter g in the text-input control. V galérii sa zobrazí iba produkt s menej ako 30 jednotkami na sklade, ktorého názov 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":
    14

Tipy a trikyTips and Tricks

  • Kedykoľvek môžete vybrať tlačidlo ukážky (2) a zobraziť a otestovať to, čo ste vytvorili.At anytime, you can select the preview button (2) to see what you created and test it.
  • Pri navrhovaní aplikácie môžete zmeniť veľkosť ovládacích prvkov a premiestňovať ich kliknutím a presunutím.When designing your app, you can re-size the controls and move them around using click-and-drag.
  • Stlačením klávesa ESC alebo výberom symbolu X okno ukážky zavriete.Press ESC or select the X to close the preview window.
  • Keď pri používaní galérie vyberiete prvú položku v galérii, zmeníte tým všetky položky v galérii.When using a gallery, select the first item in the gallery to change all items in the gallery. Prvú položku napríklad vyberte, ak chcete všetky položky v galérii doplniť o orámovanie.For example, select the first item to add a border to all items in the gallery.
  • Ak chcete aktualizovať vlastnosti galérie, vyberte v galérii ľubovoľnú položku okrem prvej.To update the properties of the gallery, select any item in the gallery except the first one. Druhú položku napríklad vyberte, ak chcete aktualizovať vlastnosti Items, ShowScrollbar a iné, ktoré sa vzťahujú na galériu (nie na položky v galérii).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).

Čo ste sa naučiliWhat you learned

V tejto téme ste:In this topic, you:

  • Vytvorili kolekciu, naimportovali do tejto kolekcie údaje obsahujúce obrázky .jpg a zobrazili tieto údaje v galérii.Created a collection, imported data that includes .jpg images into that collection, and showed the data in a gallery.
  • Pod jednotlivými obrázkami v galérii nakonfigurovali označenie, ktoré zobrazuje jednotky na sklade pre danú položku.Under each image in the gallery, configured a label that lists the units in stock for that item.
  • Pridali orámovanie okolo vybratej položky.Added a border around the item that you select.
  • Zoradili položky vo vzostupnom a zostupnom poradí podľa názvu produktu.Sorted the items by product name in ascending and descending order.
  • Pridali ovládací prvok jazdca a textového vstupu na filtrovanie produktov podľa jednotiek na sklade a názvu produktu.Added a slider and an input text control to filter the products by units in stock and product name.