Vytvoření galerie podrobností v aplikaci plátna

Postupujte podle podrobných pokynů a vytvořte galerii podrobností v aplikaci plátna pro správu fiktivních dat v databázi Northwind Traders. Toto téma je součástí série, která vysvětluje, jak vytvořit obchodní aplikaci na relačních datech v Microsoft Dataverse. Chcete-li dosáhnout nejlepších výsledků, prozkoumejte tato témata v tomto pořadí:

1. Vytvoření galerie objednávek.
2. Vytvořit souhrnný formulář.
3. Vytvořte galerii podrobností (toto téma).

Požadavky

Než začnete tonto téma, musíte nainstalovat databázi, jak je popsáno výše v tomto tématu. Poté musíte buď vytvořit galerii objednávek a souhrnný formulář, nebo otevřít aplikaci Northwind Orders (Canvas) - Begin Part 3, která již tuto galerii a tento formulář obsahuje.

Vytvořte další záhlaví

1. V horní části obrazovky vyberte ovládací prvek Popisek, který funguje jako záhlaví, zkopírujte jej stisknutím Ctrl-C a poté jej vložte stisknutím Ctrl-V:

   

2. Změňte velikost a přesuňte kopii tak, aby se objevila těsně pod souhrnným formulářem.

3. Odstraňte text z kopie některým z těchto způsobů:

   • Dvakrát klikněte na text a vyberte jej a poté stiskněte Odstranit.
   • Nastavte vlastnost popisku Text na prázdný řetězec („“).

   

Přidání galerie

1. Vložte ovládací prvek Galerie s rozložením Prázdná svislá:

   

   V levém horním rohu se zobrazí nová galerie, která zobrazí podrobnosti objednávky.

2. Zavřete dialogové okno zdroj dat a poté změňte velikost a přesuňte podrobnou galerii do pravého dolního rohu pod nové záhlaví:

   

3. Nastavte vlastnost Položky galerie podrobností na tento vzorec:

   Gallery1.Selected.'Order Details'
   

   

   Pokud se objeví chyba, potvrďte, že je galerie objednávek pojmenována Gallery1 (ve Stromovém zobrazení poblíž levého okraje). Pokud má tato galerie jiný název, přejmenujte ji na Gallery1.

   Právě jste propojili obě galerie. Když uživatel vybere objednávku v galerii objednávek, tento výběr identifikuje záznam v tabulce Objednávky. Pokud tato objednávka obsahuje jednu nebo více řádkových položek, je záznam v tabulce Objednávky propojen s jedním nebo více záznamy v tabulce Podrobnosti objednávky a data z těchto záznamů se zobrazí v galerii podrobností. Toto chování odráží vztah 1:N, který byl vytvořen mezi tabulkami Objednávky a Podrobnosti objednávky. Vzorec, který jste určili, „prochází“ tento vztah pomocí tečkové notace:

   

Zobrazení názvů produktů

1. V galerii podrobností vyberte Přidejte položku na kartě Vložit, chcete-li vybrat šablonu galerie:

   

   Zkontrolujte, zda jste místo samotné galerie vybrali šablonu galerie. Ohraničovací rámeček by měl být mírně uvnitř hranice galerie a pravděpodobně kratší než výška galerie. Když do této šablony vložíte ovládací prvky, opakují se pro každou položku v galerii.

2. Na kartě Vložit vložte popisek do galerie podrobností.

   Popisek by se měl objevit v galerii; pokud tomu tak není, zkuste to znovu, ale před vložením popisku nezapomeňte vybrat šablonu galerie.

   

3. Nastavte vlastnost Text nového popisku na tento vzorec:

   ThisItem.Product.'Product Name'
   

   Pokud se neobjeví žádný text, vyberte šipku pro Objednávka 0901 v dolní části galerie objednávek.

4. Změňte velikost popisku tak, aby se zobrazil celý text:

   

   Tento výraz prochází záznam v tabulce Podrobnosti objednávky. Záznam je uchováván v prvku ThisItem a předán do tabulky Produkty v objednávkách prostřednictvím vztahu N:1.

   

   Dojde k extrakci sloupce Název výrobku (a dalších sloupců, které použijete):

   

