Creare una raccolta di dettagli in un'app canvas

Articolo
03/16/2023

Segui le istruzioni dettagliate per creare una raccolta di dettagli in un'app canvas per la gestione di dati fittizi nel database Northwind Traders. Questo argomento fa parte di una serie che spiega come creare un'app aziendale su dati relazionali in Microsoft Dataverse. Per i migliori risultati, esplora gli argomenti in questa sequenza:

Creare una raccolta di ordini.
Crea un modulo di riepilogo.
Creare una raccolta di dettagli (questo argomento).

Definizione delle aree dello schermo.

Prerequisiti

Prima di iniziare, devi installare il database come descritto in precedenza in questo argomento. Quindi devi creare la raccolta di ordini e il modulo di riepilogo o aprire l'app Northwind Orders (Canvas) - Begin Part 3 che contiene già la raccolta e il modulo.

Creare un'altra barra del titolo

Nella parte superiore dello schermo, seleziona il controllo Etichetta che funge da barra del titolo, copialo premendo CTRL + C, quindi incollalo premendo CTRL + V:
Ridimensiona e sposta la copia in modo che appaia appena sotto il modulo di riepilogo.
Rimuovi il testo dalla copia in uno dei seguenti modi:
- Fai doppio clic sul testo per selezionarlo, quindi premi Elimina.
- Imposta la proprietà Text dell'etichetta su una stringa vuota ("").

Aggiungere una raccolta

Inserisci un controllo Raccolta con un layout Vuota verticale:

La nuova raccolta, che mostra i dettagli dell'ordine, appare nell'angolo in alto a sinistra.
Chiudi la finestra di dialogo dell'origine dati, quindi ridimensiona e sposta la raccolta di dettagli nell'angolo in basso a destra, sotto la nuova barra del titolo:
Imposta la proprietà Items della raccolta di dettagli su questa formula:
```
Gallery1.Selected.'Order Details'
```
Se viene visualizzato un errore, verifica che la raccolta di ordini sia denominata Gallery1 (nel riquadro Visualizzazione ad albero vicino al bordo sinistro). Se la raccolta ha un nome diverso, rinominala in Gallery1.

Hai appena collegato le due raccolte. Quando l'utente seleziona un ordine nella raccolta degli ordini, tale selezione identifica un record nella tabella Ordini. Se tale ordine contiene una o più voci, il record nella tabella Ordini è collegato a uno o più record nella tabella Dettagli ordine tabella e i dati di tali record vengono visualizzati nella raccolta dei dettagli. Questo comportamento riflette la relazione uno a-molti che è stata creata per te tra le tabelle Ordini e Dettagli ordine. La formula che hai specificato "accompagna" la relazione usando la notazione punto:

Mostrare i nomi di prodotto

Nella raccolta di dettagli seleziona Aggiungi un elemento dalla scheda Inserisci per selezionare il modello della raccolta:

Assicurati di aver selezionato il modello della raccolta e non la raccolta stessa. Il rettangolo di selezione deve essere leggermente all'interno del limite della raccolta e probabilmente più corto dell'altezza della raccolta. Quando inserisci i controlli in questo modello, vengono ripetuti per ciascun elemento nella raccolta.
Nella scheda Inserisci, inserire un'etichetta nella raccolta di dettagli.

L'etichetta appare all'interno della raccolta; in caso contrario, riprova, ma assicurati di selezionare il modello della raccolta prima di inserire l'etichetta.
Imposta la proprietà Text della nuova etichetta su questa formula:
```
ThisItem.Product.'Product Name'
```
Se non viene visualizzato alcun testo, seleziona la freccia per Order 0901 verso la fine della raccolta di ordini.
Ridimensiona l'etichetta in modo che appaia il testo completo:

Questa espressione proviene da un record nella tabella Dettagli ordine. Il record è contenuto in ThisItem oltre alla tabella Prodotti ordine attraverso una relazione molti a uno:

La colonna Nome prodotto (e altre colonne che stai per utilizzare) vengono estratte:

Mostrare le immagini del prodotto

Nella scheda Inserisci, inserisci un controllo Immagine nella raccolta di dettagli:
Ridimensiona e sposta l'immagine e l'etichetta in modo che siano affiancate.

Suggerimento

Per un controllo accurato delle dimensioni e della posizione di un controllo, inizia a ridimensionare o spostarlo senza premere il tasto ALT, quindi continua a ridimensionare o spostare il controllo mentre tieni premuto il tasto ALT:
Imposta la proprietà Image dell'immagine su questa formula:
```
ThisItem.Product.Picture
```
Ancora una volta, l'espressione fa riferimento a un prodotto associato a questo dettaglio dell'ordine ed estrae il campo Picture da visualizzare.
Riduci l'altezza del modello della raccolta in modo che più di un record Order Detail appare alla volta:

Mostra la quantità e il costo del prodotto

Nella scheda Inserisci, inserisci un'altra etichetta nella raccolta di dettagli, quindi ridimensiona e sposta la nuova etichetta a destra delle informazioni sul prodotto.
Imposta la proprietà Text della nuova etichetta su questa espressione:
```
ThisItem.Quantity
```
Questa formula estrae le informazioni direttamente dalla tabella Dettagli ordine (nessuna relazione richiesta).
Nella scheda Home, cambia l'allineamento di questo controllo su Destra:
Nella scheda Inserisci, inserisci un'altra etichetta nella raccolta di dettagli, quindi ridimensiona e sposta l'etichetta a destra dell'etichetta della quantità.
Imposta la proprietà Text della nuova etichetta su questa formula:
```
Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Se non includi il tag della lingua ([$-en-US]), verrà aggiunto automaticamente in base alla lingua e all'area geografica. Se usi il tag di una lingua diversa, ti consigliamo di rimuovere il $ subito dopo la parentesi quadra di chiusura (]), quindi aggiungi il tuo simbolo di valuta in quella posizione.
Nella scheda Home, cambia l'allineamento di questo controllo su Destra:
Nella scheda Inserisci, inserisci un altro controllo Etichetta nella raccolta di dettagli, quindi ridimensiona e sposta la nuova etichetta a destra del prezzo unitario.
Imposta la proprietà Text della nuova etichetta su questa formula:
```
Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Di nuovo, se non includi il tag della lingua ([$-en-US]), verrà aggiunto automaticamente in base alla lingua e all'area geografica. Se il tag è diverso, ti consigliamo di utilizzare il tuo simbolo di valuta al posto di $ subito dopo la parentesi quadra di chiusura (]).
Nella scheda Home, cambia l'allineamento di questo controllo su Destra:

Per ora hai finito di aggiungere i controlli alla raccolta di dettagli.
Nel riquadro Visualizzazione ad albero seleziona Screen1 per verificare che la raccolta di dettagli non sia più selezionata.

Aggiungere testo alla nuova barra del titolo

Nella scheda Inserisci, inserisci un'altra etichetta sullo schermo:
Ridimensiona e sposta la nuova etichetta sopra le immagini dei prodotti nella seconda barra del titolo, quindi cambia il colore del testo in bianco nella scheda Home.
Fai doppio clic sul testo dell'etichetta e quindi digita Product:
Copia e incolla l'etichetta del prodotto, quindi ridimensiona e sposta la copia sopra la colonna della quantità.
Fai doppio clic sul testo della nuova etichetta e quindi digita Quantity:
Copia e incolla l'etichetta della quantità, quindi ridimensiona e sposta la copia sopra la colonna del prezzo unitario.
Fai doppio clic sul testo della nuova etichetta e quindi digita Unit Price:
Copia e incolla l'etichetta del prezzo unitario, quindi ridimensiona e sposta la copia sopra la colonna del prezzo esteso.
Fai doppio clic sul testo della nuova etichetta e quindi digita Extended.

