Vytvorenie podrobnej galérie v aplikácii plátna

Postupujte podľa pokynov a vytvorte podrobnú galériu v aplikácii na plátne na správu fiktívnych údajov v databáze Northwind Traders. Táto téma je súčasťou série, ktorá vysvetľuje, ako je možné v aplikácii vybudovať obchodnú aplikáciu na relačných údajoch Microsoft Dataverse. Najlepšie výsledky získate, keď preskúmate tieto témy v tomto poradí:

1. Vytvorenie galérie objednávky.
2. Vytvorte si súhrnný formulár.
3. Vytvorte podrobnú galériu (táto téma).

Predpoklady

Predtým, ako začnete túto tému, musíte nainštalovať databázu, ako je opísané vyššie v tejto téme. Potom musíte buď vytvoriť galériu objednávok a súhrnný formulár, alebo otvoriť Northwind Orders (Canvas) - začiatok 3. časti aplikáciu, ktorá už túto galériu a tento formulár obsahuje.

Vytvorte ďalšiu záhlavie

1. V hornej časti obrazovky vyberte ovládací prvok Štítok, ktorý funguje ako záhlavie, skopírujte ho stlačením Ctrl-C a potom ho vložte stlačením Ctrl-V:

   

2. Zmeňte veľkosť a premiestnite kópiu tak, aby sa zobrazila tesne pod súhrnným formulárom.

3. Odstráňte text z kópie jedným z týchto spôsobov:

   • Dvojitým kliknutím vyberte text a potom stlačte Odstrániť.
   • Nastavte vlastnosť Text označenia na prázdny reťazec ("").

   

Pridanie galérie

1. Vložte ovládací prvok Galéria s Prázdnym vertikálnym rozložením:

   

   V ľavom hornom rohu sa zobrazí nová galéria, v ktorej sa zobrazia podrobnosti objednávky.

2. Zatvorte vysúvacie dialógové okno zdroja údajov a potom zmeňte veľkosť a presuňte podrobnú galériu do pravého dolného rohu pod novým záhlavím:

   

3. Nastavte vlastnosť Položky ovládacieho prvku podrobností galérie na tento vzorec:

   Gallery1.Selected.'Order Details'
   

   

   Ak sa vyskytne chyba, potvrďte pomenovanie galérie objednávok Gallery1 (v table Stromový pohľad blízko ľavého okraja). Ak má táto galéria iné meno, premenujte ju na Gallery1.

   Práve ste prepojili tieto dve galérie. Keď používateľ vyberie objednávku v galérii objednávok, tento výber identifikuje záznam v tabuľke Objednávky. Ak táto objednávka obsahuje jednu alebo viac riadkových položiek, záznam v tabuľke Objednávky je prepojený s jedným alebo viacerými záznamami v tabuľke Podrobnosti objednávky a údaje z týchto záznamov sa zobrazia v galérii podrobností. Toto správanie odráža vzťah jeden k mnohým, ktorý bol pre vás vytvorený medzi tabuľkami Objednávky a Podrobnosti objednávky. Vzorec, ktorý ste určili ako „prechádzky“ v tomto vzťahu pomocou bodového zápisu:

   

Zobrazenie názvov výrobkov

1. V galérii podrobností stlačte možnosť Pridať položku z karty Vložiť a vyberte si šablónu galérie:

   

   Uistite sa, že ste vybrali šablónu galérie namiesto samotnej galérie. Ohraničovací rámček by mal byť mierne vnútri hranice galérie a pravdepodobne kratší ako výška galérie. Keď do tejto šablóny vložíte ovládacie prvky, opakujú sa pre každú položku v galérii.

2. Na karte Vložiť vložte štítok do galérie podrobností.

   Štítok by sa mal objaviť v galérii; ak nie, skúste to znova, ale pred vložením štítka nezabudnite vybrať šablónu galérie.

   

3. Nastavte vlastnosť Text nového štítku na tento vzorec:

   ThisItem.Product.'Product Name'
   

   Ak sa nezobrazí žiadny text, vyberte šípku pre Objednávka 0901 blízko spodnej časti galérie objednávok.

4. Zmeňte veľkosť štítku tak, aby sa zobrazil celý text:

   

   Tento výraz vychádza zo záznamu v tabuľke Podrobnosti objednávky. Záznam je vedený v ThisItem do tabuľky Produkty objednávky prostredníctvom vzťahu jeden k mnohým:

   

   Stĺpec Názov produktu (a ďalšie stĺpce, ktoré sa chystáte použiť) sa extrahujú:

   