Zobrazení obrázků produktů

1. Na kartě Vložit vložte ovládací prvek Obrázek do galerie podrobností:

   

2. Změňte velikost a přesuňte obrázek a popisek vedle sebe.

   Tip

   Pro podrobnou kontrolu nad velikostí a pozicí ovládacího prvku začněte měnit jeho velikost nebo jej přesunovat bez stisknutí klávesy Alt a poté pokračujte ve změně velikosti nebo přesunutí ovládacího prvku, zatímco držíte stisknutou klávesu Alt:

   

3. Vlastnost obrázku Image nastavte na tento vzorec:

   ThisItem.Product.Picture
   

   Výraz opět odkazuje na produkt, který je spojen s tímto detailem objednávky a extrahující pole Obrázek k zobrazení.

   

4. Snižte výšku šablony galerie tak, aby se najednou zobrazila více než jedna Podrobnost objednávky najednou:

   

Zobrazit množství a cenu produktu

1. Na kartě Vložit vložte další popisek do galerie podrobností a poté změňte velikost a přesuňte nový popisek vpravo od informací o produktu.

2. Nastavte vlastnost Text nového popisku na tento výraz:

   ThisItem.Quantity
   

   Tento vzorec získává informace přímo z tabulky Podrobnosti objednávky (není vyžadován žádný vztah).

   

3. Na kartě Domů změňte zarovnání tohoto ovládacího prvku do Prava:

   

4. Na kartě Vložit vložte další popisek do galerie podrobností a poté změňte velikost a přesuňte nový popisek vpravo od popisku množství.

5. Nastavte vlastnost Text nového popisku na tento vzorec:

   Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
   

   Pokud nezadáte jazykovou značku ([$-en-US]), bude přidán podle vašeho jazyka a oblasti. Pokud používáte jinou jazykovou značku, budete chtít odebrat $ těsně za koncovou hranatou závorkou (]) a poté do této pozice přidejte svůj vlastní symbol měny.

   

6. Na kartě Domů změňte zarovnání tohoto ovládacího prvku do Prava:

   

7. Na kartě Vložit vložte další ovládací prvek Popisek do galerie podrobností a poté změňte velikost a přesuňte nový popisek vpravo od jednotkové ceny.

8. Nastavte vlastnost Text nového popisku na tento vzorec:

   Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
   

   Opět, pokud nezadáte jazykovou značku ([$-en-US]), bude přidán podle vašeho jazyka a oblasti. Pokud je značka jiná, budete chtít místo symbolu použít svůj vlastní symbol měny $ těsně za koncovou hranatou závorkou (]).

   

9. Na kartě Domů změňte zarovnání tohoto ovládacího prvku do Prava:

   

   Prozatím jste přidali ovládací prvky do galerie podrobností.

10. V podokně Stromové zobrazení vyberte Screen1, abyste zajistili, že galerie podrobností již nebude vybrána.

Přidejte text do nového záhlaví

1. Na kartě Vložit vložte na obrazovku další popisek:

   

2. Změňte velikost a přesuňte nový štítek nad obrázky produktů ve druhém záhlaví a poté změňte barvu textu na bílou na kartě Domů.

3. Dvakrát klikněte na text popisku a potom zadejte Produkt:

   

4. Zkopírujte a vložte popisek produktu a poté změňte velikost a přesuňte kopii nad sloupec množství.

5. Dvakrát klikněte na text nového popisku a potom zadejte Množství:

   

6. Zkopírujte a vložte popisek množství a poté změňte velikost a přesuňte kopii nad sloupec jednotková cena.

7. Dvakrát klikněte na text nového popisku a potom zadejte Jednotková cena:

   

8. Zkopírujte a vložte popisek jednotkové ceny a poté změňte velikost a přesuňte kopii nad sloupec rozšířené ceny.

9. Dvakrát klikněte na text nového popisku a potom zadejte Rozšířený:

   

Zobrazení celkových cen objednávek

1. Snižte výšku galerie podrobností a vytvořte tak prostor pro celkové ceny objednávek ve spodní části obrazovky:

   

