Sdílet prostřednictvím

Zobrazení, třídění a filtrování dat v galerii aplikace plátna

  • Článek

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.

V Power Apps můžete pomocí galerie zobrazit několik souvisejících položek podobně jako v katalogu. Galerie se skvěle hodí k zobrazení informací o produktech, jako jsou názvy a ceny. V tomto tématu vytvoříme galerii a pomocí funkcí jako v Excelu umožníme řazení a filtrování informací. Při výběru nějaké položky se kolem ní také zobrazí ohraničení.

Poznámka

V tomto tématu se používá aplikace pro tablet. Můžete použít aplikaci pro telefon, ale budete muset změnit velikost některých ovládacích prvků.

Požadavky

  • Registrujte se do Power Apps, a potom se přihlaste se stejnými přihlašovacími údaji, jaké jste použili při registraci.
  • Vytvořte aplikaci pro tablet ze šablony, z dat nebo od začátku.
  • Tady si můžete přečíst, jak se konfiguruje ovládací prvek.
  • V tomto postupu se pro ukázková vstupní data používá soubor CreateFirstApp obsahující obrázky .jpg. Tento zazipovaný soubor obsahuje soubor XML, který můžete převést na soubor Excelu. Power Apps soubory v tomto souboru .zip automaticky přečte a úspěšně naimportuje. Můžete si stáhnout a použít tato ukázková data nebo můžete naimportovat svoje vlastní.

  1. Pomocí ukázkových dat vytvořte kolekci s názvem Inventory. Postup je následující:

    1. Na kartě Vložit vyberte Ovládací prvky a pak vyberte Importovat:

      Vložte ovládací prvek

    2. Nastavte vlastnost OnSelect ovládacího prvku importu na následující vzorec:
      Collect(Inventory, Import1.Data)

      Vlastnost OnSelect

    3. Výběrem tlačítka Import dat otevřete Průzkumníka Windows. Vyberte soubor CreateFirstApp.zip a pak vyberte Otevřít.

    4. V nabídce Soubor vyberte Kolekce. Zobrazí se kolekce Inventory s daty, která jste naimportovali:

      Soubor – kolekce

      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.

      Poznámka

      Ovládací prvek importu se používá k importu dat excelového typu a vytvoření kolekce. Tento ovládací prvek naimportuje data při vytváření a zobrazení náhledu aplikace. Při publikování aplikace ovládací prvek importu v současnosti data nenaimportuje.

  2. Výběrem černé šipky se vraťte do návrháře.

  3. Na kartě Vložit klikněte nebo klepněte na Galerie a pak klikněte nebo klepněte na Vodorovná.

    Galerie – vodorovná

  4. V pravém podokně klikněte nebo klepněte na možnost překryvného názvu a titulku:

    Rozložení

  5. Nastavte vlastnost Items této galerie na Inventory:

    Rozložení galerie

  6. Přejmenujte galerii na ProductGallery a přemístěte ji, aby nepřekrývala ostatní ovládací prvky. Změňte velikost galerie tak, aby zobrazovala tři produkty:

    Přejmenování galerie

  7. U první položky galerie vyberte dolní popisek:

    Aplikace s galerií

    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.

  8. Nastavte vlastnost Text tohoto popisku na následující výraz:
    ThisItem.UnitsInStock

    Když to uděláte, zobrazí popisek jednotky v zásobách pro jednotlivé produkty:

Zásoby každého produktu

Poznámka

Vlastnost Text horního popisku je standardně nastavená na ThisItem.ProductName. Můžete ji změnit na jakoukoli jinou položku v kolekci. Pokud má kolekce například pole ProductDescription nebo Price, můžete popisek nastavit na ThisItem.ProductDescription nebo ThisItem.Price.

Pomocí tohoto postupu jste do kolekce naimportovali data obsahující obrázky .jpg. Pak jste přidali galerii, která tato data zobrazuje, a nakonfigurovali popisek tak, aby zobrazoval jednotky v zásobách pro jednotlivé produkty.

  1. Vyberte v galerii jakoukoli položku kromě první. Zobrazí se ikona pro úpravy (v levém horním rohu). Vyberte ikonu pro úpravy:
    Úpravy

  2. Na kartě Vložit vyberte Obrazce a pak vyberte pravoúhelník. Ve všech položkách galerie se zobrazí modrý plný pravoúhelník.

  3. Na kartě Domů vyberte Vyplnit a pak vyberte Bez výplně.

  4. Vyberte Ohraničení, vyberte Styl ohraničení a pak vyberte plnou čáru.

  5. Znovu vyberte Ohraničení a nastavte tloušťku na 3. Upravte velikost pravoúhelníku tak, aby ohraničoval položku galerie. Položky v galerii teď mají modré ohraničení a měly by vypadat podobně jako na následujícím obrázku:
    Vyberte ohraničení

  6. Na kartě Obrazec vyberte Viditelný a do řádku vzorců zadejte následující vzorec:

    If(ThisItem.IsSelected, true)

    Aktuální výběr v galerii se ohraničí modrým čtyřúhelníkem. Výběrem několika položek galerie ověřte, že se modrý čtyřúhelník zobrazí kolem každé vybrané položky. Nezapomeňte, že můžete také otevřít Náhled Tlačítko Náhled, kde si svůj výtvor prohlédnete a otestujete.