Zobrazenie obrázkov výrobkov

1. Na karte Vložiť vložte ovládací prvok Obrázok do galérie podrobností:

   

2. Zmeňte veľkosť a premiestnite obrázok a štítok vedľa seba.

   Tip

   Pre jemnú kontrolu nad veľkosťou a pozíciou ovládacieho prvku začnite meniť jeho veľkosť alebo pohybovať bez stlačenia klávesu Alt a potom pokračujte v zmene veľkosti alebo premiestnení ovládacieho prvku pri súčasnom stlačení klávesu Alt:

   

3. Nastavte vlastnosť obrázka Obrázok na tento vzorec:

   ThisItem.Product.Picture
   

   Výraz opäť odkazuje na produkt, ktorý je priradený k tejto podrobnosti objednávky a extrahuje pole Obrázok na zobrazenie.

   

4. Znížte výšku šablóny galérie tak, aby sa súčasne objavil viac než jeden záznam Podrobností objednávky:

   

Zobraziť množstvo a náklad produktu

1. Na karte Vložiť, vložte ďalší štítok do galérie podrobností a potom zmeňte veľkosť a presuňte nový štítok napravo od informácií o produkte.

2. Nastavte vlastnosť Text nového štítku na tento výraz:

   ThisItem.Quantity
   

   Tento vzorec čerpá informácie priamo z tabuľky Podrobnosti objednávky (nie je potrebný žiadny vzťah).

   

3. Na karte Domov zmeňte zarovnanie tohto ovládacieho prvku na Vpravo:

   

4. Na karte Vložiť, vložte ďalší štítok do galérie podrobností a potom zmeňte veľkosť a presuňte štítok napravo od štítku množstva.

5. Nastavte vlastnosť Text nového štítku na tento vzorec:

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

   Ak nezadáte jazykovú značku ([$-en-US]), bude pridaná podľa vášho jazyka a oblasti. Ak používate inú jazykovú značku, budete chcieť odstrániť $ hneď za hranatou zátvorkou (]) a potom na túto pozíciu pridajte vlastný symbol meny.

   

6. Na karte Domov zmeňte zarovnanie tohto ovládacieho prvku na Vpravo:

   

7. Na karte Vložiť, vložte ďalší ovládací prvok štítka do galérie podrobností a potom zmeňte veľkosť a presuňte nový štítok napravo od jednotkovej ceny.

8. Nastavte vlastnosť Text nového štítku na tento vzorec:

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

   Znova, ak nezadáte jazykovú značku ([$-en-US]), bude pridaná podľa vášho jazyka a oblasti. Ak sa značka líši, namiesto symbolu budete chcieť použiť vlastný symbol meny $ hneď za hranatou zátvorkou (]).

   

9. Na karte Domov zmeňte zarovnanie tohto ovládacieho prvku na Vpravo:

   

   Zatiaľ ste dokončili pridávanie ovládacích prvkov do podrobnej galérie.

10. Na table Stromový pohľad, vyberte Screen1 aby sa zabezpečilo, že galéria podrobností už nebude vybraná.

Pridajte text k novému nadpisu

1. Na karte Vložiť vložte ďalší štítok:

   

2. Zmena veľkosti a presunutia nového štítka nad obrázky produktov v druhom záhlaví a zmena farby textu na bielu na karte Domov.

3. Dvakrát kliknite na text štítku a potom zadajte Výrobok:

   

4. Skopírujte a prilepte štítok produktu a potom zmeňte jeho veľkosť a presuňte kópiu nad stĺpec množstvo.

5. Dvakrát kliknite na text nového štítku a potom zadajte Množstvo:

   

6. Skopírujte a prilepte štítok množstvo a potom zmeňte jeho veľkosť a presuňte kópiu nad stĺpec jednotková cena.

7. Dvakrát kliknite na text nového štítku a potom zadajte Jednotková cena:

   

8. Skopírujte a prilepte štítok jednotkovej ceny a potom zmeňte jeho veľkosť a presuňte kópiu nad stĺpec kalkulačná cena.

9. Dvakrát kliknite na text nového štítku a potom zadajte Rozšírené:

   

Zobrazenie súčtov objednávky

1. Znížte výšku galérie podrobností, aby ste v dolnej časti obrazovky vytvorili priestor pre súčty objednávok:

   