2. Zkopírujte a vložte záhlaví do středu obrazovky a potom kopii přesuňte do dolní části obrazovky:

   

3. Zkopírujte a vložte štítek produktu ze středního záhlaví a pak kopii přesuňte do dolního záhlaví, nalevo od sloupce Množství.

4. Dvakrát klikněte na text nového popisku a potom zadejte tento text:
   Celkové ceny objednávek:

   

5. Zkopírujte a vložte popisek celkových cen objednávek a poté změňte velikost a přesuňte kopii vpravo od popisku celkových cen objednávek.

6. Nastavte vlastnost Text nového popisku na tento vzorec:

   Sum( Gallery1.Selected.'Order Details', Quantity )
   

   Tento vzorec zobrazuje upozornění delegování, ale můžete jej ignorovat, protože žádná jednotlivá objednávka nebude obsahovat více než 500 produktů.

7. Na kartě Domů nastavte zarovnání textu nového štítku na Vpravo:

   

8. Zkopírujte a vložte ovládací prver tohoto popisku a poté změňte velikost a přesuňte kopii pod sloupec Rozšířené.

9. Nastavte vlastnost Text kopie na tento vzorec:

   Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
   

   Tento vzorec zobrazuje upozornění delegování, ale můžete jej ignorovat, protože žádná jednotlivá objednávka nebude obsahovat více než 500 produktů.

   

Přidejte prostor pro nové podrobnosti

V jakékoli galerii můžete zobrazit data, ale nemůžete je aktualizovat ani přidávat záznamy. Pod galerii podrobností přidáte oblast, kde může uživatel konfigurovat záznam v tabulce Podrobnosti objednávky a vložit tento záznam do objednávky.

1. Zmenšete výšku galerie podrobností natolik, abyste pod touto galerií vytvořili prostor pro editační prostor pro jednu položku.

   Na tomto místě přidáte ovládací prvky, aby uživatel mohl přidat podrobnosti objednávky:

   

2. Na kartě Vložit vložte štítek a poté změňte jeho velikost a přesuňte jej do galerie podrobností.

   

3. Dvakrát klikněte na text nového popisku a potom stiskněte Odstranit.

4. Na kartě Domů nastavte barvu Výplně nového štítku na LightBlue:

   

Vyberte produkt

1. Na kartě Vložit vyberte Ovládací prvky > Kombinované pole:

   

   Ovládací prvek Kombinované pole se zobrazí v levém horním rohu.

2. V rozevíracím dialogu vyberte zdroj dat Produkty v objednávkách.

3. Na kartě Vlastnosti pole se seznamem vyberte Upravit (vedle Pole) pro otevření podokna Data. Zajistěte, aby Primární text a SearchField byly nastaveny na nwind_productname.

   Logický název zadáte, protože podokno Data v tomto případě zatím nepodporuje zobrazované názvy:

   

4. Zavře podokno Data.

5. Na kartě Vlastnosti poblíž pravého okraje přejděte dolů a vypněte Povolit vícenásobný výběr a zajistěte zapnutí Povolit vyhledávání:

   

6. Změňte velikost a přesuňte pole se seznamem do světle modré oblasti, těsně pod sloupcem s názvem produktu v galerii podrobností:

   

   V tomto poli se seznamem uživatel určí záznam v tabulce Produkty pro záznam tabulky Podrobnosti objednávky, který aplikace vytvoří.

7. Podržte klávesu Alt a vyberte šipku dolů k otevření šipku dolů Kombinované pole.

   Tip

   Podržením klávesy Alt můžete pracovat s ovládacími prvky v Power Apps Studio bez otevření režimu náhledu.

8. V zobrazeném seznamu produktů vyberte požadovaný produkt.

   

Přidejte obrázek produktu

1. Na kartě Vložení vyberte Media > Obrázek:

   

   Ovládací prvek Obrázek se zobrazí v levém horním rohu:

   

2. Změňte velikost a přesuňte obrázek do světle modré oblasti pod ostatními obrázky produktu a vedle pole se seznamem.