Visualizzare i totali dell'ordine

Riduci l'altezza della raccolta di dettagli per fare spazio ai totali dell'ordine nella parte inferiore dello schermo:
Copia e incolla la barra del titolo al centro dello schermo, quindi sposta la copia nella parte inferiore dello schermo:
Copia e incolla l'etichetta del prodotto dalla barra del titolo centrale, quindi sposta la copia nella barra del titolo in basso, a sinistra della colonna Quantity.
Fai doppio clic sul testo della nuova etichetta e quindi digita questo testo:
Order Totals:
Copia e incolla l'etichetta dei totali dell'ordine, quindi ridimensiona e sposta la copia a destra dell'etichetta dei totali dell'ordine.
Imposta la proprietà Text della nuova etichetta su questa formula:
```
Sum( Gallery1.Selected.'Order Details', Quantity )
```
Questa formula mostra un avviso di delega, ma puoi ignorarlo perché nessun singolo ordine conterrà più di 500 prodotti.
Nella scheda Home, imposta l'allineamento del testo della nuova etichetta su Destra:
Copia e incolla il controllo Etichetta, quindi ridimensiona e sposta la copia sotto la colonna Extended.
Imposta la proprietà Text della copia su questa formula:
```
Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
```
Questa formula mostra un avviso di delega, ma puoi ignorarlo perché nessun singolo ordine conterrà più di 500 prodotti.

Aggiungere spazio per nuovi dettagli

In qualsiasi raccolta, puoi mostrare i dati, ma non puoi aggiornarli o aggiungere record. Nella raccolta dei dettagli, aggiungerai un'area in cui l'utente può configurare un record nella tabella Dettagli ordine e inserisci quel record in un ordine.

Riduci l'altezza della raccolta di dettagli in modo da creare uno spazio per la modifica di un singolo elemento sotto quella raccolta.

In questo spazio, aggiungi i controlli in modo che l'utente possa aggiungere un dettaglio dell'ordine:
Nella scheda Inserisci inserisci un'etichetta, quindi ridimensionala e spostala nella raccolta dei dettagli.
Fai doppio clic sul testo della nuova etichetta e quindi premi Elimina.
Nella scheda Home, imposta il colore di riempimento della nuova etichetta su LightBlue:

Selezionare un prodotto

Nella scheda Inserisci seleziona Controlli > Casella combinata:

Il controllo Casella combinata appare nell'angolo in alto a sinistra.
Nella finestra di dialogo a comparsa, seleziona l'origine dati Prodotti ordine.
Nella scheda Proprietà per la casella combinata, seleziona Modifica (accanto a Campi) per aprire il riquadro Dati. Assicurati che Testo principale e SearchField siano impostati su nwind_productname.

Specifichi il nome logico perché il riquadro Dati non supporta ancora i nomi visualizzati in questo caso:
Chiudi il riquadro Dati.
Nella scheda Proprietà vicino al bordo destro, scorri verso il basso, disattiva Consenti selezione multipla e assicurati che Consenti la ricerca sia attivato:
Ridimensiona e sposta la casella combinata nell'area azzurra, proprio sotto la colonna del nome del prodotto nella raccolta di dettagli:

In questa casella combinata, l'utente specificherà un record nella tabella Prodotto per il record Dettagli ordine che l'app creerà.
Tenendo premuto il tasto ALT, seleziona la freccia GIÙ della casella combinata.

Suggerimento

Tenendo premuto il tasto ALT puoi interagire con i controlli in Power Apps Studio senza aprire la modalità Anteprima.
Nell'elenco dei prodotti visualizzato seleziona un prodotto:

Aggiungere l'immagine di un prodotto

Nella scheda Inserisci seleziona File multimediali > Immagine:

Il controllo Immagine appare nell'angolo in alto a sinistra:
Ridimensiona e sposta l'immagine nell'area azzurra sotto le altre immagini del prodotto e accanto alla casella combinata.
Imposta la proprietà Image dell'immagine su:
```
ComboBox1.Selected.Picture
```
Stai usando lo stesso trucco che hai usato per mostrare l'immagine del dipendente nel modulo di riepilogo. La proprietà Selected della casella combinata restituisce l'intero record di qualsiasi prodotto selezionato dall'utente, incluso il campo Picture.

Aggiungere una casella di quantità

Nella scheda Inserisci seleziona Testo > Input di testo:

Il controllo Input di testo appare nell'angolo in alto a sinistra:
Ridimensiona e sposta la casella di input di testo a destra della casella combinata sotto la colonna della quantità nella raccolta di dettagli:

Utilizzando questa casella di input di testo, l'utente specifica il campo Quantity del record Order Details.
Imposta la proprietà Default di questo controllo su "":
Nella scheda Home, imposta l'allineamento del testo di questo controllo su Destra:

Mostrare il prezzo unitario ed esteso

Nella scheda Inserisci, inserisci un controllo Etichetta.

L'etichetta appare nell'angolo in alto a sinistra dello schermo:
Ridimensiona e sposta l'etichetta a destra del controllo Input di testo e imposta la proprietà Text dell'etichetta su questa formula:
```
Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Questo controllo mostra il Prezzo di listino dalla tabella Prodotti ordine. Questo valore determinerà il campo Unit Price nel record Order Details.

Nota

Per questo scenario, il valore è di sola lettura, ma altri scenari potrebbero richiedere all'utente dell'app di modificarlo. In tal caso, utilizza un controllo Input di testo e impostane la proprietà Default su List Price.
Nella scheda Home, imposta l'allineamento del testo dell'etichetta del prezzo di listino su Destra:
Copia e incolla l'etichetta del prezzo di listino, quindi ridimensiona e sposta la copia a destra dell'etichetta del prezzo di listino.
Imposta la proprietà Text della nuova etichetta su questa formula:
```
Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Questo controllo mostra il prezzo esteso in base alla quantità specificata dall'utente dell'app e al prezzo di listino del prodotto selezionato dall'utente dell'app. È puramente informativo per l'utente dell'app.
Fai doppio clic sul controllo Input di testo per quantità, quindi digita un numero.

L'etichetta del prezzo esteso viene ricalcolata per mostrare il nuovo valore:

Aggiungere un'icona Aggiungi

Nella scheda Inserisci seleziona Icone > Aggiungi:

L'icona appare nell'angolo in alto a sinistra dello schermo.
Ridimensiona e sposta questa icona sul bordo destro dell'area azzurra, quindi imposta la proprietà OnSelect dell'icona su questa formula:
```
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 )
```
In generale, la funzione Patch aggiorna e crea i record e gli argomenti specifici in questa formula determinano le modifiche esatte effettuate dalla funzione.
- Il primo argomento specifica il origine dati (in questo caso, la tabella Dettagli ordine) in cui la funzione aggiornerà o creerà un record.
- Il secondo argomento specifica che la funzione creerà un record con i valori predefiniti per la tabella Dettagli ordine se non diversamente specificato nel terzo argomento.
- Il terzo argomento specifica che quattro colonne nel nuovo record conterranno i valori dell'utente.
  - La colonna Order conterrà il numero dell'ordine selezionato dall'utente nella raccolta di ordini.
  - La colonna Product conterrà il nome del prodotto selezionato dall'utente nella casella combinata che mostra i prodotti.
  - La colonna Quantity conterrà il valore specificato dall'utente nella casella di input testo.
  - La colonna Unit Price conterrà il prezzo di listino del prodotto selezionato dall'utente per questo dettaglio dell'ordine.
Nota

