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.
Selezionare la tabella Items e quindi Connetti.

La raccolta è ora connessa alla tabella di Excel in OneDrive for Business ed è possibile visualizzare i dati nel controllo Raccolta.

Visualizzazione e interazione con i dati di una raccolta

Selezionare la raccolta aggiunta.
Nel riquadro delle proprietà a destra selezionare la proprietà Layout dal menu a discesa.
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 sarà "Body1", come illustrato nell'immagine seguente):
- Body: Description
- Image: Image
- Subtitle: UnitPrice
- Title: Name
Chiudere la finestra di dialogo Dati selezionando X in alto a destra.
Nella raccolta selezionare il prezzo nella prima riga.
Assicurarsi che nella barra della formula sia selezionata la proprietà Text e digitare quanto segue:

"$" & ThisItem.UnitPrice
Nella raccolta selezionare l'immagine nella prima riga.
Nel riquadro delle proprietà a destra selezionare la proprietà Image Position 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:
```
 Collect(colItemsCollection, Items)`
```
colItemsCollection: si riferisce al nome della raccolta.

Items: si riferisce al nome dell'origine dati

Collect: 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.
Nella finestra di dialogo Selezionare l'origine dati per la nuova tabella di dati, selezionare colItemsCollection.

È stata creata la raccolta colItemsCollection come origine dati per il controllo e non la tabella Items nel foglio Excel. Il prossimo passaggio consiste nel definire i campi da visualizzare.
Nel riquadro delle proprietà a destra fare clic sul pulsante Modifica campi per la proprietà Fields.
Selezionare Aggiungi campo.
Selezionare tutti i campi disponibili, quindi scegliere Aggiungi.
Chiudere il riquadro Dati selezionando la X a destra di Dati.
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))
```
Se si seleziona questo pulsante, si crea una nuova raccolta denominata colAddCollection, che copia tutti i dati dalla raccolta colItemsCollection e, usando la funzione AddColumns aggiunge una nuova colonna denominata Revenue, calcolata come UnitPrice * UnitsSold.
Selezionare il pulsante Eliminai colonna sul canvas e aggiornare la proprietà OnSelect su questa espressione:
```
Collect(colDropCollection, DropColumns(colItemsCollection, "UnitPrice"))
```
Se si seleziona questo pulsante, si crea una nuova raccolta denominata colDropCollection, che copia tutti i dati dalla raccolta colItemsCollection e, usando la funzione DropColumns, rimuove la colonna UnitPrice.
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.

Al termine i pulsanti saranno simili alla seguente immagine:
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. Abbiamo creato quattro raccolte aggiuntive.
Esaminiamo le quattro nuove raccolte che abbiamo creato. 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. Si può selezionare ciascun menu per vedere l'effetto sulla raccolta originale visualizzata nella nostra 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. La schermata avrà il seguente aspetto:
Quindi inserire 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 visualizza 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 come segue:
```
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 per aggiornare la descrizione del prodotto.

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 da modificare. 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. La descrizione della raccolta cambia e viene usata quella nuova.

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

Complimenti. È stata appresa una tecnica per aggiornare l'origine dati.

Continua