Ustvarjanje galerije podrobnosti v aplikaciji s platnom

Članek
03/03/2022
6 min za branje

Upoštevajte podrobna navodila za ustvarjanje galerije podrobnosti v aplikaciji s platnom, ki vam omogoča upravljanje izmišljenih podatkov v zbirki podatkov Northwind Traders. Ta tema je del serije, v katerem je pojasnjeno, kako lahko ustvarite poslovno aplikacijo z relacijskimi podatki v storitvi Microsoft Dataverse. Za najboljše rezultate preučite te teme v tem zaporedju:

Ustvarite galerijo naročil.
Ustvarite obrazec za povzetek.
Ustvarite galerijo podrobnosti (ta tema).

Opredelitev območij zaslona.

Zahteve

Pred začetkom te teme morate namestiti zbirko podatkov, kot je opisano v prejšnjem delu te teme. Nato morate ustvariti galerijo naročil in obrazec za povzetek ali pa odpreti aplikacijo Northwind Orders (Canvas) - Begin Part 3, ki že vsebuje to galerijo in obrazec.

Ustvarjanje druge naslovne vrstice

Na vrhu zaslona izberite kontrolnik Label, ki deluje kot naslovna vrstica, ga kopirajte s pritiskom na Ctrl-C in ga prilepite s pritiskom možnosti Ctrl-V:
Spremenite velikost kopije in jo premaknite tako, da se pojavi tik pod obrazcem za povzetek.
Besedilo odstranite iz kopije na kateri koli od teh načinov:
- Dvokliknite besedilo, da ga izberete, nato pa pritisnite »Izbriši«.
- Nastavite lastnost oznake Text na prazen niz ("").

Dodajanje galerije

Vstavite kontrolnika Gallery s postavitvijo Prazno navpično:

V zgornjem levem kotu se prikaže nova galerija, v kateri bodo vidne podrobnosti o naročilu.
Zaprite pojavno pogovorno okno za vir podatkov, nato pa spremenite velikost galerije podrobnosti in jo premaknite v spodnji desni kot, pod novo naslovno vrstico:
Nastavite lastnost galerije podrobnosti Items na to formulo:
```
Gallery1.Selected.'Order Details'
```
Če se pojavi napaka, preverite, ali je ime galerije naročil Gallery1 (v podoknu Drevesni pogled poleg levega roba). Če ima ta galerija drugačno ime, jo preimenujte v Gallery1.

Galeriji ste pravkar povezali. Ko uporabnik izbere naročilo v galeriji naročil, ta izbira identificira zapis v tabeli Naročila. Če to naročilo vsebuje enega ali več elementov vrstice, se zapis v tabeli Naročila poveže z enim ali več zapisi v tabeli Podrobnosti naročila, podatki iz teh zapisov pa so prikazani v galeriji podrobnosti. To vedenje odraža odnos »eden proti mnogo«, ki je bil ustvarjen za vas med tabelama Naročila in Podrobnosti naročila. Formula, ki ste jo določili, »označuje« ta odnos z zapisom s piko:

Prikaz imen izdelkov

V galeriji podrobnosti izberite Dodaj element z zavihka Vstavljanje, da izberete predlogo galerije:

Prepričajte se, da ste izbrali predlogo galerije namesto same galerije. Mejni okvir mora biti nekoliko znotraj obsega galerije in verjetno krajši od višine galerije. Ko v to predlogo vstavite kontrolnike, se ti ponavljajo za vsak element v galeriji.
Na zavihku Vstavljanje vstavite oznako v galerijo podrobnosti.

Oznaka mora biti prikazana v galeriji; v nasprotnem primeru poskusite znova, vendar pred vstavljanjem oznake ne pozabite izbrati predloge galerije.
Lastnost nove oznake Text nastavite na to formulo:
```
ThisItem.Product.'Product Name'
```
Če se ne prikaže nobeno besedilo, izberite puščico za Naročilo 0901 blizu spodnjega dela galerije naročil.
Velikost oznake spremenite tako, da je vidno celotno besedilo:

Ta izraz pride iz zapisa v tabeli Podrobnosti naročila. Zapis je shranjen v vrednosti ThisItem v tabeli Izdelki iz naročila prek razmerja »mnogo proti ena«:

Stolpec Ime izdelka (in drugi stolpci, ki jih nameravate uporabiti) je izvlečen:

Prikaz slik izdelka

Na zavihku Vstavljanje vstavite kontrolnik Image v galerijo podrobnosti:
Spremenite velikost slike in oznake ter ju postavite drugo ob drugo.

Nasvet

Za podrobnejše upravljanje velikosti in položaja kontrolnika spremenite velikost kontrolnika ali ga premaknite, ne da bi pritisnili tipko Alt, nato pa nadaljujte s spreminjanjem velikosti ali premikanjem kontrolnika, medtem ko držite tipko Alt:
Lastnost slike Image nastavite na to formulo:
```
ThisItem.Product.Picture
```
Izraz znova omenja izdelek, ki je povezan s to podrobnostjo o naročilu in ekstrahiranjem polja Slika za prikaz.
Zmanjšajte višino predloge galerije, da se naenkrat prikaže več kot en zapis za podrobnosti o naročilu:

Prikaz količine in cene izdelka

Na zavihku Vstavljanje vstavite drugo oznako v galerijo podrobnosti, nato pa spremenite velikost nove oznake in jo postavite desno od podatkov o izdelku.
Lastnost nove oznake Text nastavite na ta izraz:
```
ThisItem.Quantity
```
Ta formula pridobiva informacije neposredno iz tabele Podrobnosti naročila (odnos ni zahtevan).
Na zavihku Osnovno spremenite poravnavo tega kontrolnika na Desno:
Na zavihku Vstavljanje vstavite drugo oznako v galerijo podrobnosti, nato pa spremenite velikost oznake in jo postavite desno od oznake količine.
Lastnost nove oznake Text nastavite na to formulo:
```
Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Če ne vključite jezikovne oznake ([$-en-US]), vam jo bomo dodali glede na vaš jezik in regijo. Če uporabite drugačno jezikovno oznako, odstranite znak $ tik za oglatim zaklepajem (]) in na ta položaj dodajte simbol svoje valute.
Na zavihku Osnovno spremenite poravnavo tega kontrolnika na Desno:
Na zavihku Vstavljanje vstavite kontrolnik druge oznake v galerijo podrobnosti, nato pa spremenite velikost nove oznake in jo postavite desno od oznake cene.
Lastnost nove oznake Text nastavite na to formulo:
```
Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Zopet, če ne vključite jezikovne oznake ([$-en-US]), vam jo bomo dodali glede na vaš jezik in regijo. Če je oznaka drugačna, namesto znaka $ uporabite simbol svoje valute tik za oglatim zaklepajem (]).
Na zavihku Osnovno spremenite poravnavo tega kontrolnika na Desno:

Za zdaj ste končali z dodajanjem kontrolnikov v galerijo podrobnosti.
V podoknu Drevesni pogled izberite Screen1, da se prepričate, da je izbor galerije podrobnosti preklican.

Dodajanje besedila v novo naslovno vrstico

Na zavihku Vstavljanje vstavite drugo oznako na zaslon:
Spremenite velikost nove oznake in jo premaknite nad slike izdelkov v drugi naslovni vrstici, nato pa barvo besedila na zavihku Osnovno spremenite na belo.
Dvokliknite besedilo oznake in nato vnesite Izdelek:
Kopirajte in prilepite oznako izdelka, nato pa spremenite velikost kopije in jo premaknite nad stolpec za količino.
Dvokliknite besedilo nove oznake in nato vnesite Količina:
Kopirajte in prilepite oznako količine, nato pa spremenite velikost kopije in jo premaknite nad stolpec za ceno enote.
Dvokliknite besedilo nove oznake in nato vnesite Cena enote:
Kopirajte in prilepite oznako cene enote, nato pa spremenite velikost kopije in jo premaknite nad stolpec za skupno ceno.
Dvokliknite besedilo nove oznake in nato vnesite Skupno:

Prikaz skupne vrednosti naročila

