Esercizio - Creazione della prima app in Power Apps

Completato

Nell'esercizio seguente si creerà la prima app usando una tabella Excel come origine dati. È possibile usare qualsiasi tabella di Excel, purché i dati siano formattati come tabella e archiviati in una posizione accessibile da Microsoft Power Apps, ad esempio OneDrive.

L'esercizio include due parti:

• Generare un'app a tre schermate da una tabella di Excel.

• Creare un'app canvas vuota da completare nelle prossime unità.

Entrambe le app useranno gli stessi dati. L'app a tre schermate funge da riferimento per comprendere in che modo i controlli interagiscono per visualizzare i dati.

Recupero dei dati

Per completare l'esercizio è necessario scaricare i file di App in a Day. Selezionare il collegamento per scaricare i file. Quindi estrarre i file dal file ZIP scaricato. Dopo aver estratto i file, individuare e aprire il file Excel denominato Machine-Order-Data.xslx.

1. Aprire OneDrive in un browser. Selezionare + Aggiungi nuovo>Caricamento file.

   

2. Dalla finestra di dialogo Apri andare alla propria cartella Download e selezionare Machine-Order-Data.xlsx.

3. Selezionare Apri. Cercare "Machine-Order-Data" in OneDrive per verificare che il caricamento sia riuscito.

Creazione di un'app a tre schermate

Ora si creerà un'app per dispositivi mobili a tre schermate.

1. Andare a Power Apps Maker Portal make.powerapps.com e accedere.

2. Dal riquadro di spostamento a sinistra selezionare App.

3. Selezionare Inizia con un modello di app.

   

4. In App per dispositivi mobili incentrate sui dati selezionare Da Excel.

5. In Seleziona la tabella espandere OneDrive for Business, trovare il file Machine-Order_Data.xlsx, selezionare la tabella Macchine e scegliere Crea app.

   

   Power Apps genera un'app per dispositivi mobili funzionante. Se l'app è simile all'immagine seguente, continuare con il passaggio successivo. In caso contrario, andare al passaggio 17.

   

6. Espandere BrowseGallery1 e selezionare Title1. Con Title1 selezionato, spostare il cursore sull'elenco a discesa Proprietà (sopra l'intestazione della visualizzazione struttura ad albero) e selezionare la proprietà denominata Text.

7. Nella barra della formula eliminare il valore esistente e digitare ThisItem. (assicurarsi di inserire il punto). La funzionalità di completamento automatico visualizza un elenco di tutti i campi disponibili per l'elemento corrente nella raccolta.

   

8. Poiché si desidera che il nome della macchina compaia nel titolo, selezionare "Machine Name" dall'elenco a discesa. Notare che la barra della formula ora riporta ThisItem.'Machine Name'. Questa è una formula Power Fx che indica a Power Apps di visualizzare il campo "Machine Name" per ogni elemento nella raccolta.

   Si noti che ogni elemento nella raccolta ora visualizza il proprio nome di macchina. Questo è il vantaggio dell'uso di ThisItem in una raccolta: fa dinamicamente riferimento al record corrente, quindi ogni controllo all'interno della raccolta mostra i dati specifici di quell'elemento.

9. Tornare al pannello di visualizzazione struttura ad albero in BrowseGallery1 e selezionare Subtitle1. Con Subtitle1 ancora selezionato, selezionare la proprietà Text. Questa volta digitare ThisItem.Price nella barra della formula.

   

   Si noti che ora ogni elemento nella raccolta mostra il relativo prezzo.

10. Successivamente, si aggiungerà il colore della macchina a ciascun elemento nella raccolta. Selezionare Body1 in BrowseGallery1 nella visualizzazione struttura ad albero. Con Body1 ancora selezionato, selezionare Text nell'elenco a discesa delle proprietà, quindi digitare ThisItem.Color.

    

11. È anche possibile aggiungere un'immagine della macchina da caffè alla raccolta. Per prima cosa è necessario spostare i campi del titolo, del sottotitolo e del corpo leggermente a destra per fare spazio all'immagine. Tenendo premuto il tasto MAIUSC, selezionare i campi Title1, Subtitle1 e Body1 dal pannello di visualizzazione struttura albero o sul canvas della raccolta. La schermata dovrebbe essere simile a quella illustrata nell'immagine seguente.

    

12. Con tutti e tre i campi ancora selezionati, selezionare X dal menu a discesa delle proprietà. Il valore X è la posizione orizzontale dei campi sullo schermo. Impostare il valore nella barra della formula su 80. In alternativa, è possibile trascinare i campi a destra nel canvas.

