Esercizio - Uso di dati esterni in un'app canvas

15 minuti

In questo esercizio si usano dati esterni nell'app canvas, si aggiunge un'origine dati all'app, si creano e si modificano i dati con le raccolte e si modificano i dati tramite la funzione Patch.

Per completare l'esercizio, è necessario scaricare il foglio di calcolo. Una volta aperta la pagina a cui si riferisce il collegamento, selezionare Download. Estrarre il foglio di calcolo di Excel e caricarlo in OneDrive.

Aggiunta di un'origine dati

Accedere a Power Apps.
Creare una nuova app canvas di Power Apps e denominarla ExternalData. Selezionare il formato Tablet.
Assicurarsi di avere aggiunto il foglio di Excel, di cui si è precedentemente fornito il collegamento, a OneDrive.
Scegliere il pulsante Inserisci della barra multifunzione dell'intestazione e selezionare Raccolta verticale.
Nel riquadro Selezionare l'origine dati della raccolta, digitare "OneDrive" nel campo di ricerca, quindi selezionare OneDrive for Business nell'elenco. In alternativa è possibile espandere Connettori e scorrere l'elenco dei connettori disponibili finché non si trova OneDrive for Business.
In Aggiungi una connessione, selezionare la connessione con l'indirizzo e-mail specificato da usare per OneDrive for Business.
Nella parte inferiore di OneDrive for Business, selezionare Connetti.
Alla richiesta Scegliere un file di Excel, cercare o scorrere l'elenco per selezionare il file di Excel scaricato nel passaggio 3.
Nel pannello Scegli una tabella selezionare la tabella Items e selezionare Connetti.

La raccolta è ora connessa alla tabella Excel denominata "Items" in OneDrive for Business. Accertarsi che la proprietà Items della raccolta sia correlata alla tabella Items; la raccolta dovrebbe ora mostrare tre voci nella tabella.

Visualizzazione e interazione con i dati di una raccolta

