Esercizio - Creazione di un'app di inventario con SharePoint

Completato

Considerare uno scenario in cui si desidera che gli utenti all'interno della società Contoso ordinino le proprie macchine da caffè. Contoso intende creare un'app condivisibile con chiunque gestisca questo processo.

Questo esercizio consiste nell'impostazione di un paio di elenchi di SharePoint in cui archiviare i dati delle macchine da caffè e i dati degli ordini e nella successiva creazione di un'app canvas Power Apps per interagire con tali dati ed effettuare ordini.

Creazione dell'elenco di macchine

La prima attività consiste nel creare l'elenco di macchine:

1. Scaricare il file Excel Machine Order Data.

2. Passare al sito di SharePoint Online in cui si desidera archiviare i dati dell'app.

3. Nell'angolo in alto a sinistra selezionare Nuovo > Elenco.

4. Selezionare l'opzione Da Excel.

   

5. Selezionare Carica file, quindi scegliere il file Machine-Order-Data.xlsx scaricato in precedenza.

6. Nella pagina Personalizza verificare che la tabella Machines sia selezionata nel menu a discesa Seleziona una tabella da questo file, quindi scegliere Avanti nell'angolo in basso a destra.

   

7. È possibile modificare il nome dell'elenco e aggiungere una descrizione (facoltativa). Selezionare il pulsante Crea per continuare. Attendere che il nuovo elenco venga creato.

Al termine dell'operazione, il browser dovrebbe automaticamente accedere al nuovo elenco. Tutti i dati del foglio Excel dovrebbero essere caricati e pronti per l'uso.

Creazione dell'elenco di ordini

A questo punto si procede a creare l'elenco di ordini, effettuando i seguenti passaggi:

1. Selezionare l'opzione Home nell'angolo in alto a sinistra, sotto il nome del sito di SharePoint.

2. Nell'angolo in alto a sinistra selezionare Nuovo > Elenco.

3. Selezionare Elenco vuoto.

4. Assegnare all'elenco il nome Orders-List, quindi selezionare Crea.

   

5. Nella pagina Orders-List, direttamente sotto il nome dell'elenco, appare una colonna denominata "Titolo". A destra di questa è visibile l'opzione Aggiungi colonna. Selezionare Aggiungi colonna.

6. Nella finestra di dialogo Crea una colonna selezionare Data e ora, quindi Avanti.

7. Assegnare a questa colonna il nome OrderDate, quindi selezionare Salva.

   

8. Selezionare nuovamente Aggiungi colonna.

9. Scorrere verso il basso e selezionare Valuta, quindi selezionare Avanti.

10. Assegnare a questa colonna il nome OrderTotal, quindi selezionare Salva.

Ora si dispone di un elenco di SharePoint da usare per archiviare i dati degli ordini delle macchine da caffè.

Creazione dell'app canvas

Per creare l'app canvas in Power Apps, effettuare i seguenti passaggi:

1. Passare a make.powerapps.com.

2. Selezionare l'opzione Crea a sinistra.

3. Selezionare App vuota.

   

4. Selezionare l'opzione Crea sotto App canvas vuota.

5. Assegnare all'app il nome Contoso Coffee Machine Ordering e selezionare il pulsante Crea.

6. Dopo una breve attesa si apre l'editor dell'app canvas, in cui progettare e modificare l'applicazione Power Apps che permette di interagire con i dati di SharePoint.

   

7. Selezionare l'icona Salva nell'angolo in alto a destra. Per impostazione predefinita, Power Apps salva automaticamente l'app ogni due minuti, ma solo dopo il primo salvataggio manuale. È pertanto consigliabile salvare l'app dopo averla creata.

8. Selezionare il menu a discesa Aggiungi dati.