2. Skopírujte a prilepte záhlavie do stredu obrazovky a potom presuňte kópiu do spodnej časti obrazovky:

   

3. Skopírujte a prilepte štítok produktu zo stredného záhlavia a potom presuňte kópiu do spodného záhlavia, hneď naľavo od stĺpca Množstvo.

4. Dvakrát kliknite na text nového štítku a potom zadajte tento text:
   Súčty objednávok:

   

5. Skopírujte a prilepte štítok súčty objednávok a potom zmeňte veľkosť a presuňte kópiu napravo od štítka súčty objednávok.

6. Nastavte vlastnosť Text nového štítku na tento vzorec:

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

   Tento vzorec zobrazuje upozornenie delegácie, môžete ho však ignorovať, pretože žiadna jednotlivá objednávka nebude obsahovať viac ako 500 produktov.

7. Na karte Domov nastavte zarovnanie textu nového štítka na Vpravo:

   

8. Skopírujte a prilepte ovládací prvok tohto štítku a potom zmeňte jeho veľkosť a presuňte kópiu nad stĺpec Rozšírené.

9. Nastavte vlastnosť kópie Text na tento vzorec:

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

   Tento vzorec zobrazuje upozornenie delegácie, môžete ho však ignorovať, pretože žiadna jednotlivá objednávka nebude obsahovať viac ako 500 produktov.

   

Pridajte priestor pre nové podrobnosti

V ľubovoľnej galérii môžete zobrazovať údaje, nemôžete ich však aktualizovať ani pridávať záznamy. V galérii podrobností pridáte oblasť, kde môže používateľ nakonfigurovať záznam v tabuľke Podrobnosti objednávky a vložte tento záznam do objednávky.

1. Znížte dostatočne výšku podrobnej galérie, aby ste pod touto galériou vytvorili priestor pre priestor na úpravu jednotlivých položiek.

   Na tomto mieste pridáte ovládacie prvky, aby používateľ mohol pridať podrobnosti objednávky:

   

2. Na karte Vložiť vložte štítok a potom zmeňte jeho veľkosť a presuňte ho pod podrobnú galériu.

   

3. Dvakrát kliknite na text nového štítku a potom stlačte Odstrániť.

4. Na karte Domov nastavte farbu Výplne nového štítku na LightBlue:

   

Vyberte produkt

1. Na karte Vložiť vyberte položku Ovládacie prvky > Rozbaľovacie pole:

   

   Ovládací prvok Rozbaľovacie pole sa zobrazí v ľavom hornom rohu.

2. V rozbaľovacom dialógovom okne vyberte zdroj údajov Produkty objednávky.

3. Na karte Vlastnosti pre rozbaľovacie pole stlačte možnosť Upraviť (vedľa možnosti Polia), čím sa otvorí tabla Údaje. Zaistite, aby Primárny texta SearchField boli nastavené na nwind_productname.

   Logický názov zadajte, pretože tabla Údaje v tomto prípade nepodporuje zobrazené názvy:

   

4. Zatvorte tablu Údaje.

5. Na karte Vlastnosti pri pravom okraji, posuňte zobrazenie nadol a vypnite možnosť Povoliť viacnásobný výber a zabezpečte, aby bola možnosť Povoliť vyhľadávanie aktivovaná:

   

6. Zmeňte veľkosť a presuňte rozbaľovacie zoznamy na svetlo modrú oblasť, priamo pod stĺpcom s názvom produktu v podrobnej galérii:

   

   V tomto rozbaľovacom poli používateľ určí záznam v tabuľke Produkt pre záznam Podrobnosti objednávky, ktorý aplikácia vytvorí.

7. Podržte stlačenú kláves Alt a vyberte šípku nadol rozbaľovacieho poľa.

   Tip

   Podržaním klávesu Alt môžete s ovládacími prvkami interagovať v Power Apps Studio bez otvorenia režimu ukážky.

8. V zozname produktov vyberte požadovaný produkt.

   

Pridať obrázok výrobku

1. Na karte Vložiť zadajte Média > Obraz:

   

   Ovládací prvok Obraz sa zobrazí v ľavom hornom rohu:

   

2. Zmena veľkosti a presunutie obrazu do svetlo modrej oblasti pod ostatnými obrázkami produktu a vedľa rozbaľovacieho poľa.