Tip

Vyberte čtyřúhelník, vyberte Změnit pořadí na kartě Domů a pak vyberte Přenést do pozadí. Pomocí této funkce můžete položku galerie vybrat, aniž by ohraničení něco překrývalo.

Tímto postupem jste kolem aktuálního výběru v galerii přidali ohraničení.

V následujícím postupu seřadíme položky galerie ve vzestupném a sestupném pořadí. Přidáme také ovládací prvek Posuvník pro „filtrování“ položek galerie podle zvolených jednotek v zásobách.

Řazení ve vzestupném nebo sestupném pořadí

  1. Vyberte v galerii jakoukoli položku kromě první.

  2. Vlastnost Items je aktuálně nastavená na Inventory (název vaší kolekce). Změňte ji takto:

    Sort(Inventory; ProductName)

    Když to uděláte, seřadí se položky v galerii ve vzestupném pořadí podle názvu produktu: Seřazená galerie

    Vyzkoušejte sestupné pořadí. Nastavte vlastnost Items této galerie na následující vzorec:

    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.

  2. Nakonfigurujte posuvník tak, aby ho uživatelé nemohli nastavit na hodnotu mimo rozsah jednotek v zásobách:

    1. Na kartě Obsah vyberte Min a zadejte následující výraz:
      Min(Inventory, UnitsInStock)
    2. Na kartě Obsah vyberte Max a zadejte následující výraz:
      Max(Inventory, UnitsInStock)

  3. Vyberte v galerii jakoukoli položku kromě první. Nastavte vlastnost Items této galerie na následující výraz:
    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. Při nastavení posuvníku se v galerii zobrazí jenom produkty s menším množstvím než je zvolená hodnota:
    Náhled galerie s hodnotou posuvníku

Teď přidáme filtr:

  1. Vraťte se do návrháře.
  2. Na kartě Vložit vyberte Text, vyberte Textové zadání a přejmenujte tento nový ovládací prvek na NameFilter. Přemístěte ovládací prvek textu pod posuvník.
  3. Nastavte vlastnost Items této galerie na následující výraz:
    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. 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“:
    Posuvník náhledu s 30

Tipy a triky

  • Kdykoli můžete vybrat tlačítko náhledu (Obrázek tlačítka náhledu), abyste viděli, co jste vytvořili, a otestovali to.
  • Při návrhu aplikace můžete velikost a umístění ovládacích prvků měnit přetahováním.
  • Stisknutím klávesy ESC nebo výběrem symbolu X okno náhledu zavřete.
  • Když při používání galerie vyberete první položku v galerii, změníte tím všechny položky v galerii. První položku například vyberte, pokud chcete všechny položky v galerii doplnit o ohraničení.
  • Pokud chcete aktualizovat vlastnosti galerie, vyberte v galerii libovolnou položku kromě první. 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).

Co jste se naučili

V tomto tématu jste:

  • Vytvořili kolekci, naimportovali do této kolekce data obsahující obrázky .jpg a zobrazili v galerii tato data.
  • Pod jednotlivými obrázky v galerii nakonfigurovali popisek, který zobrazuje jednotky v zásobách pro danou položku.
  • Přidali ohraničení kolem vybrané položky.
  • Seřadili položky ve vzestupném a sestupném pořadí podle názvu produktu.
  • Přidali ovládací prvek Posuvník a textového zadání pro filtrování produktů podle jednotek v zásobách a názvu produktu.

Poznámka

Můžete nám sdělit, jaké máte jazykové preference pro dokumentaci? Zúčastněte se krátkého průzkumu. (upozorňujeme, že tento průzkum je v angličtině)

Průzkum bude trvat asi sedm minut. Nejsou shromažďovány žádné osobní údaje (prohlášení o zásadách ochrany osobních údajů).