13. Selezionare lo spazio vuoto creato a sinistra dei campi Body1, Subtitle1 e Title1. I campi vengono deselezionati e la schermata dovrebbe risultare simile all'immagine seguente.

    

14. Nella barra dei comandi selezionare + Inserisci, digitare immagine nella barra di ricerca, quindi selezionare il controllo Immagine.

    

15. Ridimensionare l'immagine e spostarla sul primo elemento nel canvas finché non è visualizzata correttamente a sinistra dei campi del titolo, del sottotitolo e del corpo.

16. Nel riquadro di visualizzazione struttura ad albero o sul canvas selezionare l'immagine, selezionare Image nell'elenco a discesa delle proprietà, quindi digitare ThisItem.Photo. Le immagini della macchina da caffè vengono ora visualizzate nella raccolta.

    

    Usare le procedure appena apprese per aggiornare le altre schermate, DetailScreen1 e EditScreen1, dell'app in modo che visualizzino i campi desiderati.

17. Per avere un'idea di come l'app apparirà sul dispositivo mobile, usare il pulsante di anteprima in alto a destra, simile a pulsante "riproduci" (accanto all'icona "Salva"). Selezionare il pulsante "Riproduci" (oppure premere F5) e provare l'interfaccia.

    

    Come si può notare, è possibile scorrere l'elenco degli elementi, selezionare un elemento, visualizzare alcuni dettagli dell'elemento, modificare i dettagli dell'elemento e salvare o annullare le modifiche. Quando si crea un'app con il pulsante Excel, è possibile ottenere rapidamente un'app completamente funzionale.

    Usciamo dalla modalità di anteprima premendo la X nell'angolo in alto a destra, quindi salviamo questa app.

18. Selezionare il pulsante Salva e inserire un nome per questa app nel riquadro Salva con nome. Quindi, selezionare Salva.

19. Selezionare il pulsante Indietro in alto a sinistra della barra dei comandi per uscire dall'app.

Dopo aver osservato in che modo Power Apps può creare automaticamente un'app, è possibile iniziare a creare un'app da zero.

Creazione di un'app canvas

1. Partendo da Power Apps Maker Portal (make.powerapps.com), selezionare la scheda Crea.

2. Nella finestra popup Crea selezionare Inizia con un'app canvas vuota.

   

3. Nella finestra popup Inizia con un'app canvas vuota che compare selezionare Dimensioni tablet.

4. Si passa al canvas di modifica di Power Apps. Se compare la finestra popup Benvenuto/a in Power Apps Studio, è possibile selezionare Ignora.

5. Selezionare Salva in alto a destra della schermata e, nella finestra Salva con nome, assegnare un nome all'app Contoso Coffee Machines. Selezionare Salva.

   

6. Per iniziare, creare una raccolta per visualizzare i record di dati. Selezionare il pulsante Inserisci nella barra dei comandi, quindi trovare e selezionare Raccolta verticale. Si tratta dello stesso tipo di raccolta che Power Apps ha creato automaticamente nell'app per dispositivi mobili.

   

7. Sullo schermo compare un controllo denominato Gallery1. Al momento non è connesso ai dati, quindi Power Apps richiede di Selezionare un'origine dati. Con tutti i diversi tipi di dati, occorre comunicare a Power Apps il tipo di dati a cui ci si vuole connettere. In questo caso, ci si connetterà al foglio di calcolo Excel salvato in OneDrive con la connessione OneDrive for Business. Questa connessione consente di accedere ai documenti dall'account aziendale OneDrive e da qualsiasi raccolta documenti SharePoint a cui si ha accesso.

8. Trovare e selezionare OneDrive for Business. È possibile immettere OneDrive nel campo di ricerca per individuarlo rapidamente. Potrebbe essere necessario selezionare Aggiungi una connessione e procedere all'autenticazione della connessione.

   

9. Una volta completata la connessione a OneDrive for Business, sul lato destro dello schermo viene visualizzato un pannello che richiede di Scegliere un file di Excel. Trovare e selezionare il documento Excel copiato in OneDrive e denominato "Machine-Order-Data.xlsx". Se si hanno difficoltà a trovarlo, è possibile immettere il nome del file nel campo di ricerca per restringere le scelte.

   

10. Dopo che si seleziona "Machine-Order-Data.xlsx", viene richiesto di Scegliere una tabella. Dovrebbero essere presenti due opzioni: "Machines" e "MachineTypes". Selezionare la casella accanto a "Macchine", quindi selezionare il pulsante Connetti nella parte inferiore del pannello.

    

11. Si riceverà un avviso che indica che l'origine dati è stata aggiunta all'app.

12. Selezionare ancora una volta la raccolta. Sul lato destro dello schermo è presente un pannello Proprietà per il controllo raccolta. Assicurarsi che Origine dati sia impostato su Machines. Se la raccolta non è stata popolata con l'immagine, il titolo e il prezzo, aggiungerli ora seguendo le stesse istruzioni usate per l'app per dispositivi mobili riportate sopra (suggerimento: usare ThisItem.'Machine Name', ThisItem.Price e ThisItem.Photo).

    

13. Ridimensionare la raccolta per estenderla fino alla parte inferiore dello schermo, quindi toccare il lato sinistro dello schermo.

14. Ora si è possibile aggiungere un controllo modulo per aggiornare i dati visualizzati nella raccolta. Seleziona una parte vuota dello schermo per deselezionare la raccolta, quindi selezionare il pulsante Inserisci dal menu dell'intestazione. Trovare e selezionare Modifica modulo.

    

15. Il controllo Form1 viene visualizzato sullo schermo. Trascinarlo nella metà destra dello schermo, riposizionarlo e ridimensionarlo in modo che occupi la metà destra dello schermo.

16. Il nuovo modulo richiede di Connettersi ai dati. Con il controllo modulo selezionato, osservare il pannello Proprietà sul lato destro dello schermo. Immediatamente sotto Proprietà si trovano Origine dati e un elenco a discesa Nessuno. Selezionare l'elenco a discesa e la tabella Macchine.

    

17. Ora è possibile aggiungere i campi al modulo, poiché attualmente è vuoto. Nel pannello Proprietà selezionare Modifica campi. Si trova immediatamente sotto l'elenco a discesa Origine dati.

18. Nel pannello popup Campi selezionare il pulsante Aggiungi campo.

19. Selezionare la casella accanto a ciascuno dei seguenti campi in Scegli un campo: Foto, ID macchina, Nome macchina, Prezzo, Colore, Descrizione, Caratteristica, Tipo di macchina, ID tipo di macchina, N. medio tazze/settimana e N. medio espressi/settimana. Assicurarsi di selezionarli nell'ordine elencato. Può essere necessario scorrere verso il basso per vederli tutti. Quindi, selezionare Aggiungi. È possibile chiudere il pannello Campi.

    

    Il modulo ora mostra i campi di input disposti in un formato a tre colonne. Notare che i campi sono stati aggiunti nell'ordine in cui sono stati selezionati. Tutti i campi dovrebbero essere vuoti.

20. A questo è possibile designare l'elemento dei dati da visualizzare nel modulo. Osservare il controllo Raccolta nella parte sinistra dello schermo. La raccolta mostra tutte le macchine da caffè e si desidera che il modulo ne mostri una. Con il modulo selezionato, andare alla barra della formula (fx) nella parte superiore dello schermo. A sinistra della barra della formula è presente un elenco a discesa per trovare le proprietà del controllo Modulo. Selezionare l'elenco a discesa, quindi trovare e selezionare la proprietà Item.

    

21. Nel campo Item della casella di input della formula fx immettere Gallery1.Selected. I dati dovrebbero immediatamente popolare i campi del modulo.

    

22. L'immagine della foto è stata aggiunta come casella di testo anziché come controllo immagine. Questo è il motivo per cui è visualizzato l'URL dell'immagine anziché l'immagine stessa. È possibile risolvere questo problema selezionando la scheda dati della foto (nell'esempio, Photo_DataCard2). All'interno della scheda dati della foto, selezionare il valore della scheda dati (nell'esempio, DataCardValue12). Eliminare il valore della scheda dati.

    

23. Quando si elimina il valore della scheda dati, un paio di x rosse appariranno sul canvas a indicare che sono presenti errori nella formula. Sarà possibile risolverli tra un attimo. Innanzitutto però, selezionare di nuovo la scheda dati della foto, quindi selezionare Inserisci. Cercare la parola immagine e selezionare Immagine.

24. Verrà visualizzato un messaggio di errore popup che indica che La scheda dati è bloccata. Prima di inserire un controllo immagine, è necessario sbloccare la scheda dati. Selezionare Sblocca e aggiungi. A questo punto si dovrebbe essere inserito un controllo immagine nella scheda dati della foto.

25. Selezionare il controllo immagine appena inserito e nella barra della formula immettere ThisItem.Photo. La schermata dovrebbe essere simile a quella illustrata nell'immagine seguente.

    

26. È ora possibile correggere gli errori della formula visualizzati quando si è eliminato il valore della scheda dati di input di testo dell'immagine. Selezionare la x rossa più a destra, quindi selezionare Modifica nella barra della formula.

    

27. La barra della formula mostra DataCardValue12.Y + DataCardValue12.Height (o il nome equivalente dei valori della scheda dati eliminati in precedenza). Si ricorderà che DataCardValue12 è la scheda dati eliminata. Modificare la formula per eliminare il riferimento al valore della scheda dati e includere il nome del controllo immagine. Nell'esempio il controllo immagine è Image2, quindi la formula aggiornata sarebbe Image2.Y + Image2.Height (la formula in uso dovrebbe includere il nome effettivo dell'immagine). Il primo avviso di errore scompare.

28. Selezionare l'avviso di errore rimanente (la x rossa), quindi selezionare di nuovo Modifica nella barra della formula. La barra della formula mostra che la proprietà Update è impostata su DataCardValue12.Text. Eliminare il valore della scheda dati nella formula e sostituirlo nuovamente con il nome del controllo immagine. Nell'esempio la formula sarà aggiornata in Image2.Text.

    Questa volta l'errore non scompare perché l'immagine non ha una proprietà denominata text. È necessario modificare ulteriormente la formula. Modificare la formula in Image2.Image. L'avviso di errore della formula ora dovrebbe scomparire.

29. Visualizzare in anteprima l'app selezionando l'icona "Riproduci" in alto a destra nella barra dei comandi, premendo il tasto funzione F5 o semplicemente selezionando e tenendo premuto il tasto ALT mentre si fa clic sui controlli. Con l'app in modalità di anteprima, provare a scorrere la raccolta e a selezionare alcune macchine da caffè diverse. Osservare come viene popolato il modulo in base all'elemento selezionato.

30. Quindi, si aggiungerà un controllo pulsante per salvare le modifiche apportate ai dati. Innanzitutto, selezionare Screen1 dal riquadro di visualizzazione struttura ad albero. Selezionare il pulsante Inserisci dalla barra dei comandi, quindi trovare e selezionare Pulsante.

    

31. Regolare le dimensioni e la posizione del pulsante e del modulo in modo che il pulsante si trovi immediatamente sotto il modulo sul lato destro dello schermo.

32. Modificare il testo del pulsante da "Pulsante" a "Salva modifiche". Nel pannello Proprietà a destra, il primo elemento è la proprietà Text. Sostituire "Pulsante" con "Salva modifiche" e inserirlo.

    

33. Con il controllo pulsante selezionato, andare alla barra della formula fx. Modificare la proprietà OnSelect da "false" a SubmitForm(Form1) (se il modulo non è denominato Form1, usare il nome effettivo del modulo).

34. A questo punto, riportare l'app in modalità Anteprima. Aggiornare uno dei campi del modulo, ad esempio Prezzo macchina. Premere il pulsante Salva per registrare le modifiche.

35. Ora si aggiungerà un'intestazione per l'app. Selezionare Screen1 nel riquadro di visualizzazione struttura ad albero. Selezionare di nuovo il pulsante Inserisci, quindi trovare e selezionare un controllo Rettangolo.

36. Posizionare il controllo rettangolo nell'angolo in alto a sinistra dello schermo ed estenderlo completamente dal lato sinistro al lato destro dello schermo. Nel pannello delle proprietà del rettangolo, trovare il campo di input Altezza e immettere 75.

    

    Suggerimento

    Qualsiasi elemento nel pannello delle proprietà ha un valore corrispondente visualizzabile nella barra della formula (fx). Se non lo si trova nel pannello delle proprietà, selezionare il menu a discesa a sinistra del campo di input della barra della formula. In questo caso potresti trovare/selezionare la proprietà Height.

37. Ora ridimensionare la raccolta e i controlli del modulo in modo che si adattino appena sotto il rettangolo.

38. Inserire un controllo Etichetta di testo. Modificare la proprietà Text in "Contoso Coffee Machines".

39. Adeguare il valore Dimensioni dell'etichetta impostandola su 24, quindi ridimensionare il controllo in modo che il titolo sia sulla stessa riga.

40. Modificare il colore del carattere selezionando l'impostazione Colore nella barra dei comandi. Sotto Colori standard selezionare il cerchio bianco.

41. Con l'etichetta ancora selezionata, trovare Allineamento testo nel riquadro delle proprietà. Modificare l'allineamento in modo che sia centrato.

42. Infine, riposizionare il controllo etichetta in modo che sia al centro dello schermo e al centro del rettangolo. Notare come appaiono le linee tratteggiate quando ci si avvicina al centro dello schermo per semplificare l'allineamento dell'etichetta. La schermata dovrebbe essere simile a quella illustrata nell'immagine seguente.

    

Si è creata da zero una app canvas a schermata singola che legge e aggiorna i dati delle macchine da caffè. Nell'unità successiva si espanderà questa app per apprendere ulteriori concetti su Power Apps.