3. Nastavte vlastnosť entity Obrázok obrázka na:

   ComboBox1.Selected.Picture
   

   

   Používate rovnaký trik, aký ste použili na zobrazenie obrázka zamestnanca v súhrnnom formuláre. Vlastnosť Vybraný rozbaľovacieho poľa vracia celý záznam o produkte, ktorý používateľ vyberie, vrátane poľa Obrázok.

Pole Pridať množstvo

1. Na karte Vložiť vyberte položku Text > Textový vstup:

   

   Ovládací prvok Textové pole sa zobrazí v ľavom hornom rohu:

   

2. Zmeňte veľkosť a pole text-input presuňte napravo od rozbaľovacieho poľa pod stĺpec množstvo v galérii podrobností:

   

   Použitím tohto textového poľa zadá používateľ pole Množstvo záznamu Podrobnosti objednávky.

3. Nastavte vlastnosť Predvolené tohto ovládacieho prvku na "":

   

4. Na karte Domov nastavte zarovnanie textu tohto ovládacieho prvku na Vpravo:

   

Zobraziť jednotku a kalkulačné ceny

1. Na karte Vložiť vložte ovládací prvok Štítok.

   Označenie sa objaví v ľavom hornom rohu obrazovky:

   

2. Zmeňte veľkosť a presuňte označenie napravo od ovládača zadávania textu a nastavte označenie vlastnosti Text podľa tohto vzorca:

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

   

   Tento ovládací prvok zobrazuje Cenník z tabuľky Produkty objednávky. Táto hodnota určí pole Jednotkovú cenu v zázname Podrobnosti objednávky.

   Poznámka

   V prípade tohto scenára je hodnota určená len na čítanie, ale iné scenáre môžu vyžadovať, aby ju používateľ aplikácie upravil. V takom prípade použite ovládací prvok Zadávanie textu a nastaviť jeho Predvolenú vlastnosť na Cenník.

3. Na karte Domov nastavte zarovnanie textu označenia cenníka na Vpravo:

   

4. Skopírujte a prilepte označenie cenník a potom zmeňte veľkosť a presuňte kópiu napravo od označenia cenník.

5. Nastavte vlastnosť Text nového štítku na tento vzorec:

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

   

   Tento ovládací prvok zobrazuje kalkulačnú cenu na základe množstva, ktoré určil používateľ aplikácie, a katalógovej ceny produktu, ktorý si používateľ aplikácie vybral. Je to čisto informatívne pre používateľa aplikácie.

6. Dvakrát kliknite na ovládací prvok zadávania textu a zadajte číslo.

   Označenie Kalkulačná cena prepočítava, aby zobrazovala novú hodnotu:

   

Pridanie ikony Pridať

1. Na karte Vložiť zvoľte Ikony > Pridať:

   

   Ikona sa objaví v ľavom hornom rohu obrazovky.

   

2. Zmeňte veľkosť a presuňte túto ikonu na pravý okraj svetlo modrej oblasti a potom nastavte vlastnosť OnSelect ikona podľa tohto vzorca:

   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 )
   

   

   Všeobecne platí, že funkcia Záplata aktualizuje a vytvára záznamy a konkrétne argumenty v tomto vzorci určujú presné zmeny, ktoré funkcia vykoná.

   • Prvý argument určuje zdroj údajov (v tomto prípade tabuľku Podrobnosti objednávky), v ktorej bude funkcia aktualizovať alebo vytvárať záznam.

   • Druhý argument určuje, že funkcia vytvorí záznam s predvolenými hodnotami pre tabuľku Podrobnosti objednávky, pokiaľ nie je v treťom argumente uvedené inak.

   • Tretí argument uvádza, že štyri stĺpce v novom zázname budú obsahovať hodnoty od používateľa.

     • Stĺpec Objednávka bude obsahovať číslo objednávky, ktorú používateľ vybral v galérii objednávok.
     • Stĺpec Výrobok bude obsahovať názov produktu, ktorý používateľ vybral v rozbaľovacom zozname, ktorý zobrazuje produkty.
     • Stĺpec Množstvo bude obsahovať hodnotu, ktorú používateľ zadal v poli na zadávanie textu.
     • Stĺpec Jednotková cena bude obsahovať katalógovú cenu produktu, ktorú používateľ vybral pre podrobnosti tejto objednávky.

   Poznámka

   Môžete vytvoriť vzorce, ktoré používajú údaje z ľubovoľného stĺpca (v tabuľke Produkty objednávky) pre akýkoľvek produkt, ktorý si používateľ aplikácie vyberie v rozbaľovacom poli, ktoré zobrazuje produkty. Keď používateľ vyberie záznam v tabuľke Produkty objednávky, nielenže sa v tomto rozbaľovacom poli zobrazí názov produktu, ale v označení sa aj zobrazí jednotková cena produktu. Každá hodnota vyhľadávania v aplikácii na plátne odkazuje na celý záznam, nielen na primárny kľúč.

   Funkcia Obnoviť zaisťuje, že tabuľka Objednávky odráža záznam, ktorý ste práve pridali do tabuľky Podrobnosti objednávky. Funkcia Reset vymaže údaje o produkte, množstve a jednotkovej cene, aby používateľ mohol ľahšie vytvoriť ďalší detail objednávky pre tú istú objednávku.

