Comparteix a través de


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

Seguiu les instruccions pas a pas per crear una galeria de comandes 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 (aquest tema).
  2. Creeu un formulari de resum.
  3. Creeu una galeria de detalls.

Definició de les àrees de la pantalla

Requisits previs

Crear una aplicació en blanc

Creeu una aplicació del llenç en blanc i doneu-li un nom com ara "Les meves comandes de Northwind (aplicació del llenç)".

Afegir les dades

  1. A la subfinestra esquerra, seleccioneu Dades > Afegeix dades > cerqueu i seleccioneu la taula Comandes.

    Seleccionar Visualització, Fonts de dades, Afegeix una font de dades.

    La taula Comandes conté molts camps de diversos tipus:

    Llista de camps de la taula de comandes

    Cada camp té un Nom de visualització i un Nom, que de vegades s'anomena nom lògic. Tots dos noms es refereixen a la mateixa cosa. En general, utilitzareu el nom de visualització en crear una aplicació, però en alguns casos cal el Nom més críptic, tal com s'ha indicat al procediment.

  2. Com que treballarem amb pantalles i controls a continuació, al Power Apps Studio, per canviar de nou a la Visualització d'arbre, premeu la icona de tres quadrats apilats a la part esquerra. Per tornar a Fonts de dades en qualsevol moment, premeu la icona del cilindre.

  1. A la pestanya Insereix, seleccioneu Galeria > Vertical en blanc per afegir un control Galeria, que mostrarà les comandes.

    Insereix, Galeria, Vertical en blanc

    El control es col·locarà al llenç i apareixerà un quadre de diàleg emergent en què se us demanarà la font de dades a la qual es connectarà.

  2. Podem connectar-la directament a les Comandes aquí, però ens agradaria controlar el criteri d'ordenació de la galeria. Ignoreu el quadre de diàleg emergent i, a la barra de fórmules, definiu la propietat Items de la galeria en aquesta fórmula:

    Sort( Orders, 'Order Number', Descending )
    

    La funció Sort ordena la llista per tal que l'ordre més recent (el número de comanda més alt) aparegui en primer lloc.

    Ordenar les comandes a la galeria.

  3. Després d'uns quants moments, apareixerà la Visualització de resultats sota la barra de fórmules. Estireu la fletxa de l'esquerra per veure el resultat de la nostra fórmula. Desplaceu-vos a la dreta per veure la columna Número de comanda i assegureu-vos que estigui ordenada de la manera com voleu (de major a menor).

    Definir la propietat Elements de la galeria.

  4. A la pestanya Propietats, a prop de la vora dreta, obriu la llista Disposició:

    Llista d'opcions de disposició.

  5. A la llista d'opcions, seleccioneu Títol i subtítol:

    Seleccionar una disposició.

    S'afegeixen dos controls Etiqueta a la plantilla de la galeria. Per defecte, aquests controls mostren dues columnes de la taula Comandes, que canviareu a continuació. La plantilla de la galeria es replica verticalment per a cada registre de la taula.

  6. Seleccioneu Edita (al costat de Camps) a la pestanya Propietats situada prop de la vora dreta.

    Seleccionar edita per actualitzar els camps.

  7. A la subfinestra Dades, seleccioneu Title1 (o seleccioneu l'etiqueta superior a la plantilla de la galeria).

  8. A la barra de fórmules, definiu la propietat Text de l'etiqueta per mostrar aquesta expressió:

    "Order " & ThisItem.'Order Number'
    

    Definir la propietat Text de l'etiqueta de títol.

    El número de comanda es mostra a la part superior de cada element de la galeria. A la plantilla de la galeria, ThisItem concedeix accés a tots els camps de la taula Comanda.

  9. A la subfinestra Dades, seleccioneu Subtitle1 (o seleccioneu l'etiqueta inferior a la plantilla de la galeria):

    Seleccionar l'etiqueta de subtítol.

  10. A la barra de fórmules, definiu la propietat Text de l'etiqueta per mostrar aquesta expressió:

    ThisItem.Customer.Company
    

    Definir la propietat Text de l'etiqueta de subtítol.

    Després d'introduir aquesta fórmula, pot mostrar-se un gargot vermell d'error durant un moment. L'error hauria de desaparèixer si seleccioneu qualsevol element fora de la barra de fórmules i, a continuació, torneu el cursor a la barra de fórmules. Si l'error continua o no veieu cap valor, seleccioneu la pestanya Visualització, seleccioneu Fonts de dades i, a continuació, actualitzeu la taula Comandes seleccionant els punts suspensius (...) a la dreta del nom de la font de dades.

    En especificar ThisItem.Customer, esteu utilitzant una relació de diversos a un entre les taules Comandes i Clients i torneu a recuperar el registre de client que està associat a cada comanda. Al registre del client, s'extreuen les dades de la columna Empresa per a la visualització.

    Podeu mostrar totes les relacions des de la taula Comandes a altres taules, inclosa la taula Client:

    Llista de relacions

  11. Per tancar la subfinestra Dades, seleccioneu la icona de tancament (x) a la part superior dreta.

Mostrar l'estat de cada comanda

En aquest procediment, afegireu espai a la galeria per a una etiqueta i la configurareu per mostrar l'estat de cada comanda en un color diferent segons les dades.

  1. A la plantilla de la galeria, reduïu l'amplada de la primera etiqueta, Title1:

    Title1 a la plantilla de la galeria

  2. Repetiu el pas anterior amb la segona etiqueta, Subtitle1:

    Subtitle1 a la plantilla de la galeria

  3. Amb la plantilla de la galeria (o un control de la plantilla) seleccionada, seleccioneu Etiqueta a la pestanya Insereix:

    Afegir una etiqueta.

  4. Desplaceu l'etiqueta nova a la dreta de l'etiqueta Title1:

    Desplaçar i redimensionar una etiqueta.

  5. Definiu la propietat Text de l'etiqueta nova per mostrar aquesta expressió:

    ThisItem.'Order Status'
    

    Definir la propietat Text.

    A la taula Comandes, el camp Estat de la comanda té un valor de l'elecció Estat de les comandes. Una elecció és semblant a una enumeració d'altres eines de programació. Cada conjunt d'opcions es defineix a la base de dades, de manera que els usuaris només poden especificar les opcions que hi ha al conjunt. L'elecció Estat de les comandes també és global, no local, perquè la pugueu utilitzar en altres taules:

    Opció d'estat de les comandes

    Cada opció d'un conjunt té un nom que apareix si es mostra en una etiqueta. Aquests noms es poden localitzar i l'aplicació reconeix la mateixa opció si un usuari anglès selecciona Apple, un usuari francès selecciona Pomme o un usuari espanyol, selecciona Manzana. Per aquesta raó, no podeu crear una fórmula que depengui d'una cadena codificada per a una opció (aquest tema s'explica més endavant).

    A les fórmules, heu d'envoltar Estat de la comanda amb cometes simples perquè conté un espai. Tanmateix, aquest nom funciona de la mateixa manera que qualsevol altre nom del Power Apps, com ara Client o Empresa.

  6. A la pestanya Inici, augmenteu la mida del tipus de lletra de l'etiqueta d'estat a 20 punts i alineeu el text a la dreta:

    Canviar la mida i l'alineació del tipus de lletra.

  7. A la barra de fórmules, definiu la propietat Color de l'etiqueta d'estat en aquesta fórmula:

    Switch( ThisItem.'Order Status',
        'Orders Status'.Closed, Green,
        'Orders Status'.New, Black,
        'Orders Status'.Invoiced, Blue,
        'Orders Status'.Shipped, Purple
    )
    

    Definir la propietat Color de l'etiqueta d'estat.

    El Power Apps evita que creeu una fórmula que depengui d'una cadena codificada per a cada opció d'un conjunt perquè aquestes fórmules podrien produir resultats inapropiats si els noms de les opcions es troben localitzats. En lloc d'això, la funció Switch determina el color en funció de qualsevol cadena que aparegui a l'etiqueta segons la configuració de l'usuari.

    Amb aquesta fórmula aplicada, els valors d'estat diferents apareixen en diferents colors, tal com es mostra al gràfic anterior.

Visualitzar el total de cada comanda

  1. Seleccioneu el primer element de la galeria, que és la plantilla de la galeria:

    Seleccionar la plantilla de la galeria.

  2. A la pestanya Insereix, seleccioneu Etiqueta per afegir una altra etiqueta:

    Afegir una altra etiqueta.

  3. Desplaceu l'etiqueta nova per tal que aparegui a l'etiqueta d'estat següent:

    Redimensionar i desplaçar l'etiqueta nova.

  4. A la barra de fórmules, definiu la propietat Text de l'etiqueta nova per mostrar aquesta fórmula:

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

    Fórmula per calcular el cost total d'una comanda

    En aquesta fórmula, la funció Suma afegeix els registres a la taula Detalls de la comanda que s'associen amb cada registre de la taula Comanda amb una relació d'un a diversos. Aquests elements de línia conformen cada comanda i utilitzareu la mateixa relació d'un a diversos per mostrar i editar els elements de línia a l'àrea inferior dreta de la pantalla.

    En aquesta fórmula es mostra un subratllat blau i un advertiment de delegació perquè el Dataverse no admet la delegació de funcions agregades complexes (per exemple, la suma d'una multiplicació). Podeu ignorar aquesta informació perquè no hi ha cap comanda en aquest exemple que contingui més de 500 elements de línia. Si cal per a una altra aplicació, podeu augmentar-ne el límit a la Configuració de l'aplicació.

    La funció Text d'aquesta fórmula afegeix un símbol monetari i formata el resultat amb separadors de milers i decimals. Com s'indica, la fórmula inclou l'etiqueta de llengua per a l'anglès dels EUA ([$-en-US]) i el símbol del dòlar ($). Si suprimiu l'etiqueta de llengua, se substituirà per una de les opcions de configuració de la llengua i l'etiqueta mostrarà els formats adients per a l'etiqueta. Si deixeu el símbol del dòlar, l'etiqueta mostrarà el símbol monetari adient segons la configuració de l'usuari. No obstant això, podeu fer que aparegui un símbol diferent si substituïu el símbol del dòlar per aquell que preferiu.

  5. A la pestanya Inici, canvieu la mida del tipus de lletra de l'etiqueta més recent a 20 punts i alineeu el text a la dreta:

    Canviar la mida del tipus de lletra i l'alineació d'una etiqueta.

  6. Desplaceu la galeria a la vora esquerra de la pantalla i reduïu l'amplada de la galeria per tancar-ne l'espai.

  7. Augmenteu l'alçada de la galeria de manera que sigui gairebé tan alta com la pantalla, però deixeu una mica d'espai a la part superior per a una barra de títol, que afegireu a l'inici del tema següent:

    Desplaçar i redimensionar la galeria.

Resum

Per recapitular, heu començat a crear una aplicació de llenç de pantalla única afegint la galeria de comandes, que inclou aquests elements:

  • Una expressió per mostrar el número de comanda: "Orders " & ThisItem.OrderNumber
  • Un camp d'una relació de diversos a un: ThisItem.Customer.Company
  • Una etiqueta que mostra el nom d'una opció d'un conjunt: ThisItem.'Order Status'
  • Una etiqueta que canvia el format en funció de l'opció d'un conjunt que mostra l'etiqueta: Switch( ThisItem.'Order Status', 'Orders Status'.Closed, Green, ...
  • Una funció agregada complexa d'una relació d'un a diversos: Sum( ThisItem.'Order Details', Quantity * 'Unit Price' )

Tema següent

Al tema següent, afegireu un control Edita el formulari per mostrar i editar un resum de qualsevol comanda que l'usuari seleccioni a la galeria que acabeu de crear.

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