Comparteix a través de

Crear una galeria de detalls en una aplicació de llenç

  • Article

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:

  1. Creeu una galeria de comandes.
  2. Creeu un formulari de resum.
  3. Creeu una galeria de detalls (aquest tema).

Definició de les àrees de la pantalla

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

  1. 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:

    Copiar i enganxar la barra de títol.

  2. Canvieu la mida de la còpia i desplaceu-la per tal que aparegui només al formulari de resum.

  3. 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 ("").

    Suprimir el text de la còpia de la barra de títol.

  1. Inseriu un control Galeria amb una disposició Vertical en blanc:

    Afegir una galeria vertical en blanc.

    La galeria nova, que mostrarà els detalls de la comanda, apareixerà a la part superior esquerra.

  2. 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:

    Ubicació final de la galeria de detalls de la comanda

  3. Definiu la propietat Items de la galeria de detalls a aquesta fórmula:

    Gallery1.Selected.'Order Details'

    Definir la propietat Elements de la galeria de detalls.

    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:

    Relació un a diversos entre la taula de comandes i la taula de detalls de la comanda

Mostrar els noms dels productes

  1. A la galeria de detalls, seleccioneu Afegeix un element de la pestanya Insereix per seleccionar la plantilla de la galeria:

    Seleccionar la plantilla per a la galeria de detalls.

    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.

  2. 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.

    Afegir una etiqueta a la galeria de detalls.

  3. 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.

  4. Canvieu la mida de l'etiqueta per tal que aparegui el text complet:

    Mostrar el nom del producte als detalls de la comanda.

    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:

    Relació de diversos a un entre la taula de detalls de la comanda i la taula de producte de la comanda

    La columna Nom del producte (i altres columnes que ara utilitzareu) s'extreu:

    Columna a la taula de productes de la comanda

Mostrar imatges dels productes

  1. A la pestanya Insereix, inseriu un control Imatge a la galeria de detalls:

    Inserir un control d'imatge al llenç.

  2. 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:

    Desplaçar el control d'imatge.

  3. 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.

    Mostrar la imatge del producte.

  4. 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:

    Escurçar la plantilla de la galeria.

Mostrar la quantitat i el cost dels productes

  1. 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.

  2. 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ó).

    Mostrar la quantitat de productes.

  3. A la pestanya Inici, canvieu l'alineació d'aquest control a la Dreta:

    Canviar l'alineació cap a la dreta.

  4. 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.

  5. 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ó.

    Mostrar el preu per unitat.

  6. A la pestanya Inici, canvieu l'alineació d'aquest control a la Dreta:

    Canviar l'alineació en direcció a la dreta.

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

  8. 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 (]).

    Mostrar l'import.

  9. A la pestanya Inici, canvieu l'alineació d'aquest control a la Dreta:

    Canviar l'alineació a la dreta.

    Ja heu acabat d'afegir controls a la galeria de detalls per ara.

  10. 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

  1. A la pestanya Insereix, inseriu una altra etiqueta a la pantalla:

    Captura de pantalla de l'etiqueta d'inserció

  2. 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.

  3. Feu doble clic al text de l'etiqueta i, a continuació, escriviu Producte:

    Canviar el text de l'etiqueta a Producte.

  4. 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.

  5. Feu doble clic al text de l'etiqueta nova i, a continuació, escriviu Quantitat:

    Canviar el text de l'etiqueta a Quantitat.

  6. 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.

  7. Feu doble clic al text de l'etiqueta nova i, a continuació, escriviu Preu per unitat:

    Canviar el text de l'etiqueta a Preu per unitat.

  8. 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.

  9. Feu doble clic al text de l'etiqueta nova i, a continuació, escriviu Import.

    Canviar el text de l'etiqueta a Import.

Mostrar els totals de la comanda

  1. 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:

    Escurçar la galeria de detalls de la comanda.

  2. 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:

    Copiar la barra de títol i desplaçar la còpia a la vora inferior.

  3. 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.

  4. Feu doble clic al text de l'etiqueta nova i, a continuació, escriviu aquest text:
    Totals de la comanda:

    Afegir una etiqueta per als totals de la comanda.

  5. 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.

  6. 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.

  7. A la pestanya Inici, definiu l'alineació del text de l'etiqueta nova a la Dreta:

    Canviar l'alineació.

  8. Copieu i enganxeu aquest control d'etiqueta i, a continuació, canvieu la mida de la còpia i desplaceu-la sota la columna Import.

  9. 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.

    Mostrar el cost total de la comanda.

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.

  1. 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:

    Escurçar la galeria de detalls.

  2. A la pestanya Insereix, inseriu una etiqueta i, a continuació, canvieu-ne la mida i desplaceu-la sota la galeria de detalls.

    Inserir una etiqueta.

  3. Feu doble clic al text de l'etiqueta nova i, a continuació, premeu Suprimeix.

  4. A la pestanya Inici, definiu el color d'Emplenament de l'etiqueta nova com a LightBlue:

    Canviar l'emplenament de l'etiqueta a blau clar.