3. Stlačte kláves F5 a potom vyberte ikonu Pridať.

   Objednávka odráža informácie, ktoré ste zadali:

   

4. (voliteľné) Pridajte k objednávke ďalšiu položku.

5. Stlačením tlačidla Esc zatvorte režim Ukážky.

Odstráňte podrobnosti objednávky

1. V strede obrazovky vyberte šablónu galérie podrobností:

   

2. Na karte Vložiť zvoľte možnosť Ikony > Kôš:

   

   Ikona Kôš sa objaví v ľavom hornom rohu obrazovky šablóny galérie.

   

3. Zmeňte veľkosť a presuňte ikonu Kôš na pravú stranu šablóny galérie podrobností a potom nastavte vlastnosť OnSelect ikony podľa tohto vzorca:

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

   

   V čase písania tohto textu nemôžete odstrániť záznam priamo zo vzťahu, takže funkcia Odstrániť odstráni záznam priamo z príslušnej tabuľky. ThisItem určuje záznam, ktorý sa má odstrániť, prevzatý z toho istého záznamu v galérii podrobností, kde sa zobrazuje ikona Kôš.

   Operácia opäť využíva údaje vo vyrovnávacej pamäti, takže funkcia Obnoviť informuje tabuľku Objednávky, že aplikácia zmenila jednu z jej súvisiacich tabuliek.

4. Stlačením klávesu F5 otvorte režim ukážky a potom vedľa každého z nich vyberte ikonu koša každého záznamu Podrobnosti objednávky, ktorý chcete z objednávky odstrániť.

5. Skúste z objednávok pridať a odstrániť rôzne podrobnosti o objednávke:

   

Záver

Na rekapituláciu ste pridali ďalšiu galériu, ktorá zobrazuje podrobnosti o objednávke a ovládacie prvky pridávajúce a odstraňujúce podrobnosti objednávky v aplikácii. Použili ste tieto prvky:

• Druhý ovládací prvok galérie spojený s galériou objednávok prostredníctvom vzťahu jeden ku mnohým: Gallery2.Items = Gallery1.Selected.'Order Details'
• Vzťah typu mnohé k jednému z tabuľky Podrobnosti objednávky do tabuľky Produkty objednávky: ThisItem.Product.'Product Name' a ThisItem.Product.Picture
• Funkcia Výbery na získanie zoznamu produktov: Choices( 'Order Details'.Product' )
• Vlastnosť Vybrané rozbaľovacieho zoznamu ako kompletný záznam súvisiaci s viacerými používateľmi: ComboBox1.Selected.Picture a ComboBox1.Selected.'List Price'
• Funkcia Záplata na vytvorenie záznamu Podrobnosti objednávky: Patch( 'Order Details', Defaults( 'Order Details' ), ... )
• Funkcia Odstrániť na odstránenie záznamu Podrobnosti objednávky: Remove( 'Order Details', ThisItem )

Táto séria tém predstavuje rýchly návod na použitie vzťahov Dataverse a volieb v aplikácii plátna na vzdelávacie účely. Predtým, ako uvoľníte akúkoľvek aplikáciu pre produkciu, mali by ste zvážiť overenie poľa, spracovanie chýb a mnoho ďalších faktorov.

Poznámka

Môžete nás informovať o svojich voľbách jazyka pre dokumentáciu? Absolvujte krátky prieskum. (upozorňujeme, že tento prieskum je v angličtine)

Prieskum bude trvať približne sedem minút. Nezhromažďujú sa žiadne osobné údaje (vyhlásenie o používaní osobných údajov).