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. Vytvorte galériu objednávok.
2. Vytvorte súhrnný formulár.
3. Vytvorte galériu detailov (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ť aplikáciu Objednávky Northwind (Canvas) – Začiatok 3. časti , ktorá už túto galériu a formulár obsahuje.

Vytvorte ďalšiu záhlavie

1. V hornej časti obrazovky vyberte ovládací prvok Štítok , ktorý slúži ako záhlavie, skopírujte ho stlačením klávesov Ctrl-C a potom ho vložte stlačením klávesov 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 návestia 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 galérie podrobností na tento vzorec:

   Gallery1.Selected.'Order Details'
   

   

   Ak sa zobrazí chyba, potvrďte, že galéria objednávok má názov Galéria1 (v table Stromové zobrazenie pri ľavom okraji). Ak má táto galéria iný názov, premenujte ju na Galéria1.

   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 daná objednávka obsahuje jednu alebo viacero 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 typu jeden k mnohým, ktorý bol 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í vyberte možnosť Pridať položku na karte Vložiť a vyberte š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ítka na tento vzorec:

   ThisItem.Product.'Product Name'
   

   Ak sa nezobrazí žiadny text, vyberte šípku pre Objednávku 0901 v dolnej časti galérie objednávok.

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

   

   Tento výraz prechádza zo záznamu v tabuľke Podrobnosti objednávky . Záznam je uchovávaný v tabuľke ThisItem a presúva sa do tabuľky Order Products prostredníctvom vzťahu mnoho k jednému:

   

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

   

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.

   Prepitné

   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 Image na tento vzorec:

   ThisItem.Product.Picture
   

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

   

4. Znížte výšku šablóny galérie tak, aby sa naraz zobrazovalo viac ako jeden záznam Podrobnosti objednávky :

   

Zobraziť množstvo a náklad produktu

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

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

   ThisItem.Quantity
   

   Tento vzorec čerpá informácie priamo z tabuľky Podrobnosti objednávky (nevyžaduje sa ž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 jeho veľkosť a presuňte ho napravo od štítku množstva.

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

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

   Ak nezadáte značku jazyka ([$-en-US]), bude pridaná na základe vášho jazyka a regiónu. Ak používate značku iného jazyka, budete chcieť odstrániť $ hneď za uzatváracou hranatou zátvorkou (]) a potom na túto pozíciu pridať 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 popisu do galérie podrobností a potom zmeňte veľkosť a presuňte nový popis napravo od jednotkovej ceny.

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

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

   Ak znova nezadáte značku jazyka ([$-en-US]), bude pridaná na základe vášho jazyka a regiónu. Ak je značka iná, budete chcieť použiť vlastný symbol meny namiesto $ hneď za uzatváracou 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. V table Stromové zobrazenie vyberte možnosť Obrazovka1 , aby ste sa uistili, že galéria podrobností už nie je vybratá.

Pridajte text k novému nadpisu

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

   

2. Zmeňte veľkosť a presuňte nový štítok nad obrázky produktov v druhom záhlaví a potom zmeňte farbu textu na karte Domov na bielu.

3. Dvakrát kliknite na text štítku a potom zadajte Produkt:

   

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 označenia 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 vložte š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:
   Celková suma objednávky:

   

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ítka 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 tento ovládací prvok označenia a potom zmeňte veľkosť a presuňte kópiu pod stĺpec Rozšírené .

9. Nastavte vlastnosť Text kopírovaného textu 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žiť 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 popis a potom zmeňte jeho veľkosť a presuňte ho pod galériu podrobností.

   

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

4. Na karte Domov nastavte farbu Výplň nového popisku na Svetlomodrá:

   

Vyberte produkt

1. Na karte Vložiť vyberte 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 Objednať produkty .

3. Na karte Vlastnosti pre rozbaľovacie pole vyberte možnosť Upraviť (vedľa položky Polia), čím otvoríte tablu Údaje . Uistite sa, že Primárny text a Vyhľadávacie pole sú nastavené na nwind_productname.

   Logický názov zadávate, pretože panel Dáta v tomto prípade zatiaľ nepodporuje zobrazované názvy:

   

4. Zatvorte tablu Údaje .

5. Na karte Vlastnosti pri pravom okraji posuňte sa nadol, vypnite možnosť Povoliť viacnásobný výber a uistite sa, že je zapnutá možnosť Povoliť vyhľadávanie :

   

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

   Prepitné

   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ť vyberte Médiá>Obrázok:

   

   Ovládací prvok Obrázok 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ť Image 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ť Selected rozbaľovacieho poľa vráti celý záznam o produkte, ktorý používateľ vyberie, vrátane poľa Picture .

Pole Pridať množstvo

1. Na karte Vložiť vyberte Text>Vstup textu:

   

   Ovládací prvok Vstup textu 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í:

   

   Pomocou tohto textového poľa používateľ zadá pole Množstvo v zázname 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 Popisok.

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

   

2. Zmeňte veľkosť a presuňte označenie napravo od ovládacieho prvku na zadávanie textu a nastavte vlastnosť označenia Text na tento vzorec:

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

   

   Tento ovládací prvok zobrazuje Cenovú cenu z tabuľky Objednané produkty . Táto hodnota určí pole Jednotková cena 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 Vstup textu a nastavte jeho vlastnosť Predvolená na Cenová cena.

3. Na karte Domov nastavte zarovnanie textu 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ítka 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.

   Rozšírená cena sa prepočíta a zobrazí novú hodnotu:

   

Pridanie ikony Pridať

1. Na karte Vložiť vyberte Ikony>Pridať:

   

   Ikona sa objaví v ľavom hornom rohu obrazovky.

   

2. Zmeňte veľkosť tejto ikony a presuňte ju na pravý okraj svetlomodrej oblasti a potom nastavte vlastnosť ikony OnSelect na tento vzorec:

   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 )
   

   

   Vo všeobecnosti funkcia Patch 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 funkcia aktualizuje alebo vytvorí 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ú si používateľ vybral v galérii objednávok.
     • Stĺpec Produkt bude obsahovať názov produktu, ktorý používateľ vybral v rozbaľovacom poli zobrazujúcom produkty.
     • Stĺpec Množstvo bude obsahovať hodnotu, ktorú používateľ zadal do textového poľa.
     • Stĺpec Jednotková cena bude obsahovať katalógovú cenu produktu, ktorý si používateľ vybral pre tento detail objednávky.

   Poznámka

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

   Funkcia Obnoviť zabezpečí, aby tabuľka Objednávky zobrazovala 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 jednoduchš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ť vyberte Ikony>Kôš:

   

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

   