Puoi creare formule che utilizzano i dati di qualsiasi colonna (nella tabella Prodotti ordine) per qualsiasi prodotto selezionato dall'utente dell'app nella casella combinata che mostra i prodotti. Quando l'utente seleziona un record nella tabella Prodotti ordine, non solo il nome del prodotto appare in quella casella combinata, ma anche il prezzo unitario del prodotto appare in un'etichetta. Ogni valore di ricerca in un'app canvas fa riferimento a un intero record, non solo a una chiave primaria.

La funzione Aggiorna assicura che la tabella Ordini rifletta il record che hai appena aggiunto alla tabella Dettagli ordine. La funzione Reset cancella i dati relativi a prodotto, quantità e prezzo unitario in modo che l'utente possa creare più facilmente altri dettagli dell'ordine per lo stesso ordine.
Premi F5, quindi seleziona l'icona Aggiungi.

L'ordine riflette le informazioni che hai specificato:
(facoltativo) Aggiungi un altro articolo all'ordine.
Premi Esc per uscire dalla modalità Anteprima.

Rimuovere un dettaglio dell'ordine

Al centro dello schermo, seleziona il modello della raccolta di dettagli:
Nella scheda Inserisci seleziona Icone > Cestino:

L'icona Cestino appare nell'angolo in alto a sinistra del modello della raccolta.
Ridimensiona e sposta l'icona Cestino sul bordo destro del modello della raccolta di dettagli, quindi imposta la proprietà OnSelect dell'icona su questa formula:
```
Remove( 'Order Details', ThisItem ); Refresh( Orders )
```
Al momento della stesura di questo documento, non puoi rimuovere un record direttamente da una relazione, quindi la funzione Rimuovi rimuove un record direttamente dalla tabella correlata. ThisItem specifica il record da rimuovere, preso dallo stesso record nella raccolta di dettagli in cui appare l'icona del cestino.

Ancora una volta, l'operazione utilizza i dati memorizzati nella cache, quindi la funzione Aggiorna informa la tabella Ordini che l'app ha modificato una delle sue tabelle correlate.
Premi F5 per aprire la modalità Anteprima, quindi seleziona l'icona Cestino accanto a ciascun record Order Details che vuoi rimuovere dall'ordine.
Prova ad aggiungere e rimuovere vari dettagli dai tuoi ordini:

In conclusione

Per ricapitolare, hai aggiunto un'altra raccolta per mostrare i dettagli dell'ordine e i controlli per l'aggiunta e la rimozione di un dettaglio dell'ordine nell'app. Hai usato questi elementi:

Un secondo controllo della raccolta, collegato alla raccolta di ordini attraverso una relazione uno-a-molti: Gallery2.Items = Gallery1.Selected.'Order Details'
Una relazione uno a molti tra la tabella Dettagli ordine e la tabella Prodotti ordine: ThisItem.Product.'Product Name' e ThisItem.Product.Picture
La funzione Choices per ottenere un elenco di prodotti: Choices( 'Order Details'.Product' )
La proprietà Selected di una casella combinata come record con relazione molti a uno completo: ComboBox1.Selected.Picture e ComboBox1.Selected.'List Price'
La funzione Patch per creare un record Order Details: Patch( 'Order Details', Defaults( 'Order Details' ), ... )
La funzione Remove per eliminare un record Order Details: Remove( 'Order Details', ThisItem )

Questa serie di argomenti è stata una rapida guida all'uso delle relazioni Dataverse e scelte in un'app canvas per scopi didattici. Prima di rilasciare qualsiasi app in produzione, è necessario considerare la convalida del campo, la gestione degli errori e molti altri fattori.

Nota

Puoi indicarci le tue preferenze di lingua per la documentazione? Partecipa a un breve sondaggio. (il sondaggio è in inglese)

Il sondaggio richiederà circa sette minuti. Non viene raccolto alcun dato personale (Informativa sulla privacy).

Condividi tramite