Zmanjšajte višino galerije podrobnosti, da je na dnu zaslona na voljo prostor za skupno vrednost naročila:
Naslovno vrstico kopirajte in prilepite na sredino zaslona, nato pa premaknite kopijo na dno zaslona:
Kopirajte in prilepite oznako izdelka s srednje naslovne vrstice, nato pa kopijo premaknite v spodnjo naslovno vrstico, takoj levo od stolpca Količina.
Dvokliknite besedilo nove oznake in nato vnesite to besedilo:
Skupna vrednost naročila:
Kopirajte in prilepite oznako za skupno vrednost naročila, nato pa spremenite velikost kopije in jo premaknite na desno stran oznake za skupno vrednost naročila.
Lastnost nove oznake Text nastavite na to formulo:
```
Sum( Gallery1.Selected.'Order Details', Quantity )
```
Ta formula prikazuje opozorilo o pooblastitvi, vendar ga lahko prezrete, ker nobeno naročilo ne bo vsebovalo več kot 500 izdelkov.
Na zavihku Osnovno nastavite poravnavo besedila za novo oznako na Desno:
Kopirajte in prilepite kontrolnik za to oznako, nato pa spremenite velikost kopije in jo premaknite pod stolpec Skupno.
Lastnost kopije Text nastavite na to formulo:
```
Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
```
Ta formula prikazuje opozorilo o pooblastitvi, vendar ga lahko prezrete, ker nobeno naročilo ne bo vsebovalo več kot 500 izdelkov.

Dodajanje prostora za nove podrobnosti

V kateri koli galeriji lahko prikažete podatke, vendar jih ne morete posodobiti ali dodati zapisov. V galeriji podrobnosti boste dodali območje, kjer lahko uporabnik konfigurira zapis v tabeli Podrobnosti naročila in ta zapis vstavi v naročilo.

Zmanjšajte višino galerije podrobnosti, da je pod galerijo na voljo prostor za urejanje posameznega elementa.

V tem prostoru boste dodali kontrolnike, s katerimi bo lahko uporabnik dodal podrobnost o naročilu:
Na zavihku Vstavljanje vstavite oznako, spremenite njeno velikost in jo premaknite pod galerijo podrobnosti.
Dvokliknite besedilo nove oznake in nato pritisnite »Izbriši«:
Na zavihku Osnovno nastavite barvo polnila za novo oznako na LightBlue:

Izbira izdelka

Na zavihku Vstavljanje izberite Kontrolniki > Kombinirano polje:

Kontrolnik Combo box se prikaže v zgornjem levem kotu.
V pojavnem pogovornem oknu izberite vir podatkov Izdelki iz naročila.
Na zavihku Lastnosti za kombinirano polje izberite Uredi (poleg možnosti Polja), da odprete podokno Podatki. Zagotovite, da sta možnosti Primarno besedilo in Iskalno polje nastavljeni na nwind_productname.

Določite logično ime, ker podokno Podatki v tem primeru še ne podpira prikaznih imen:
Zaprite podokno Podatki.
Na zavihku Lastnosti poleg desnega roba se pomaknite navzdol, izklopite možnost Dovoli več izbranih možnosti in se prepričajte, da je možnost Dovoli iskanje vklopljena:
Spremenite velikost kombiniranega polja in ga premaknite v svetlo modro območje, tik pod stolpec z imenom izdelka v galeriji podrobnosti:

V tem kombiniranem polju bo uporabnik določil zapis v tabeli Izdelek za zapis Podrobnosti naročila, ki ga bo ustvarila aplikacija.
Medtem ko držite tipko Alt, izberite puščico dol pri kombiniranem polju.

Nasvet

Če pritisnete tipko Alt, vam je na voljo interakcija s kontrolniki v storitvi Power Apps Studio, ne da bi morali za to odpreti način predogleda.
Na seznamu izdelkov, ki se prikaže, izberite izdelek:

Dodajanje slike izdelka

Na zavihku Vstavljanje izberite Predstavnost > Slika:

Kontrolnik Image se prikaže v zgornjem levem kotu:
Spremenite velikost slike in jo premaknite v svetlo modro območje, in sicer pod druge slike izdelkov in poleg kombiniranega polja.
Nastavite lastnost Image za sliko na:
```
ComboBox1.Selected.Picture
```
Uporabljate isti trik, kot ste ga uporabili za prikazovanje slike zaposlenega v obrazcu za povzetek. Lastnost Selected pri kombiniranem polju vrne celoten zapis katerega koli izdelka, ki ga uporabnik izbere, vključno s poljem Slika.

Dodajanje polja za količino

Na zavihku Vstavljanje izberite Besedilo > Text input:

Kontrolnik Text input se prikaže v zgornjem levem kotu:
Spremenite velikost polja za vnos besedila in ga premaknite desno od kombiniranega polja, tik pod stolpec za količino v galeriji podrobnosti:

S tem poljem za vnos besedila bo uporabnik določil polje Količina za zapis Order Details.
Lastnost Default za ta kontrolnik nastavite na "":
Na zavihku Osnovno nastavite poravnavo besedila za ta kontrolnik na Desno:

Prikaz enote in skupnih cen

Na zavihku Vstavljanje vstavite kontrolnik Label.

Oznaka se prikaže v zgornjem levem kotu zaslona:
Spremenite velikost oznake in jo premaknite na desno stran kontrolnika za vnos besedila ter nastavite lastnost oznake Text na to formulo:
```
Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Ta kontrolnik prikazuje priporočeno ceno iz tabele Izdelki iz naročila. Ta vrednost bo določila polje Cena enote v zapisu Order Details.

Opomba

V tem primeru je vrednost samo za branje, v drugih primerih pa jo bo uporabnik aplikacije morda lahko spremenil. V tem primeru uporabite kontrolnik Text input in nastavite njegovo lastnost Default na možnost Priporočena cena.
Na zavihku Osnovno nastavite poravnavo oznake za priporočeno ceno na Desno:
Kopirajte in prilepite oznako za priporočeno ceno, nato pa spremenite velikost kopije in jo premaknite na desno stran oznake za priporočeno ceno.
Lastnost nove oznake Text nastavite na to formulo:
```
Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Ta kontrolnik prikaže skupno ceno glede na količino, ki jo je določil uporabnik aplikacije, in priporočeno ceno izdelka, ki ga je izbral uporabnik aplikacije. Za uporabnika aplikacije je to zgolj informativne narave.
Dvokliknite kontrolnik za vnos besedila za količino in nato vnesite številko.

Oznaka za skupno ceno preračuna in prikaže novo vrednost:

Dodajanje ikone za dodajanje

Na zavihku Vstavljanje izberite Ikone > Dodaj:

Ikona se prikaže v zgornjem levem kotu zaslona.
Spremenite velikost ikone in jo premaknite na desni rob svetlo modrega območja, nato pa nastavite lastnost ikone OnSelect na to formulo:
```
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 )
```
Na splošno funkcija Patch posodablja in ustvarja zapise, posebni argumenti v tej formuli pa določajo natančne spremembe, ki jih funkcija ustvari.
- Prvi argument določa vir podatkov (v tem primeru tabelo Podrobnosti naročila), v kateri bo funkcija posodobila ali ustvarila zapis.
- Drugi argument določa, da bo funkcija ustvarila zapis s privzetimi vrednostmi za tabelo Podrobnosti naročila, razen če je v tretjem argumentu določeno drugače.
- Tretji argument določa, da bodo štirje stolpci v novem zapisu vsebovali vrednosti uporabnika.
  - Stolpec Naročilo bo vseboval številko naročila, ki ga je uporabnik izbral v galeriji naročil.
  - Stolpec Izdelek bo vseboval ime izdelka, ki ga je uporabnik izbral v kombiniranem polju, ki prikazuje izdelke.
  - Stolpec Količina bo vseboval vrednost, ki jo je uporabnik določil v polju za vnos besedila.
  - Stolpec Cena enote bo vseboval priporočeno ceno izdelka, ki jo je uporabnik izbral za to podrobnost naročila.
Opomba

