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

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í.

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í.

Zobrazení dat v galerii

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:

      

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

      

   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:

      

      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á.

   

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

   

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

   

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:

   

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

   

   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:

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.

Zvýraznění vybrané položky galerie

1. Vyberte v galerii jakoukoli položku kromě první. Zobrazí se ikona pro úpravy (v levém horním rohu). Vyberte ikonu pro ú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:
   

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 , kde si svůj výtvor prohlédnete a otestujete.

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

Řazení a filtrování položek v galerii

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:

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

   Sort(Inventory; ProductName; Descending)

Přidání ovládacího prvku posuvníku a filtrování položek v galerii

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:
   

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“:
   

Tipy a triky

• Kdykoli můžete vybrat tlačítko 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.