9. Cercare e selezionare SharePoint (l'opzione SharePoint standard, non Siti di SharePoint). Potrebbe essere necessario scorrere i risultati per trovarla. Se non si dispone ancora di una connessione, selezionare Aggiungi una connessione. Se si dispone già di una connessione, è possibile selezionare la connessione esistente e ignorare il passaggio successivo passaggio per continuare.

   

10. Per la creazione di una nuova connessione, sul lato destro della schermata viene visualizzato un apposito pannello. Assicurarsi che l'opzione Connetti direttamente (servizi cloud) sia selezionata, quindi scegliere Connetti nella parte inferiore della schermata.

11. Nella parte destra della schermata dovrebbe essere ora disponibile un'opzione Connetti a un sito SharePoint che richiede di immettere l'URL per l'ubicazione dell'elenco; è anche possibile ricercare il sito SharePoint nell'elenco dei siti recenti.

    Il sito di SharePoint in cui si sono creati gli elenchi di macchine dovrebbe apparire nell'elenco dei siti recenti. Per continuare è sufficiente selezionare il sito.

    Se il sito non appare nell'elenco, tornare al sito in cui si è creato l'elenco e copiare l'URL (la schermata iniziale del sito, non la pagina dell'elenco), quindi incollare l'URL nella riga superiore del pannello. Una volta che Power Apps identifica il sito, è possibile selezionare Connetti per procedere.

12. Nel pannello Scegli un elenco. Selezionare le caselle di controllo Machine-Order-Data e Orders-List.

13. Selezionare Connetti.

    

Si è così creata l'applicazione Power Apps e la si è connessa ai dati in modo da poter leggere e scrivere in SharePoint direttamente dall'app.

Progettazione dell'app canvas

Si procederà ora a creare l'app canvas inserendo e collegando alcuni controlli.

1. Selezionare Inserisci > Etichetta di testo.

   

2. Spostare l'etichetta che appare nell'angolo in alto a sinistra del canvas, quindi ridimensionarla in modo che ne occupi l'intera larghezza.

3. Sul lato destro della schermata è possibile modificare le proprietà dei controlli delle app canvas usando un'interfaccia intuitiva e senza dover modificare il codice. Con l'etichetta ancora selezionata, cambiare il testo in Contoso Coffee Machine Ordering.

4. Impostare Dimensione del carattere su 18.

5. Per Allineamento testo selezionare centro.

6. Accanto al colore, l'icona con la lettera A indica il colore del testo e l'icona con il secchiello indica il colore di sfondo dell'etichetta. Selezionare l'icona A del colore del testo, quindi selezionare il bianco.

7. Selezionare l'icona con il secchiello, quindi scegliere un blu scuro (o qualsiasi altro colore desiderato).

   

   Nota

   Con la maggior parte dei controlli è possibile modificare impostazioni quali tipi di carattere, colori e colori di sfondo in vari modi. Il pannello Proprietà è uno di questi, ma queste stesse opzioni compaiono ad esempio anche nella barra multifunzione dei comandi.

8. Nella barra multifunzione in alto selezionare Inserisci > Raccolta verticale.

9. Appare una finestra popup che richiede di connettere la raccolta a un'origine dati. Selezionare Machine-Order-Data.

10. Per modificare i campi si userà l'interfaccia della barra multifunzione dei comandi. Selezionare Modifica campi nella barra dei comandi.

11. Assicurarsi che il menu a discesa Subtitle1 mostri Price e l'opzione Title1 sia impostata su Machine Name. Effettuare una selezione esternamente alla finestra di dialogo Modifica campi per continuare.

12. Il testo visualizzato nella raccolta dovrebbe riflettere il nome della macchina e il prezzo, insieme a un'"immagine campione", che si provvederà a correggere a breve. Ridimensionare la raccolta per adattarla all'etichetta dell'intestazione, in modo che occupi la metà sinistra del canvas sotto l'etichetta.

13. Sostituire l'immagine di esempio in modo da visualizzare l'immagine effettiva del prodotto. Selezionare l'icona della prima immagine nella raccolta. Immediatamente sotto la barra multifunzione dei comandi si trova il campo di input della formula fx in cui è possibile scrivere il codice per modificare le proprietà di un controllo in Power Apps. Eliminare il testo SampleImage e immettere ThisItem.Photo.

    

14. Modificare il formato del testo del campo dei sottotitoli per visualizzare la valuta. Selezionare l'etichetta Subtitle1 nel primo articolo della raccolta che mostra il prezzo dell'articolo. Notare che la visualizzazione struttura ad albero per questo controllo mostra un'evidenziazione grigia e il campo della formula mostra ThisItem.Price.

    