Assicurarsi di aver selezionato il controllo Raccolta aggiunto.
Nel riquadro delle proprietà a destra selezionare la proprietà Layout dal menu a discesa. In alternativa, quando si passa il mouse sopra il controllo selezionato, verrà visualizzato un pulsante Layout selezionabile con le stesse opzioni.
Selezionare il layout Immagine, titolo, sottotitolo e corpo.
Nel riquadro delle proprietà sulla destra, selezionare il pulsante Modifica per la proprietà Fields e impostare i campi nel modo indicato di seguito (notare che ai controlli sono associati numeri, ad esempio Body è "Body1", come illustrato nell'immagine seguente):
- Body: Descrizione
- Image: Image
- Subtitle: UnitPrice
- Title: Name
In alternativa, è possibile passare il mouse sul controllo selezionato e scegliere il pulsante Fields nel menu visualizzato sopra il controllo. Una volta apportate le modifiche, è sufficiente selezionare nuovamente il pulsante Fields per chiudere l'opzione.
Chiudere la finestra di dialogo Dati.
Nella raccolta selezionare il prezzo nella prima riga. Notare il pulsante Copilot quando si posiziona il mouse sopra l'etichetta del prezzo unitario per UnitPrice. Si userà Copilot per formattare il valore come prezzo. Selezionare il pulsante Copilot, quindi Formattazione testo.
Nel pannello Formatta testo usando esempi visualizzato sul lato destro della schermata, selezionare il campo di input per Formato desiderato. Ora dovrebbero essere visibili alcune opzioni per la formattazione. Trovare/selezionare l'opzione $6,19.
Una volta completata questa operazione, nel pannello verrà visualizzato un suggerimento per il campo UnitPrice. Copilot ha scritto una formula che trasforma il valore del prezzo unitario in qualcosa che assomiglia a un prezzo. Copilot richiede all'utente di selezionare il suggerimento, quindi è possibile scegliere il pulsante Applica nella parte inferiore del pannello.

Power Apps avvisa che ha aggiornato automaticamente il campo UnitPrice e che i valori nella raccolta ora dovrebbero apparire tutti come valori di valuta.
Nella raccolta selezionare l'immagine nella prima riga.
Nel riquadro delle proprietà a destra selezionare la proprietà Posizione immagine nel menu a discesa.
Modificare la proprietà da Fit a Fill per espandere l'immagine fino alle dimensioni del controllo Immagine.

A questo punti i dati sono stati aggiunti, personalizzati e configurati nella raccolta.

Spostamento dei dati tra raccolte e origini dati

Selezionare Screen1 ovunque al di fuori della raccolta.
Aggiungere un pulsante selezionando Inserisci nella barra multifunzione dell'app. Selezionare Pulsante e posizionare il nuovo controllo Pulsante sotto la raccolta.
Modificare il valore di Text sul pulsante in Aggiungi a raccolta e modificare Font size da 15 a 12 in modo che il testo si adatti al pulsante in un'unica riga.
Selezionare il pulsante e nella barra della formula sostituire il valore false di OnSelect con questa espressione:
```
 ClearCollect(colItemsCollection, Items)
```
colItemsCollection: si riferisce al nome della raccolta.

Items: si riferisce al nome dell'origine dati

ClearCollect: cancella tutte le voci esistenti, quindi copia tutti i record da Items nella raccolta colItemsCollection
Fare clic sul pulsante Anteprima in alto a destra dell'editor Power Apps o premere F5 per accedere alla modalità di anteprima. Selezionare il pulsante Aggiungi a raccolta e uscire dalla modalità di anteprima. In alternativa, tenere premuto ALT e selezionare il pulsante Aggiungi a raccolta.
Nella barra di scorrimento a sinistra selezionare il pulsante Variabili, espandere l'opzione Raccolte, quindi selezionare i puntini di sospensione accanto all'elemento colItemsCollection creato. Selezionare l'opzione Visualizza tabella.
Dovrebbe essere visualizzata una finestra popup che mostra la tabella archiviata nella raccolta. I tre record dell'origine dati Items sono stati aggiunti alla raccolta colItemsCollection. Grazie a questa tecnica, si possono visualizzare qualsiasi raccolta dell'app e altre variabili.
Seleziona Annulla per chiudere la visualizzazione popup e tornare al canvas dell'app.

Altre funzioni che è possibile usare con le raccolte

Dalla Visualizzazione struttura ad albero selezionare Nuova schermata>Vuoto.
Selezionare il pulsante Inserisci, cercare Dati e scegliere Tabella dati. Un controllo Tabella dati permette di visualizzare rapidamente i dati tabulari.
Andare ora al pannello Proprietà a destra e selezionare la tabella Items come origine dati. Name, UnitPrice e UnitsSold verranno visualizzate come colonne nel controllo.
Nella proprietà Items per il controllo Tabella dati eliminare Items e inserire: colItemsCollection
Inserire un pulsante selezionando Inserisci nella barra multifunzione, quindi scegliere Pulsante e posizionare il pulsante sotto la tabella. Aggiungere altri tre pulsanti da sinistra a destra direttamente sotto il controllo della tabella dati sullo schermo.
Modificare il testo di tutti e quattro i pulsanti rispettivamente in Aggiungi colonna, Elimina colonna, Mostra colonna e Rinomina colonna. È sufficiente fare doppio clic su ciascun pulsante e digitare il nuovo nome. Modificare la dimensione del carattere del pulsante Rinomina colonna su 12, in modo che rientri in un'unica riga.
Selezionare il pulsante Aggiungi colonna e aggiornare la proprietà OnSelect su questa espressione:
```
Collect(colAddCollection, AddColumns(colItemsCollection, Revenue, UnitPrice * UnitsSold))
```
Durante questo esercizio si è probabilmente notata l'icona Copilot nella barra della formula. Copilot può fornire una spiegazione del significato della formula.
Selezionare l'icona Copilot nella barra della formula per la proprietà OnSelect del pulsante Aggiungi colonna. A questo punto selezionare Spiega questa formula.

Ora dovrebbe essere visibile una spiegazione della formula simile all'immagine di seguito. Notare anche una funzione Copy che è possibile usare per aggiungere commenti alla formula.

Nell'esempio si ottiene questa spiegazione da Copilot Questa espressione aggiunge una nuova colonna denominata "Revenue" alla tabella "colItemsCollection" moltiplicando insieme le colonne "UnitPrice" e UnitsSold". La tabella aggiornata viene quindi aggiunta alla raccolta "colAddCollection".

È anche possibile copiare la spiegazione di Copilot e aggiungerla alla formula come riga di commento. È sufficiente aggiungere una doppia barra davanti al codice "//" per indicare a Power Apps che la riga non è codice eseguibile.
Selezionare il pulsante Eliminai colonna sul canvas e aggiornare la proprietà OnSelect su questa espressione:
```
Collect(colDropCollection, DropColumns(colItemsCollection, UnitPrice))
```
Provare a usare nuovamente Copilot - Spiega questa formula.
Selezionare il pulsante Mostra colonna e aggiornare la proprietà OnSelect su questa espressione:
```
Collect(colShowCollection, ShowColumns(colItemsCollection, Name))
```
Se si seleziona questo pulsante, si crea una nuova raccolta denominata *colShowCollection, che include tutti i dati della raccolta colItemsCollection, ma usa la funzione ShowColumns per mostrare solo la colonna Name.
Selezionare il pulsante Rinomina colonna e aggiornare la proprietà OnSelect su questa espressione:
```
Collect(colRenameCollection, RenameColumns(colItemsCollection, Name, Product))
```
Se si seleziona questo pulsante, si crea una nuova raccolta denominata colRenameCollection, che include tutti i dati dalla raccolta colItemsCollection, ma, usando la funzione RenameColumns, modifica la colonna Name in Product.
Selezionare il pulsante Anteprima o Riproduci in alto a destra dell'editor di Power Apps per accedere alla modalità di anteprima. Selezionare tutti i quattro pulsanti. Uscire dalla modalità di anteprima. Si è così proceduto a creare quattro raccolte aggiuntive.
Ora si esamineranno le quattro nuove raccolte create. Selezionare Variabili>Raccolte, quindi selezionare il pulsante con i puntini di sospensione accanto a colAddCollection e infine selezionare Visualizza tabella. Notare che nella finestra popup Variabili è presente un menu sul lato sinistro che mostra tutte le quattro nuove raccolte create, insieme alla raccolta originale. È possibile selezionare ciascun menu per vedere l'effetto sulla raccolta originale visualizzata nella tabella di dati.

colAddCollection

colDropCollection

colShowCollection

colRenameCollection

Chiudere la finestra popup Variabili dopo averla esaminata. Ricordare che le raccolte sono tabelle di dati temporanei disponibili solo durante l'uso dell'app e disponibili solo per l'utente corrente. Di conseguenza non sono più disponibili dopo aver chiuso l'app.

Uso della funzione Patch

Tornare a Screen 1 nell'app.
Aggiungere un controllo Etichetta di testo (selezionare il pulsante Inserisci, quindi selezionare Text label). Rinominare la proprietà Text in Nome prodotto. A tale scopo, fare doppio clic sull'etichetta e digitare direttamente nel controllo. Posizionare l'etichetta accanto alla raccolta.

Suggerimento

Una tecnica semplice per copiare e incollare rapidamente un controllo consiste nel selezionare il controllo, tenere premuto il tasto CTRL e premere C, quindi tenendo premuto il tasto CTRL premere V. L'oggetto viene incollato leggermente al di sotto e a destra del controllo appena copiato.
Con l'etichetta selezionata, copiarla e creare come Text dell'etichetta copiata il testo Nuova descrizione.
Usare di nuovo il pulsante Inserisci per inserire un controllo Input di testo. Cancellare la proprietà predefinita per rendere il campo vuoto. Copiare quindi il controllo e posizionare entrambi gli input di testo accanto alle etichette create nei passaggi precedenti. (Se è necessario rivedere la posizione dei controlli, è possibile scorrere verso il basso fino all'immagine nella parte inferiore di questa unità.)
Inserire ora un controllo Pulsante e posizionarlo sotto le etichette. Modificare la proprietà Text in Aggiorna.
Selezionare l'input di testo accanto all'etichetta Nome prodotto.
Nella barra della formula verificare che la proprietà Default sia selezionata, quindi modificare l'espressione nella seguente (tenere presente che il controllo Raccolta potrebbe avere un nome diverso da Gallery1, quindi modificare la formula di conseguenza):
```
Gallery1.Selected.Name
```
Questa etichetta mostra ora il nome del record selezionato dalla raccolta. È possibile eseguire il test impostando la modalità Anteprima per l'app oppure tenendo premuto il tasto ALT e selezionando i vari elementi dalla raccolta. Notare che Nome prodotto cambia mentre si selezionano i diversi elementi della raccolta.
Ripetere questo processo per il controllo Input di testo a destra dell'etichetta Nuova descrizione. Creare la formula Default:
```
Gallery1.Selected.Description
```
Un altro aspetto da notare è la barra verticale scura visualizzata sul lato sinistro dell'elemento della raccolta selezionato.
Selezionare il pulsante Aggiorna.
Modificare la proprietà OnSelect del pulsante con la seguente espressione:
```
Patch(Items,LookUp(Items, Name = TextInput1.Text), { Description: TextInput1_1.Text })
```
Nota

I controlli Input di testo possono avere nomi diversi rispetto all'esempio. Regolare la formula di conseguenza.

Ecco un breve riepilogo dell'esercizio appena completato. È stato creato un modo semplice per aggiornare la descrizione del prodotto selezionato.

Patch: fornisce un modo per modificare o creare un record nell'origine dati, in questo caso abbiamo modificato un record.
LookUp: usa il nome del prodotto per trovare il record specifico da modificare. LookUp restituisce il primo record che corrisponde alla condizione: Name = TextInput1.Text.
Una volta trovato il record corrispondente in Power Apps con LookUp, viene aggiornata la descrizione dell'elemento nell'origine dati in base a quanto è stato digitato nell'input di testo Nuova descrizione.

È possibile eseguire il test impostando l'anteprima per l'app. Selezionare l'elemento Cannella nella raccolta, quindi sostituire la descrizione corrente con "Tè verde aromatizzato alla cannella", quindi selezionare Aggiorna. Dopo alcuni istanti, la descrizione della raccolta cambia e viene usata quella aggiornata.

Screenshot del modulo di output finale con la modifica in Cannella.

L'esercizio è terminato. Si è appresa una tecnica semplice per aggiornare l'origine dati tramite Patch e come usare/modificare i dati all'interno dell'app usando le raccolte.