Seleccionar un producte

  1. A la pestanya Insereix, seleccioneu Controls > Quadre combinat:

    Inserir un quadre combinat.

    El control Quadre combinat apareix a la cantonada superior esquerra.

  2. Al quadre de diàleg emergent, seleccioneu la font de dades Productes de la comanda.

  3. 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:

    Definir el text principal per al quadre combinat.

  4. Tanqueu la subfinestra Dades.

  5. 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:

    Inhabilitar la selecció múltiple i habilitar la cerca.

  6. 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:

    Desplaçar el quadre combinat.

    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ó.

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

  8. A la llista de productes que apareix, seleccioneu un producte:

    Seleccionar un producte al quadre combinat.

Afegir una imatge del producte

  1. A la pestanya Insereix, seleccioneu Elements multimèdia > Imatge:

    Inserir un control d'imatge.

    El control Imatge apareix a la cantonada superior esquerra:

    Ubicació per defecte del control d'imatge

  2. 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.

  3. Definiu la propietat Image de la imatge com a:

    ComboBox1.Selected.Picture

    Definir la propietat Imatge de la imatge.

    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

  1. A la pestanya Insereix, seleccioneu Text > Entrada de text:

    Afegir un quadre d'entrada de text.

    El control Entrada de text apareix a la cantonada superior esquerra:

    Ubicació per defecte del quadre d'entrada de text

  2. 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:

    Redimensionar i desplaçar el quadre d'entrada de text.

    En utilitzar aquest quadre d'entrada de text, l'usuari especificarà el camp Quantitat del registre Detalls de la comanda.

  3. Definiu la propietat Default del control com a "":

    Definiu la propietat Per defecte del quadre d'entrada de text.

  4. A la pestanya Inici, definiu l'alineació del text d'aquest control a la Dreta:

    Canviar l'alineació del control cap a la dreta.

Mostrar imports i preus per unitat

  1. A la pestanya Insereix, inseriu un control Etiqueta.

    L'etiqueta apareix a la cantonada superior esquerra de la pantalla:

    Inserir una etiqueta.

  2. 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" )

    Definir la propietat Text de l'etiqueta.

    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.

  3. A la pestanya Inici, definiu l'alineació del text de l'etiqueta de preu llistat a la Dreta:

    Canviar l'alineació del control cap al cantó dret.

  4. 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.

  5. Definiu la propietat Text de l'etiqueta nova en aquesta fórmula:

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

    Definir la nova propietat Text de l'etiqueta.

    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ó.

  6. 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:

    Especificar una quantitat i mostrar l'import.

Afegir una icona Afegeix

  1. A la pestanya Insereix, seleccioneu Icones > Afegeix:

    Inserir una icona Afegeix.

    La icona apareix a la cantonada superior esquerra de la pantalla.

    Ubicació per defecte de la icona Afegeix

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

    Definir la propietat OnSelect de la icona.

    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.

  3. Premeu F5 i, a continuació, seleccioneu la icona Afegeix.

    La comanda reflecteix la informació que heu especificat:

    Animació d'afegir un detall de la comanda

  4. (opcional) Afegiu un altre element a la comanda.

  5. Premeu Esc per tancar el mode Visualització prèvia.

Suprimir un detall de la comanda

  1. Al centre de la pantalla, seleccioneu la plantilla de la galeria de detalls:

    Seleccionar la plantilla de la galeria.

  2. A la pestanya Insereix, seleccioneu Icones > Paperera:

    Inserir la icona Paperera.

    La icona Paperera apareix a la cantonada superior esquerra de la plantilla de la galeria.

    Ubicació per defecte de la icona

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

    Definir la propietat OnSelect de la icona.

    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.

  4. 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.

  5. Proveu d'afegir i suprimir de les comandes diversos detalls de la comanda:

    Animació d'afegir i suprimir 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' i ThisItem.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 i ComboBox1.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).