Esercizio: Modifica della forma dei dati con le app canvas

  • 15 minuti

In questo esercizio si modificherà la forma dei dati dell'app canvas.

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

  1. Accedere a Power Apps.

  2. Creare una nuova app canvas di Power Apps e denominarla "ShapeData". Selezionare il formato Tablet.

  3. Assicurarsi di avere aggiunto questo foglio di calcolo di Excel a OneDrive.

  4. Nella scheda Inserisci selezionare Raccolta e quindi selezionare l'opzione per una raccolta verticale.

  5. Nel riquadro delle proprietà a destra selezionare il menu a discesa per la proprietà Data source.

  6. Nella casella di ricerca digitare OneDrive for Business e selezionare OneDrive for Business nell'elenco. È anche possibile espandere Connettori e scorrere tutti i connettori disponibili finché non si trova il connettore OneDrive for Business.

  7. Selezionare + Aggiungi una connessione.

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

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

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

Formattazione dei dati della raccolta

  1. Selezionare la raccolta aggiunta.

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

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

  4. Nel riquadro delle proprietà a destra selezionare il pulsante Modifica per la proprietà columns e impostare i seguenti valori:

    • Body1: descrizione

    • Image2: immagine

    • Subtitle2: UnitPrice

    • Title2: nome

  5. Selezionare la X a destra di Dati per uscire.

  6. Nella raccolta selezionare il prezzo nella prima riga.

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

    "$" & ThisItem.UnitPrice

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

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

  10. Selezionare Fill: l'immagine riempirà lo spazio disponibile.

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

Filtro dei dati in una raccolta

  1. Selezionare la raccolta.

  2. Assicurarsi 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 la Cina come origine.

  4. Provare la medesima operazione, ma usando l'operatore And.

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

    Ora la raccolta mostra solo un articolo che soddisfa entrambi i criteri sopra.

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

    Items

Uso della funzione Search

  1. Nella scheda Inserisci selezionare Input, quindi selezionare Text Input. Posizionare l'input di testo sopra la raccolta.

  2. Nel pannello a sinistra, in Visualizzazione struttura ad albero > Schermate > Screen1 > selezionare i tre punti a destra, quindi selezionare Rinomina per rinominare l'input di testo in SearchInput. Si rinomina il componente per potervi fare riferimento in seguito.

    Screenshot della visualizzazione raccolta nell'app.

  3. Selezionare la raccolta. Assicurarsi 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.

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

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

  4. Se si desidera cercare più di una colonna, è possibile aggiungere i nomi delle colonne alla fine dell'espressione.

    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, procedere a 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 da 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 consentirà agli utenti di visualizzare i dati necessari con l'aggiunta della funzionalità di ricerca.

All'interno di Power Apps è possibile usare una funzione per fornire informazioni a un'altra funzione in diverse posizioni.

Spostamento dei dati tra raccolte e origini dati

  1. Nella scheda Inserisci selezionare Pulsante e posizionare il 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.

  4. Eseguire l'app. Selezionare il pulsante. Interrompere l'esecuzione dell'app.

  5. Nella scheda Visualizza selezionare Raccolte e quindi ItemsCollection. Tutte le righe dell'origine dati Items risultano aggiunti alla raccolta ItemsCollection.

Altre funzioni che è possibile usare con le raccolte

  1. Nella scheda Inserisci selezionare Nuova schermata e selezionare Vuota.

  2. Nella scheda Inserisci selezionare Tabella dati e posizionarla accanto alla raccolta.

  3. Assicurarsi 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.

  4. Nel riquadro delle proprietà a destra selezionare il pulsante Modifica colonne per la proprietà columns.

  5. Selezionare + Aggiungi colonna.

  6. Selezionare tutte le colonne disponibili, quindi selezionare Aggiungi.

  7. Selezionare la X a destra di Dati per uscire.

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

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

  10. Selezionare il pulsante Aggiungi colonna.

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

  12. Selezionare il pulsante Elimina colonna.

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

  14. Selezionare il pulsante Rinomina colonna.

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

  16. Selezionare il pulsante Mostra colonna.

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

  18. Eseguire l'app. Fare clic su tutti e quattro i pulsanti. Interrompere l'esecuzione dell'app.

  19. Nella scheda Visualizza selezionare Raccolte, quindi selezionare ciascuna delle raccolte aggiuntive create per visualizzare l'effetto prodotto dalle funzioni.