Sestavite lahko formule, ki uporabljajo podatke iz katerega koli stolpca (v tabeli Izdelki iz naročila) za kateri koli izdelek, ki ga uporabnik aplikacije izbere v kombiniranem polju, ki prikazuje izdelke. Ko uporabnik izbere zapis v tabeli Izdelki iz naročila, v kombiniranem polju ni prikazano samo ime izdelka, ampak se na oznaki prikaže tudi cena enote izdelka. Vsaka iskana vrednost v aplikaciji s platnom navaja celoten zapis, ne le primarnega ključa.

Funkcija Osveži zagotavlja, da tabela Naročila odraža zapis, ki ste ga pravkar dodali v tabelo Podrobnosti naročila. Funkcija Reset počisti podatke o izdelku, količini in ceni enote, da lahko uporabnik lažje ustvari še eno podrobnost naročila za isto naročilo.
Pritisnite F5, nato pa izberite ikono Dodaj.

Naročilo odraža podatke, ki ste jih navedli:
(izbirno) V naročilo dodajte še en izdelek.
Pritisnite tipko Esc, da zaprete način predogleda.

Odstranjevanje podrobnosti o naročilu

Na sredini zaslona izberite predlogo galerije podrobnosti:
Na zavihku Vstavljanje izberite Ikone > Smeti:

Ikona za smeti se prikaže v zgornjem levem kotu predloge galerije.
Spremenite velikost ikone za smeti in jo premaknite na desno stran predloge galerije podrobnosti ter nastavite lastnost ikone OnSelect na to formulo:
```
Remove( 'Order Details', ThisItem ); Refresh( Orders )
```
Od pisanja tega članka dalje zapisa ne morete odstraniti neposredno iz odnosa, zato funkcija Odstrani odstrani zapis neposredno iz povezane tabele. Element ThisItem določa zapis, ki ga je treba odstraniti iz istega zapisa v galeriji podrobnosti, kjer se prikaže ikona za smeti.

Postopek spet uporablja predpomnjene podatke, zato funkcija Osveži obvesti tabelo Naročila, da je aplikacija spremenila eno od povezanih tabel.
Pritisnite F5, da odprete način predogleda, nato pa izberite ikono za koš poleg vsakega zapisa Order Details, ki ga želite odstraniti iz naročila.
Iz naročil poskusite dodati in odstraniti različne podrobnosti o naročilu:

Zaključek

Če povzamemo, dodali ste še eno galerijo, ki prikazuje podrobnosti o naročilu ter kontrolnike za dodajanje in odstranjevanje podrobnosti o naročilu v aplikaciji. Uporabili ste te elemente:

Drugi kontrolnik galerije, povezan z galerijo naročil prek odnosa »ena proti mnogo«: Gallery2.Items = Gallery1.Selected.'Order Details'
Odnos »mnogo proti ena« med tabelo Podrobnosti naročila in tabelo Izdelki iz naročila: ThisItem.Product.'Product Name' in ThisItem.Product.Picture
Funkcija Choices, ki se uporablja za dostop do seznama izdelkov: Choices( 'Order Details'.Product' )
Lastnost Selected pri kombiniranem polju kot popoln povezani zapis »mnogo-proti-ena«: ComboBox1.Selected.Picture in ComboBox1.Selected.'List Price'
Funkcija Patch za ustvarjanje zapisa Order Details: Patch( 'Order Details', Defaults( 'Order Details' ), ... )
Funkcija Remove za brisanje zapisa Order Details: Remove( 'Order Details', ThisItem )

Ta niz tem je bila hitra predstavitev uporabe odnosov in izbir Dataverse v aplikaciji s platnom za izobraževalne namene. Preden omogočite proizvodnjo katere koli aplikacije, morate razmisliti o preverjanju veljavnosti polja, obravnavanju napak in številnih drugih dejavnikih.

Opomba

Ali nam lahko poveste, kateri je vaš prednostni jezik za dokumentacijo? Izpolnite kratko anketo. (upoštevajte, da je v angleščini)

Z anketo boste porabili približno sedem minut. Ne zbiramo nobenih osebnih podatkov (izjava o zasebnosti).