Crear una galeria de detalls en una aplicació de llenç
Seguiu les instruccions pas a pas per crear una galeria de detalls en una aplicació de llenç per administrar dades fictícies a la base de dades de Northwind Traders. Aquest tema forma part d'una sèrie que explica com es crea una aplicació empresarial sobre dades relacionals al Microsoft Dataverse. Per obtenir els millors resultats, exploreu aquests temes en aquesta seqüència:
- Creeu una galeria de comandes.
- Creeu un formulari de resum.
- Creeu una galeria de detalls (aquest tema).
Requisits previs
Abans d'iniciar aquest tema, heu d'instal·lar la base de dades tal i com s'ha descrit abans en aquest tema. A continuació, heu de crear la galeria de comandes i el formulari de resum o obrir l'aplicació Comandes de Northwind (llenç): començar la part 3, que ja conté aquesta galeria i el formulari.
Crear una altra barra de títol
A la part superior de la pantalla, seleccioneu el control Etiqueta que actua com a barra de títol, copieu-lo prement Control-C i, a continuació, enganxeu-lo prement Control-V:
Canvieu la mida de la còpia i desplaceu-la per tal que aparegui només al formulari de resum.
Suprimiu el text de la còpia de qualsevol d'aquestes maneres:
- Feu doble clic al text per seleccionar-lo i, a continuació, premeu Suprimeix.
- Definiu la propietat Text de l'etiqueta en una cadena buida ("").
Afegir una galeria
Inseriu un control Galeria amb una disposició Vertical en blanc:
La galeria nova, que mostrarà els detalls de la comanda, apareixerà a la part superior esquerra.
Tanqueu el quadre de diàleg emergent de font de dades i, a continuació, canvieu la mida de la galeria de detalls i desplaceu-la a la cantonada inferior dreta, sota la nova barra de títol:
Definiu la propietat Items de la galeria de detalls a aquesta fórmula:
Gallery1.Selected.'Order Details'
Si apareix un error, confirmeu que la galeria de comandes s'anomena Gallery1 (a la subfinestra Visualització d'arbre prop de la vora esquerra). Si aquesta galeria té un nom diferent, canvieu-lo per Gallery1.
Acabeu d'enllaçar les dues galeries. Quan l'usuari selecciona una comanda a la galeria de comandes, aquesta selecció identifica un registre a la taula Comandes. Si aquesta comanda conté un o diversos elements de línia, el registre de la taula Comandes s'enllaça amb un o diversos registres de la taula Detalls de la comanda, i les dades d'aquests registres apareixen a la galeria de detalls. Aquest comportament reflecteix la relació un a diversos que es va crear per a vós entre les taules Comandes i Detalls de la comanda. La fórmula que heu especificat "dirigeix" aquesta relació mitjançant la notació de punts:
Mostrar els noms dels productes
A la galeria de detalls, seleccioneu Afegeix un element de la pestanya Insereix per seleccionar la plantilla de la galeria:
Assegureu-vos que heu seleccionat la plantilla de la galeria en comptes de la pròpia galeria. El quadre de límit ha d'estar situat lleugerament dins del límit de la galeria i, probablement, ha de ser més curt que l'alçada de la galeria. A mesura que inseriu els controls en aquesta plantilla, es repeteixen per a cada element de la galeria.
A la pestanya Insereix, inseriu una etiqueta a la galeria de detalls.
L'etiqueta hauria de figurar a la galeria; si no és així, torneu-ho a provar, però assegureu-vos de seleccionar la plantilla de la galeria abans d'inserir l'etiqueta.
Definiu la propietat Text de l'etiqueta nova en aquesta fórmula:
ThisItem.Product.'Product Name'
Si no apareix cap text, seleccioneu la fletxa de la Comanda 0901 a prop de la part inferior de la galeria de comandes.
Canvieu la mida de l'etiqueta per tal que aparegui el text complet:
Aquesta expressió ve d'un registre de la taula Detalls de la comanda. El registre es manté en ThisItem fins a la taula Productes de la comanda mitjançant una relació de diversos a un:
La columna Nom del producte (i altres columnes que ara utilitzareu) s'extreu:
Mostrar imatges dels productes
A la pestanya Insereix, inseriu un control Imatge a la galeria de detalls:
Redimensioneu i desplaceu la imatge i l'etiqueta perquè quedin l'una al costat de l'altra.
Suggeriment
Per controlar de manera més adequada la mida i la posició d'un control, comenceu a redimensionar-lo o desplaçar-lo sense prémer la tecla Alt i, a continuació, continueu per redimensionar o moure el control mentre manteniu premuda la tecla Alt:
Definiu la propietat Image de la imatge a aquesta fórmula:
ThisItem.Product.Picture
De nou, l'expressió fa referència a un producte que està associat a aquest detall de la comanda i n'extreu el camp Imatge per mostrar-lo.
Reduïu l'alçada de la plantilla de la galeria per tal de mostrar més d'un registre Detall de la comanda a la vegada:
Mostrar la quantitat i el cost dels productes
A la pestanya Insereix, inseriu una altra etiqueta a la galeria de detalls i, a continuació, redimensioneu i desplaceu l'etiqueta nova a la dreta de la informació del producte.
Definiu la propietat Text de l'etiqueta nova en aquesta expressió:
ThisItem.Quantity
Aquesta fórmula extreu informació directament de la taula Detalls de la comanda (no cal cap relació).
A la pestanya Inici, canvieu l'alineació d'aquest control a la Dreta:
A la pestanya Insereix, inseriu una altra etiqueta a la galeria de detalls i, a continuació, redimensioneu i desplaceu l'etiqueta a la dreta de l'etiqueta de quantitat.
Definiu la propietat Text de l'etiqueta nova en aquesta fórmula:
Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
Si no incloeu l'etiqueta de llengua ([$-en-US]), s'afegirà en funció de la vostra llengua i regió. Si utilitzeu una altra etiqueta de llengua, suprimiu el símbol $ després del claudàtor de tancament (]) i, a continuació, afegiu el símbol monetari en aquesta posició.
A la pestanya Inici, canvieu l'alineació d'aquest control a la Dreta:
A la pestanya Insereix, inseriu un altre control d'etiqueta a la galeria de detalls i, a continuació, redimensioneu i desplaceu l'etiqueta nova a la dreta del preu per unitat.
Definiu la propietat Text de l'etiqueta nova en aquesta fórmula:
Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
De nou, si no incloeu l'etiqueta de llengua ([$-en-US]), s'afegirà en funció de la vostra llengua i regió. Si l'etiqueta és diferent, utilitzeu el vostre símbol monetari en comptes de $ just després del claudàtor de tancament (]).
A la pestanya Inici, canvieu l'alineació d'aquest control a la Dreta:
Ja heu acabat d'afegir controls a la galeria de detalls per ara.
A la subfinestra Visualització d'arbre, seleccioneu Screen1 per assegurar-vos que la galeria de detalls no estigui seleccionada.
Afegir text a la nova barra de títol
A la pestanya Insereix, inseriu una altra etiqueta a la pantalla:
Redimensioneu i desplaceu l'etiqueta nova sobre les imatges dels productes de la segona barra de títol i, a continuació, canvieu el color del text al color blanc a la pestanya Inici.
Feu doble clic al text de l'etiqueta i, a continuació, escriviu Producte:
Copieu i enganxeu l'etiqueta del producte i, a continuació, canvieu la mida de la còpia i desplaceu-la sobre la columna de quantitat.
Feu doble clic al text de l'etiqueta nova i, a continuació, escriviu Quantitat:
Copieu i enganxeu l'etiqueta de quantitat i, a continuació, canvieu la mida de la còpia i desplaceu-la sobre la columna de preu per unitat.
Feu doble clic al text de l'etiqueta nova i, a continuació, escriviu Preu per unitat:
Copieu i enganxeu l'etiqueta de preu per unitat i, a continuació, canvieu la mida de la còpia i desplaceu-la sobre la columna d'import.
Feu doble clic al text de l'etiqueta nova i, a continuació, escriviu Import.
Mostrar els totals de la comanda
Reduïu l'alçada de la galeria de detalls per fer espai per als totals de la comanda a la part inferior de la pantalla:
Copieu i enganxeu la barra de títol al mig de la pantalla i, a continuació, desplaceu la còpia a la part inferior de la pantalla:
Copieu i enganxeu l'etiqueta del producte des de la barra del títol central i, a continuació, desplaceu la còpia a la barra de títol inferior, just a l'esquerra de la columna Quantitat.
Feu doble clic al text de l'etiqueta nova i, a continuació, escriviu aquest text:
Totals de la comanda:Copieu i enganxeu l'etiqueta de totals de la comanda i, a continuació, redimensioneu i desplaceu la còpia a la dreta de l'etiqueta de totals de la comanda.
Definiu la propietat Text de l'etiqueta nova en aquesta fórmula:
Sum( Gallery1.Selected.'Order Details', Quantity )
En aquesta fórmula es mostra un advertiment de delegació, però podeu ignorar-lo perquè no hi ha cap comanda única que contingui més de 500 productes.
A la pestanya Inici, definiu l'alineació del text de l'etiqueta nova a la Dreta:
Copieu i enganxeu aquest control d'etiqueta i, a continuació, canvieu la mida de la còpia i desplaceu-la sota la columna Import.
Definiu la propietat Text de la còpia en aquesta fórmula:
Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
En aquesta fórmula es mostra un advertiment de delegació, però podeu ignorar-lo perquè no hi ha cap comanda única que contingui més de 500 productes.
Afegir espai per a nous detalls
A qualsevol galeria, podeu mostrar dades, però no la podeu actualitzar ni afegir-hi registres. A la galeria de detalls, afegireu una àrea on l'usuari pot configurar un registre a la taula Detalls de la comanda i inserir el registre en una comanda.
Reduïu l'alçada de la galeria de detalls per fer lloc per a un espai d'edició d'element únic sota la galeria.
En aquest espai, afegireu controls per tal que l'usuari pugui afegir un detall de la comanda:
A la pestanya Insereix, inseriu una etiqueta i, a continuació, canvieu-ne la mida i desplaceu-la sota la galeria de detalls.
Feu doble clic al text de l'etiqueta nova i, a continuació, premeu Suprimeix.
A la pestanya Inici, definiu el color d'Emplenament de l'etiqueta nova com a LightBlue:
Seleccionar un producte
A la pestanya Insereix, seleccioneu Controls > Quadre combinat:
El control Quadre combinat apareix a la cantonada superior esquerra.
Al quadre de diàleg emergent, seleccioneu la font de dades Productes de la comanda.
A la pestanya Propietats del quadre combinat, seleccioneu Edita (al costat de Camps) per obrir la subfinestra Dades. Assegureu-vos que els camps Text principal i SearchField estiguin definits com a nwind_productname.
Especifiqueu el nom lògic perquè la subfinestra Dades encara no admet els noms de visualització en aquest cas:
Tanqueu la subfinestra Dades.
A la pestanya Propietats situada prop de la vora dreta, desplaceu-vos cap avall, desactiveu Permet la selecció múltiple i assegureu-vos que l'opció Permet la cerca estigui activada:
Canvieu la mida del quadre combinat i desplaceu-lo a l'àrea de color blau clar, just a sota de la columna de nom del producte de la galeria de detalls:
En aquest quadre de combinació, l'usuari especificarà un registre a la taula Productes per al registre Detalls de la comanda que crearà l'aplicació.
Mentre manteniu premuda la tecla Alt, seleccioneu la fletxa avall del quadre combinat.
Suggeriment
Si manteniu premuda la tecla Alt, podeu interactuar amb els controls del Power Apps Studio sense obrir el mode Visualització prèvia.
A la llista de productes que apareix, seleccioneu un producte:
Afegir una imatge del producte
A la pestanya Insereix, seleccioneu Elements multimèdia > Imatge:
El control Imatge apareix a la cantonada superior esquerra:
Canvieu la mida de la imatge i desplaceu-la a l'àrea de cloro blau clar sota les altres imatges dels productes i al costat del quadre combinat.
Definiu la propietat Image de la imatge com a:
ComboBox1.Selected.Picture
Esteu utilitzant el mateix truc que heu utilitzat per mostrar la imatge de l'empleat al formulari de resum. La propietat Selected del quadre combinat torna tot el registre de qualsevol producte que seleccioni l'usuari i hi inclou el camp Imatge.
Afegir un quadre de quantitat
A la pestanya Insereix, seleccioneu Text > Entrada de text:
El control Entrada de text apareix a la cantonada superior esquerra:
Canvieu la mida del quadre d'entrada de text i desplaceu-lo a la dreta del quadre combinat, a sota de la columna de quantitat de la galeria de detalls:
En utilitzar aquest quadre d'entrada de text, l'usuari especificarà el camp Quantitat del registre Detalls de la comanda.
Definiu la propietat Default del control com a "":
A la pestanya Inici, definiu l'alineació del text d'aquest control a la Dreta:
Mostrar imports i preus per unitat
A la pestanya Insereix, inseriu un control Etiqueta.
L'etiqueta apareix a la cantonada superior esquerra de la pantalla:
Redimensioneu i desplaceu l'etiqueta a la dreta del control d'entrada de text i definiu la propietat Text de l'etiqueta en aquesta fórmula:
Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
Aquest control mostra el Preu de la llista de la taula Productes de la comanda. Aquest valor determinarà el camp Preu per unitat del registre Detalls de la comanda.
Nota
Per a aquest escenari, el valor és només de lectura, però pot ser que l'usuari de l'aplicació l'hagi de modificar en altres escenaris. En aquest cas, utilitzeu un control Entrada de text i definiu la propietat Default com a Preu llistat.
A la pestanya Inici, definiu l'alineació del text de l'etiqueta de preu llistat a la Dreta:
Copieu i enganxeu l'etiqueta de preu llistat i, a continuació, redimensioneu i desplaceu la còpia a la dreta de l'etiqueta de preu llistat.
Definiu la propietat Text de l'etiqueta nova en aquesta fórmula:
Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
Aquest control mostra l'import en funció de la quantitat que especifica l'usuari de l'aplicació i el preu llistat del producte que l'usuari de l'aplicació ha seleccionat. És purament informatiu per a l'usuari de l'aplicació.
Feu doble clic al control d'entrada de text per a la quantitat i, a continuació, escriviu un número.
L'etiqueta de preu Import es torna a calcular per mostrar el valor nou:
Afegir una icona Afegeix
A la pestanya Insereix, seleccioneu Icones > Afegeix:
La icona apareix a la cantonada superior esquerra de la pantalla.
Redimensioneu i desplaceu aquesta icona a la vora dreta de l'àrea de color blau clar i, a continuació, definiu la propietat de la icona OnSelect en aquesta fórmula:
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 )
En general, la funció Patch actualitza i crea registres, i els arguments específics d'aquesta fórmula determinen els canvis exactes que farà la funció.
El primer argument especifica la font de dades (en aquest cas, la taula Detalls de la comanda) en la qual la funció actualitzarà o crearà un registre.
El segon argument especifica que la funció crearà un registre amb els valors per defecte de la taula Detalls de la comanda tret que s'especifiqui el contrari al tercer argument.
El tercer argument especifica que quatre columnes del registre nou contindran valors de l'usuari.
- La columna Comanda contindrà el número de comanda que l'usuari hagi seleccionat a la galeria.
- La columna Producte contindrà el nom del producte que l'usuari hagi seleccionat al quadre combinat que mostra els productes.
- La columna Quantitat contindrà el valor que l'usuari hagi especificat al quadre d'entrada de text.
- La columna Preu per unitat contindrà el preu llistat del producte que l'usuari ha seleccionat per a aquest detall de la comanda.
Nota
Podeu crear fórmules que utilitzin dades de qualsevol columna (a la taula Productes de la comanda) per a qualsevol producte que seleccioni l'usuari de l'aplicació al quadre de combinació que mostra els productes. Quan l'usuari selecciona un registre a la taula Productes de la comanda, no només apareix el nom del producte en aquest quadre de combinació, sinó també el preu unitari del producte en una etiqueta. Cada valor de cerca d'una aplicació de llenç fa referència a un registre complet i no només a una clau principal.
La funció Actualitza garanteix que la taula Comandes reflecteixi el registre que acabeu d'afegir a la taula Detalls de la comanda. La funció Reset esborra el producte, la quantitat i les dades de preu per unitat per tal que l'usuari pugui crear més fàcilment un altre detall de la comanda per a la mateixa comanda.
Premeu F5 i, a continuació, seleccioneu la icona Afegeix.
La comanda reflecteix la informació que heu especificat:
(opcional) Afegiu un altre element a la comanda.
Premeu Esc per tancar el mode Visualització prèvia.
Suprimir un detall de la comanda
Al centre de la pantalla, seleccioneu la plantilla de la galeria de detalls:
A la pestanya Insereix, seleccioneu Icones > Paperera:
La icona Paperera apareix a la cantonada superior esquerra de la plantilla de la galeria.
Redimensioneu i desplaceu la icona Paperera a la part dreta de la plantilla de la galeria de detalls i definiu la propietat OnSelect en aquesta fórmula:
Remove( 'Order Details', ThisItem ); Refresh( Orders )
A partir d'aquesta escriptura, no podeu suprimir cap registre directament d'una relació, de manera que la funció Suprimeix suprimeix un registre directament de la taula relacionada. ThisItem especifica el registre que s'ha de suprimir, extret del mateix registre de la galeria de detalls on apareix la icona Paperera.
Una vegada més, l'operació utilitza dades en memòria cau, de manera que la funció Actualitza informa a la taula Comandes que l'aplicació ha canviat una de les taules relacionades.
Premeu F5 per obrir el mode Visualització prèvia i, a continuació, seleccioneu la icona Paperera que hi ha al costat de cada registre Detalls de la comanda que voleu suprimir de la comanda.
Proveu d'afegir i suprimir de les comandes diversos detalls de la comanda:
En conclusió
Per recapitular, heu afegit una altra galeria per mostrar els detalls de la comanda i els controls afegint i suprimint un detall de la comanda a l'aplicació. Heu utilitzat aquests elements:
- Un segon control de galeria, enllaçat a la galeria de comandes per mitjà d'una relació d'un a diversos: Gallery2.Items =
Gallery1.Selected.'Order Details'
- Una relació de diversos a un de la taula Detalls de la comanda a la taula Productes de la comanda:
ThisItem.Product.'Product Name'
iThisItem.Product.Picture
- La funció Choices per obtenir una llista de productes:
Choices( 'Order Details'.Product' )
- La propietat Selected d'un quadre combinat com a registre complet d'una relació de diversos a un:
ComboBox1.Selected.Picture
iComboBox1.Selected.'List Price'
- La funció Patch per crear un registre Detalls de la comanda:
Patch( 'Order Details', Defaults( 'Order Details' ), ... )
- La funció Remove per suprimir un registre Detalls de la comanda:
Remove( 'Order Details', ThisItem )
Aquesta sèrie de temes ha estat una explicació ràpida de l'ús de relacions i opcions del Dataverse en una aplicació de llenç per a finalitats educatives. Abans de publicar qualsevol aplicació a la producció, heu de tenir en compte la validació de camps, la gestió d'errors i molts altres factors.
Nota
Ens podeu dir quines són les vostres preferències d'idioma per a la documentació? Responeu una breu enquesta. (tingueu en compte que l'idioma de l'enquesta és l'anglès)
Trigareu uns set minuts a completar l'enquesta. No es recopilen dades personals (declaració de privadesa).