3. Zmeňte veľkosť ikony Koša a presuňte ju na pravú stranu šablóny galérie podrobností a nastavte vlastnosť ikony OnSelect na tento vzorec:

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

   

   V čase písania tohto článku nie je možné odstrániť záznam priamo zo vzťahu, takže funkcia Odstrániť odstraňuje záznam priamo zo súvisiacej tabuľky. Táto položka určuje záznam, ktorý sa má odstrániť, prevzatý z toho istého záznamu v galérii podrobností, kde sa zobrazuje ikona koša.

   Operácia opäť používa dáta z vyrovnávacej pamäte, takže funkcia *Refresh* informuje tabuľku *Orders*, že aplikácia zmenila jednu z jej súvisiacich tabuliek.

4. Stlačením klávesu F5 otvorte režim ukážky a potom vyberte ikonu koša vedľ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, prepojený s galériou objednávok prostredníctvom vzťahu jeden k 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 v objednávke : ThisItem.Product.'Product Name' a ThisItem.Product.Picture
• Funkcia Výber na získanie zoznamu produktov: Choices( 'Order Details'.Product' )
• Vlastnosť Vybrané rozbaľovacieho poľa ako kompletný súvisiaci záznam typu viacero k jednému: ComboBox1.Selected.Picture a ComboBox1.Selected.'List Price'
• Funkcia Patch na vytvorenie záznamu s podrobnosťami 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.