Esercizio - Creazione della prima app in Power Apps

Completato

Nell'esercizio seguente si creerà la prima app con una tabella Excel come origine dati. È possibile usare qualsiasi tabella Excel come origine dati se i dati sono stati formattati come tabella e salvati in un'origine dati a cui si ha accesso, ad esempio OneDrive. In questo esercizio scaricheremo i dati, li salveremo in OneDrive, creeremo una rapida app a tre schermate e quindi inizieremo a creare un'app su un canvas. L'app che inizieremo a creare da una schermata vuota in questo esercizio sarà quella che continueremo ad arricchire nelle future unità di apprendimento. L'app a tre schermate è a disposizione come riferimento in modo da vedere come i controlli interagiscono tra loro per accedere ai dati. Entrambe le app sono in grado di interagire con gli stessi dati.

Recupero dei dati

Scaricare il foglio di calcolo Excel CoffeeMachineData.xlsx. Selezionare il collegamento, quindi il pulsante Scarica file non elaborato per scaricare il file. Una volta completato il download, continuare con questi passaggi.

1. Dalla scheda OneDrive del browser, selezionare Aggiungi nuovo>Caricamento file.

   

2. Nel popup Apri, selezionare la posizione del file CoffeeMachineData.xlsx, molto probabilmente nella cartella Download.

3. Una volta trovato e selezionato il file CoffeeMachineData.xlsx, selezionare Apri. Verificare che il file sia effettivamente in OneDrive inserendo CoffeeMachineData nel campo di ricerca in alto al centro della barra dei comandi di OneDrive. Ora che il file di dati si trova in OneDrive, si procederà a creare l'app.

Creazione un'app a tre schermate

Iniziamo creando un'app a tre schermate, un'operazione che richiede solo pochi clic dei pulsanti di Power Apps.

1. Tornare a Power Apps Maker Portal make.powerapps.com e accedere usando l'account dell'organizzazione.

2. Selezionare la scheda Crea dal menu sul lato sinistro.

3. Selezionare il pulsante Excel nelle opzioni Inizia da.

   

4. Se la connessione OneDrive non è visibile in Connessioni, selezionare li pulsante +Nuova connessione, quindi il pulsante Crea per creare la connessione. Una volta eseguita questa operazione, selezionare la connessione OneDrive for Business.

5. In Scegliere un file di Excel, trovare e selezionare CoffeeMachineData.xlsx. È possibile effettuare la ricerca usando il relativo campo nell'angolo in alto a destra.

   

6. In Scegli una tabella, selezionare CoffeeMachines. CoffeeMachines è la tabella in cui risiedono i dati dell'app.

7. Selezionare il pulsante Connetti in basso a destra e osservare come Power Apps crea un'app in tre schermate.

   In pochi istanti, Power Apps mostra un'app completamente funzionale progettata per i dispositivi mobili. Per avere un'idea di come apparirà sul dispositivo mobile, usare il pulsante di anteprima che assomiglia a un pulsante "riproduci" in alto a destra vicino all'icona "salva". Seleziona 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/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.

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

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

Ora che abbiamo visto in che modo Power Apps può creare automaticamente un'app, iniziamo a creare la nostra app.

Creazione di un'app canvas

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

2. Nella finestra popup Crea, in App canvas vuota selezionare Crea.

   

3. Assegnare all'app il Nome "Contoso Coffee Machines" e lasciare l'interruttore Formato impostato su Tablet. Selezionare Crea.

   

4. Ora è visibile una schermata vuota con un popup o un messaggio Benvenuto in Power Apps Studio sullo schermo. Viene visualizzato un messaggio "Aggiungi un elemento dal riquadro Inserisci oppure connettiti ai dati". Iniziamo creando una raccolta per visualizzare i nostri record di dati. Selezionare l'opzione Raccolta. Se questo popup non viene visualizzato, selezionare il pulsante Inserisci dalla barra dei comandi, quindi trovare/selezionare Raccolta verticale.

   

5. Sullo schermo viene visualizzato un controllo denominato Raccolta1. Al momento non è connesso ai dati, quindi Power Apps ci richiede di Selezionare un'origine dati. Con tutti i diversi tipi di dati, dobbiamo dire a Power Apps a quale tipo di dati vogliamo connetterci. In questo caso, dobbiamo connetterci al foglio di calcolo Excel che abbiamo salvato in OneDrive. Eseguiamo questa operazione con la connessione OneDrive for Business. Questa connessione ci permette di accedere ai documenti dal nostro account aziendale OneDrive e da qualsiasi raccolta documenti SharePoint a cui abbiamo accesso.