15. Nel campo della formula modificare la proprietà Text in: Text(ThisItem.Price,"$##,###.00"). Il prezzo viene immediatamente visualizzato con i simboli del dollaro, i separatori delle migliaia e i centesimi.

16. Ora si procederà ad aggiungere un modulo per agevolare la modifica dei dati. Selezionare la metà vuota del canvas di modifica (per uscire dalla raccolta), quindi selezionare Inserisci > Modifica modulo.

17. Selezionare Orders-List come origine dati; Power Apps popolerà il modulo con i campi, in base alle colonne dell'elenco SharePoint.

18. Riposizionare e ridimensionare il modulo in modo che occupi la metà destra del canvas.

    

19. Selezionare la scheda Titolo nel modulo. Notare che a sinistra del nome della scheda, appena sopra la scheda selezionata, appare l'icona di un lucchetto. Sbloccare la scheda per personalizzarla. Fare clic con il pulsante destro del mouse sulla scheda selezionata e scegliere Sblocca.

    

20. Sbloccare le schede OrderDate e OrderTotal sul modulo usando la stessa tecnica.

21. Selezionare la casella di input di testo sotto Titolo nel modulo (sbloccarla se necessario).

22. Modificare la Formula Default da Parent.Default a Gallery1.Selected.'Machine Name'. Ora il titolo dell'articolo selezionato dalla raccolta dovrebbe essere visibile sul lato sinistro dello schermo.

    Suggerimento

    Quando si immettono le formule, Power Apps suggerisce automaticamente le opzioni pertinenti mentre si digita. È possibile selezionare il tasto di tabulazione oppure premere INVIO per selezionare il suggerimento evidenziato oppure scorrere l'elenco per selezionarne uno. Questa operazione è del tutto facoltativa, ma può accelerare la creazione e l'accuratezza delle formule man mano che ci si abitua.

23. Selezionare il controllo di selezione data in OrderDate, quindi modificare la formula per DefaultDate in Today().

24. Selezionare la casella di input di testo sotto OrderTotal, quindi modificare la formula in Gallery1.Selected.Price.

25. Selezionare l'intero modulo. Nell'angolo in alto a sinistra, la proprietà DataSource viene visualizzata in un menu a discesa con il campo di immissione della formula che mostra 'Orders-List'. Selezionando il menu a discesa Proprietà è possibile scegliere qualsiasi proprietà disponibile per un controllo e cambiare la formula per tale proprietà. In questo caso si cambia la proprietà Item del modulo: selezionare il relativo menu a discesa, quindi selezionare Item.

    

26. Nella formula per Item immettere Defaults('Orders-List'). La funzione Defaults() indica a Power Apps che si sta creando un nuovo elemento per l'elenco Orders-List SharePoint ogni volta che si invia questo modulo.

27. Andare alla barra dei comandi e selezionare Inserisci > Pulsante.

28. Trascinare il pulsante sul lato destro della schermata, sotto gli input del modulo.

29. Modificare la proprietà Text del pulsante in Submit Order.

30. Modificare la proprietà OnSelect del pulsante in SubmitForm(Form1).

Ora si dispone di un'app in cui gli utenti possono selezionare una macchina da caffè, visualizzare in anteprima l'ordine e inviarlo. L'app completata dovrebbe avere un aspetto simile al seguente.

Impostare l'app in modalità di anteprima selezionando il pulsante Esegui (triangolo) nell'angolo in alto a destra della barra dei comandi (oppure selezionare il tasto funzione F5 sulla tastiera). Selezionare una macchina da caffè, quindi scegliere il pulsante Submit Order. Tornare a Orders-List nell'elenco SharePoint, dovrebbe apparire l'ordine appena creato.

Esistono infinite altre possibilità per usare Power Apps in modo da interagire con i dati SharePoint. Sebbene si tratti di un'applicazione di base, è possibile aggiungere personalizzazioni per modificare l'interfaccia utente/esperienza utente in base alle esigenze aziendali.