Esercizio: Modifica della forma dei dati con le app canvas

  • 15 minuti

In questo esercizio si procederà a modificare la forma dei dati dell'app canvas.

Per completare l'esercizio, sarà 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

  1. Accedere a Power Apps.

  2. Selezionare + Crea sul lato sinistro.

  3. Selezionare Inizia con un canvas vuoto.

    Screenshot della vista raccolta nell'app.

  4. Selezionare la Dimensione tablet.

  5. Seleziona l'icona Salva nell'angolo in alto a destra e assegnare il nome "ShapeData".

  6. Accertarsi di avere aggiunto questo foglio di calcolo di Excel a OneDrive.

  7. Nell'elenco a discesa Inserisci selezionare Raccolta verticale.

    Screenshot della selezione della vista Raccolta verticale nell'app.

  8. Nella casella di ricerca del menu a comparsa visualizzato digitare OneDrive for Business, quindi selezionare OneDrive for Business nell'elenco. Se necessario, espandere Connettori e scorrere tutti i connettori disponibili finché non si trova il connettore OneDrive for Business.

    Screenshot della vista raccolta con l'aggiunta di OneDrive for Business nell'app.

  9. Selezionare + Aggiungi una connessione.

  10. Nella parte inferiore di OneDrive for Business selezionare Connetti.

  11. Alla richiesta Scegliere un file di Excel, scegliere il percorso in cui si è memorizzato il file di Excel scaricato al passaggio 3 e selezionarlo.

  12. Selezionare la tabella Items e quindi Connetti.

A questo punto, la connessione alla tabella di Excel in OneDrive for Business è stata stabilita ed è possibile visualizzare i dati nel controllo raccolta.

  1. Selezionare la raccolta aggiunta.

  2. Nel riquadro delle proprietà a destra selezionare la proprietà Layout dal menu a discesa.

  3. Selezionare il layout Immagine, titolo, sottotitolo e corpo.

    Screenshot della vista delle proprietà della raccolta nell'app.

  4. Nel riquadro delle proprietà a destra selezionare il testo viola 8 selezionato accanto alla proprietà Fields e impostare le opzioni di seguito:

    • Body1: Descrizione

    • Image2: Immagine

    • Subtitle2: UnitPrice

    • Title2: Nome

    Screenshot del layout della vista Proprietà dell'app.

  5. Per uscire, fare clic sulla X a destra di Dati.

  6. Nella raccolta selezionare il prezzo nella prima riga.

  7. Accertarsi che nella barra della formula sia selezionato Testo e digitare quanto segue.

    "$" & ThisItem.UnitPrice

    Screenshot della vista della selezione visibile nell'app.

  8. Nella raccolta selezionare l'immagine nella prima riga.

  9. Nel riquadro delle proprietà a destra selezionare la proprietà Image Position nel menu a discesa.

    Screenshot dell'opzione 8 selezionato nell'app.

  10. Selezionare Fill. L'immagine riempirà lo spazio disponibile.

Si è così completata la configurazione e si è sperimentata l'interazione con i dati della raccolta.

  1. Selezionare la raccolta.

  2. Accertarsi che nella barra della formula sia selezionata la proprietà Items.

  3. Modificare l'espressione come segue:

    Filter(Items, Origin = "China")

    Ora la raccolta mostra solo due articoli, con China come origine.

  4. Provare ora a eseguire la stessa operazione, ma usando l'operatore And:

    Filter(Items, Origin = "China" And UnitsSold > 25)

    Ora la raccolta mostra solo un elemento che soddisfa entrambi i criteri specificati.

    Screenshot che mostra l'elemento selezionato nell'app.

  5. A questo punto si reimposterà la proprietà Items sull'origine dati di Items. Si userà nuovamente la funzione Filter più avanti.

    Items

Uso della funzione Search

  1. Nell'elenco a discesa Inserisci selezionare Input di testo. Posizionare l'input di testo sopra la raccolta.

  2. Nel pannello a sinistra, in Visualizzazione struttura ad albero > Schermate > Screen1 > selezionare i tre puntini di sospensione a destra, quindi scegliere Rinomina per rinominare l'input di testo in SearchInput. Il componente verrà rinominato per potervi fare riferimento in seguito.

    Screenshot dell'opzione Cerca nell'app.

  3. Selezionare la raccolta. Accertarsi che nella barra della formula sia selezionata la proprietà Items, quindi scrivere la seguente espressione:

    Search(Items, SearchInput.Text, Name)

    L'espressione contiene quanto segue:

    Search(Items...): una funzione che consente di eseguire una query più flessibile su una colonna di stringa.

    SearchInput.Text: recupera il testo digitato nel controllo Text Input SearchInput.

    Name: rappresenta la/e colonna/e in cui viene effettuata la ricerca.

    Vengono restituite tutte le righe in cui la colonna Name contiene il valore immesso nel controllo Text Input SearchInput.

  4. Se si desidera effettuare la ricerca in più colonne di stringhe, è possibile aggiungere i nomi delle colonne alla fine dell'espressione. Nella formula seguente è stato aggiunto "Description".

    Search(Items, SearchInput.Text, Name, Description)

Combinazione delle funzioni di modifica della forma dei dati

Come spiegato nell'unità 3, è possibile combinare funzioni per implementare funzionalità più complesse nell'applicazione. Dopo avere testato le funzioni Filter e Search, è il momento di combinarle in un'unica funzione.

  1. Iniziare con la funzione Search completata nel passaggio precedente.

  2. Sostituire Items con Filter(Items, Origin = "China") per ottenere l'espressione seguente:

    Search(Filter(Items, Origin = "China"), SearchInput.Text, Name, Description)