3. Nastavte vlastnost Image obrázku na:

   ComboBox1.Selected.Picture
   

   

   Používáte stejný trik, jaký jste použili k zobrazení obrázku zaměstnance v souhrnném formuláři. Vlastnost Vybraný pole se seznamem vrací celý záznam jakéhokoli produktu, který uživatel vybere, včetně pole Obrázek.

Přidejte pole množství

1. Na kartě Vložit vyberte Text > Textové zadání:

   

   Ovládací prvek Textové zadání se zobrazí v levém horním rohu:

   

2. Změňte velikost a přesuňte pole textového vstupu napravo od pole se seznamem pod sloupec množství v galerii podrobností:

   

   Pomocí tohoto pole textového vstupu zadá uživatel pole Množství záznamu Podrobnosti objednávky.

3. Nastavte vlastnost Výchozí tohoto ovládacího prvku na "":

   

4. Na kartě Domů nastavte zarovnání textu tohoto ovládacího prvku Vpravo:

   

Zobrazit jednotkové a rozšířené ceny

1. Na kartě Vložit vložte ovládací prvek Popisek.

   Popisek se objeví v levém horním rohu obrazovky:

   

2. Změňte velikost a přesuňte popisek vpravo od ovládacího prvku Textové zadání a nastavte vlastnost popisku Text podle tohoto vzorce:

   Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
   

   

   Tento ovládací prvek ukazuje Ceník z tabulky Produkty v objednávkách. Tato hodnota bude určovat pole Jednotková cena v záznamu Podrobnosti objednávky.

   Poznámka

   V tomto scénáři je hodnota určena pouze pro čtení, ale jiné scénáře mohou pro uživatele aplikace vyžadovat její úpravu. V takovém případě použijte ovládací prvek Textové zadání a nastavte jeho vlastnost Výchozí na Ceníkovou cenu.

3. Na kartě Domů nastavte zarovnání textu popisku ceníkových cen Vpravo:

   

4. Zkopírujte a vložte popisek ceníkových cen objednávek a poté změňte velikost a přesuňte kopii vpravo od popisku ceníkových cen.

5. Nastavte vlastnost Text nového popisku na tento vzorec:

   Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
   

   

   Tento ovládací prvek zobrazuje rozšířenou cenu na základě množství, které určil uživatel aplikace, a seznamu cen produktu, který uživatel aplikace vybral. Je to čistě informativní pro uživatele aplikace.

6. Dvakrát klikněte na ovládací prvek Textové zadání a zadejte číslo.

   Popisek Rozšířené ceny přepočítá tak, aby ukazovala novou hodnotu:

   

Přidat ikonu Přidat

1. Na kartě Vložení vyberte Ikony > Přidat:

   

   Ikona se objeví v levém horním rohu obrazovky.

   

2. Změňte velikost a přesuňte tuto ikonu na pravý okraj světle modré oblasti a poté nastavte vlastnost ikony OnSelect podle tohoto vzorce:

   Patch( 'Order Details',
       Defaults('Order Details'),
       {
           Order: Gallery1.Selected,
           Product: ComboBox1.Selected,
           Quantity: Value(TextInput1.Text),
           'Unit Price': ComboBox1.Selected.'List Price'
       }
   );
   Refresh( Orders );
   Reset( ComboBox1 );
   Reset( TextInput1 )
   

   

   Obecně platí, že funkce Patch aktualizuje a vytváří záznamy a konkrétní argumenty v tomto vzorci určují přesné změny, které funkce provede.

   • První argument určuje zdroj dat (v tomto případě tabulku Podrobnosti objednávky), ve kterém funkce aktualizuje nebo vytvoří záznam.

   • Druhý argument určuje, že funkce vytvoří záznam s výchozími hodnotami pro tabulku Podrobnosti objednávky, pokud není ve třetím argumentu uvedeno jinak.

   • Třetí argument uvádí, že čtyři sloupce v novém záznamu budou obsahovat hodnoty od uživatele.

     • Sloupec Objednat bude obsahovat číslo objednávky, kterou uživatel vybral v galerii objednávek.
     • Sloupec Produkt bude obsahovat název produktu, který uživatel vybral v rozbalovacím seznamu, který zobrazuje produkty.
     • Sloupec Množství bude obsahovat hodnotu, kterou uživatel zadal v poli pro zadávání textu.
     • Sloupec Jednotková cena bude obsahovat ceníkovou cenu produktu, který uživatel vybral pro tento detail objednávky.

   Poznámka

   Můžete vytvářet vzorce, které používají data z libovolného sloupce (v tabulce Produkty v objednávkách) pro libovolný produkt, který uživatel aplikace vybere v rozbalovacím seznamu zobrazujícím produkty. Když uživatel vybere záznam v tabulce Produkty v objednávkách, zobrazí se nejen název produktu v tomto poli se seznamem, ale na popisku se zobrazí i jednotková cena produktu. Každá hodnota vyhledávání v aplikaci plátna odkazuje na celý záznam, nejen na primární klíč.

   Funkce Refresh zajišťuje, že tabulka Objednávky zareaguje na záznam, který jste právě přidali do tabulky Podrobnosti objednávky. Funkce Reset vymaže údaje o produktu, množství a jednotkové ceně, aby uživatel mohl snadněji vytvořit další podrobnosti objednávky pro stejnou objednávku.