6. Trovare/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.

   

7. 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 nel nostro OneDrive e denominato "CoffeeMachineData.xlsx". Se si hanno difficoltà a trovarlo, è possibile immettere il nome del file nel campo di ricerca per restringere le scelte.

   

8. Dopo aver selezionato "CoffeeMachineData.xlsx", viene richiesto di scegliere una tabella (Scegli una tabella). Dovrebbe esserci un'unica opzione "CoffeeMachines". Selezionare la casella accanto a "CoffeeMachines", quindi selezionare il pulsante Connetti nella parte inferiore del pannello.

   

9. 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 CoffeeMachines. Se in precedenza la raccolta non era ancora popolata con un'immagine, un titolo e un prezzo, dovrebbe esserlo ora.

   

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

11. Ora si procederà ad aggiungere un controllo modulo in modo da poter aggiornare i dati visualizzati nella raccolta. Selezionare il pulsante Inserisci dal menu dell'intestazione. Trovare e selezionare Modifica modulo.

    

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

13. Ora si dovrà stabilire una connessione ai dati usando il pulsante Connetti ai dati. Con il controllo modulo selezionato, esaminare il pannello Proprietà sul lato destro dello schermo. Direttamente sotto Proprietà si trovano Origine dati e un elenco a discesa Nessuno. Selezionare l'elenco a discesa, quindi la tabella CoffeeMachines.

    

14. Aggiungiamo i campi al modulo, poiché attualmente è vuoto. Nel pannello Proprietà selezionare il collegamento a Modifica campi, che si trova appena sotto l'elenco a discesa Origine dati.

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

16. Selezionare la casella accanto a ciascun campo in Scegli un campo (potrebbe essere necessario scorrere verso il basso per visualizzarli tutti). Quindi, selezionare Aggiungi. Il modulo ora mostra i campi di input disposti in un modulo a tre colonne. È possibile chiudere il pannello Campi. Tutti i campi dovrebbero essere vuoti.

    

17. A questo punto occorre designare quale elemento dei dati visualizzare nel modulo. Esaminare il controllo Raccolta nella parte sinistra dello schermo. La raccolta mostra tutte le macchine da caffè, quindi vogliamo che il modulo mostri una di queste. 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.

    

18. Nel campo Elemento della casella di input della formula fx, immettere Raccolta1.Selezionato. I dati dovrebbero immediatamente popolare i campi del modulo.

    

19. È possibile visualizzare l'anteprima dell'app in qualsiasi momento 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 sulla tastiera. 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.

20. Aggiungiamo ora un controllo pulsante in modo da poter salvare eventuali modifiche apportate ai dati. Selezionare il pulsante Inserisci dalla barra dei comandi e trovare/selezionare Pulsante. Fare riferimento all'immagine seguente per i tre passaggi successivi.

    

21. Cambiamo 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.

22. Riposizionare il nuovo controllo pulsante sotto il modulo nella parte inferiore dello schermo.

23. Con il controllo pulsante selezionato, andare alla barra della formula fx. Modificare la proprietà OnSelect da "false" a SubmitForm(Form1).

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

25. Successivamente aggiungiamo un'intestazione per l'app. Selezionare di nuovo il pulsante Inserisci e trovare/selezionare un controllo Rettangolo.

26. Posizionare il controllo rettangolo nell'angolo in alto a sinistra dello schermo ed estenderlo in modo che arrivi completamente al lato destro dello schermo. Nel pannello delle proprietà del rettangolo, trovare il campo di input Height 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.

27. Ora ridimensionare la raccolta e i controlli del modulo in modo che si adattino appena sotto il rettangolo. Fare riferimento all'immagine numerata di seguito per i passaggi successivi.

    

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

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

30. Successivamente cambieremo il colore del font. È possibile eseguire questa operazione selezionando l'impostazione Colore nella barra dei comandi. Sotto Colori standard selezionare il cerchio bianco.

31. Infine, riposizionare il controllo etichetta in modo che sia al centro dello schermo al centro del rettangolo. Notare come appaiono le linee tratteggiate quando ci si avvicina al centro dello schermo per semplificare l'allineamento dell'etichetta.

    

Ecco fatto. Si è creata un'app a schermata singola da una schermata vuota che permette di aggiornare e salvare tutti i dati nei dati Coffee Machine. Nella prossima unità continueremo a sviluppare questa app mentre impariamo nuovi concetti.