Per la funzione Search, la prima opzione che occorre fornire è una tabella di dati. La funzione Filter restituisce una tabella di dati. Ciò significa che è possibile usare la funzione Filter come origine dati per la funzione Search. Aggiungendo questo concetto come formula per la proprietà Items del controllo Gallery, si permette agli utenti di visualizzare i dati necessari con l'aggiunta della funzionalità di ricerca.

All'interno di Power Apps è possibile avvalersi del concetto di uso di un'unica funzione per fornire informazioni a un'altra funzione in diverse posizioni.

Spostamento dei dati tra raccolte e origini dati

  1. Inserire un controllo pulsante selezionando il menu a discesa Inserisci. Selezionare quindi Pulsante e posizionare il nuovo controllo Pulsante sotto la raccolta.

  2. Modificare il testo del pulsante in Aggiungi a raccolta.

  3. Selezionare il pulsante e, nella barra della formula, sostituire false con questa espressione:

    Collect(ItemsCollection, Items)

    ItemsCollection: si riferisce al nome della raccolta.

    Items: si riferisce al nome dell'origine dati.

    Collect: copia tutte le righe da Items nella raccolta ItemsCollection.

    Screenshot della vista raccolte nell'app.

  4. Eseguire (visualizzare in anteprima) l'app selezionando l'icona Esegui nell'angolo in alto a destra. Premere il pulsante Aggiungi a raccolta. Per chiudere la modalità di anteprima, selezionare la X nell'angolo in alto a destra.

  5. Selezionare la scheda Variabili sul lato sinistro, espandere Raccolte, quindi selezionare ItemsCollection. Tutte le righe dell'origine dati Items risultano aggiunte alla raccolta ItemsCollection.

    Screenshot della vista variabili nell'app.

  6. Nel menu a discesa Inserisci selezionare Tabella dati e posizionarla accanto alla raccolta.

  7. Accertarsi che nella barra della formula sia selezionato Items, quindi immettere ItemsCollection.

    In questo modo si specifica che l'origine dati della tabella è la raccolta ItemsCollection e non la tabella Items nel foglio di Excel.

  8. Nel riquadro delle proprietà a destra modificare i campi selezionando il testo viola 2 selezionato accanto alla proprietà Fields.

  9. Selezionare + Aggiungi campo.

  10. Selezionare tutte le colonne disponibili, quindi scegliere Aggiungi.

    Screenshot della vista colonne disponibili nell'app.

  11. Per uscire, fare clic sulla X a destra di Dati.

  12. Nella scheda Inserisci selezionare Pulsante e posizionare il pulsante sotto la tabella. Ripetere questa procedura quattro volte.

  13. Modificare il testo di tutti e quattro i pulsanti rispettivamente in Aggiungi colonna, Elimina colonna, Mostra colonna e Rinomina colonna.

    Screenshot del testo sui pulsanti nell'app.

  14. Selezionare il pulsante Aggiungi colonna.

  15. Aggiornare la barra della formula alla seguente espressione:

    Collect(AddCollection, AddColumns(ItemsCollection, Revenue, UnitPrice * UnitsSold))

    Qui si è creata una nuova raccolta denominata AddCollection, che copia tutti i dati dalla raccolta ItemsCollection. Inoltre si è usata la funzione AddColumns per aggiungere una nuova colonna chiamata Ricavi, che viene calcolata come UnitPrice * UnitsSold.

  16. Selezionare il pulsante Elimina colonna.

  17. Aggiornare la barra della formula alla seguente espressione:

    Collect(DropCollection, DropColumns(ItemsCollection, UnitPrice))

    Qui si è creata una nuova raccolta denominata DropCollection, che copia tutti i dati dalla raccolta ItemsCollection. Inoltre si è usata la funzione DropColumns per rimuovere la colonna UnitPrice.

  18. Selezionare il pulsante Rinomina colonna.

  19. Aggiornare la barra della formula alla seguente espressione:

    Collect(RenameCollection, RenameColumns(ItemsCollection, Name, Product))

    Qui si è creata una nuova raccolta denominata RenameCollection, che copia tutti i dati dalla raccolta ItemsCollection. Inoltre si è usata la funzione RenameColumns per rinominare la colonna Nome in Prodotto.

  20. Selezionare il pulsante Mostra colonna.

  21. Aggiornare la barra della formula alla seguente espressione:

    Collect(ShowCollection, ShowColumns(ItemsCollection, Name))

    Qui si è creata una nuova raccolta denominata ShowCollection, che copia tutti i dati dalla raccolta ItemsCollection. Inoltre si è usata la funzione ShowColumns per mostrare solo la colonna Nome.

  22. Eseguire (visualizzare in anteprima) l'app selezionando l'icona Esegui nell'angolo in alto a destra. Premere tutti e quattro i pulsanti. Per chiudere la modalità di anteprima, selezionare la X nell'angolo in alto a destra.

  23. Selezionare la scheda Variabili sul lato sinistro ed espandere Raccolte; verranno così visualizzate tutte le raccolte con i risultati della selezione dei pulsanti.

    Screenshot della vista raccolta espansa nell'app.

Questo breve esercizio ha illustrato alcune delle possibilità di modellazione dei dati nell'app.