3. Stiskněte klávesu F5 a poté vyberte ikonu Přidat.

   Objednávka odráží informace, které jste zadali:

   

4. (volitelné) Přidejte do objednávky další položku.

5. Stisknutím klávesy Esc ukončíte režim náhledu.

Odebrat detail objednávky

1. Ve středu obrazovky vyberte šablonu galerie podrobností:

   

2. Na kartě Vložení vyberte Ikony > Koš:

   

   Ikona Koš se objeví v levém horním rohu šablony galerie.

   

3. Změňte velikost a přesuňte ikonu Koš na pravou stranu šablony galerie podrobností a poté nastavte vlastnost ikony OnSelect podle tohoto vzorce:

   Remove( 'Order Details', ThisItem ); Refresh( Orders )
   

   

   V době vzniku tohoto článku nemůžete odebrat záznam přímo ze vztahu, takže funkce Remove odebere záznam přímo z příslušné tabulky. ThisItem určuje záznam, který má být odebrán, převzatý ze stejného záznamu v galerii podrobností, kde se objeví ikona Koš.

   Operace opět používá data v mezipaměti, takže funkce Refresh informuje tabulku Objednávky o tom, že aplikace změnila jednu ze souvisejících tabulek.

4. Stisknutím klávesy F5 otevřete režim náhledu a poté vyberte ikonu koše vedle každého záznamu Podrobnosti objednávky, který chcete odstranit z objednávky.

5. Zkuste přidat a odebrat různé podrobnosti o objednávce:

   

Závěr

Shrnutí: Přidali jste další galerii, která zobrazuje podrobnosti objednávky a ovládací prvky přidávání a odebírání podrobností objednávky v aplikaci. Použili jste tyto prvky:

• Druhý ovládací prvek galerie spojený s galerií objednávek prostřednictvím vztahu 1:N: Gallery2.Items = Gallery1.Selected.'Order Details'
• Vztah N:1 mezi tabulkou Podrobnosti objednávky a tabulkou Produkty v objednávkách: ThisItem.Product.'Product Name' a ThisItem.Product.Picture
• Funkce Volby pro získání seznamu produktů: Choices( 'Order Details'.Product' )
• Vlastnost Vybraný pole se seznamem jako úplný záznam typu N:1: ComboBox1.Selected.Picture a ComboBox1.Selected.'List Price'
• Funkce Patch k vytvoření záznamu Podrobnosti objednávky: Patch( 'Order Details', Defaults( 'Order Details' ), ... )
• Funkce Remove k odstranění záznamu Podrobnosti objednávky: Remove( 'Order Details', ThisItem )

Tato řada témat byla rychlým návodem k použití vztahů a voleb Dataverse v aplikaci plátna pro vzdělávací účely. Před uvolněním jakékoli aplikace do produkce byste měli zvážit ověření pole, zpracování chyb a mnoho dalších faktorů.

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ů).