Esercizio - Progettare pagine aggiuntive e posta elettronica in Power Apps

10 minuti

In questa unità, verranno progettate alcune pagine aggiuntive per supportare le funzionalità di realtà mista. Queste pagine eseguono alcune funzioni specifiche necessarie affinché l'applicazione si comporti in modo appropriato. Si userà anche la funzionalità di invio messaggi di posta elettronica di Power Apps per inviare i dettagli dell'ordine ai clienti.

Creare una pagina per le note

L'utente può scattare foto durante la sessione Visualizza in realtà mista e visualizzarle tramite una raccolta. Nella pagina delle note è possibile archiviare note di testo e immagini acquisite durante la sessione Visualizza in realtà mista.

Creare due nuove schermate vuote e rinominarle Product_notes e Carpet_notes.
Progettare la pagina Product_notes: selezionare l'elenco a discesa Input e quindi Input di testo. Rinominarla TextInput_products.
Selezionare Raccolta>Orizzontale per includere un tipo di raccolta orizzontale. In questa raccolta verranno archiviate le foto fatte durante la sessione Visualizza in realtà mista. Rinominare la raccolta View_products.
Posizionare la raccolta nell'altra parte dello schermo. Mantenere solo l'immagine eliminando il sottotitolo e il titolo. Ingrandire l'immagine.
Selezionare la raccolta e configurare la proprietà Items aggiungendo la riga seguente:
```
ViewInMR1.Photos
```
Tutte le immagini scattate nella sessione Visualizza in realtà mista vengono archiviate in questa raccolta come riferimento futuro.
Inserire un'etichetta nella parte superiore della schermata. Selezionare l'opzione Etichetta e quindi allinearla al centro. Personalizzare la posizione, il colore e la visualizzazione del testo in base alle proprie esigenze. Rinominarla Notes_label.
Verrà posizionata un'icona Indietro sull'etichetta aggiunta in precedenza per consentire all'utente di passare alla Home Page quando necessario. Per aggiungere l'icona Indietro, nella scheda Immetti espandere l'elenco a discesa Icone e quindi selezionare l'icona Indietro.
Posizionare correttamente l'icona Indietro e configurare la proprietà OnSelect aggiungendo quanto segue:
```
Navigate(Product_details,ScreenTransition.Cover)
```
Passare alla schermata Product_details e aggiungere un'icona Note dall'elenco a discesa Icone nella scheda Immetti.
Configurare la proprietà OnSelect dell'icona Note aggiungendo la riga seguente:
```
Navigate(Product_notes,ScreenTransition.CoverRight)
```
Replicare la stessa procedura per Notes_carpets.

Nota

La funzionalità Visualizza in realtà mista non viene inclusa per la categoria Carpets. Per la pagina Notes_carpets, escludere l'aggiunta del controllo della raccolta per archiviare le foto scattate durante la sessione Visualizza in realtà mista.

Suggerimento

È possibile testare l'applicazione premendo il tasto F5 sulla tastiera o selezionando il pulsante Riproduci nell'angolo in alto a destra di Power Apps Studio.

Creare una pagina di riepilogo dell'ordine

Aggiungere pulsanti alle schermate Product_details e Carpet_details. Rinominare i pulsanti Order_product e Order_carpet. Modificare il testo visualizzato dei pulsanti in Ordine.
Creare due nuove schermate vuote e rinominarle Order_products e Order_carpets.
Selezionare la schermata Product_details e quindi configurare la proprietà OnSelect del pulsante Ordine come indicato qui:
```
Navigate('Order_products',ScreenTransition.Cover)
```
Seguire la stessa procedura per la schermata Carpet_details.
Nella pagina Order_products inserire le etichette Prodotto, Prezzo, Colore e Note e rinominarle di conseguenza.
Inserire etichette vuote accanto a Prodotto, Prezzo, Colore e Note, come illustrato nella figura.

Configurare la proprietà Text di queste etichette vuote come indicato qui:

Prodotto:
```
Gallery_products.Selected.Name
```
Prezzo:
```
Gallery_products.Selected.Price
```
Colore:
```
Gallery_products.Selected.Color
```
Note:
```
TextInput_products.Text
```

Aggiungere un'altra etichetta nella parte superiore e modificarne il testo visualizzato in Riepilogo dell'ordine. Modificare le dimensioni del carattere e il carattere stesso in base alle proprie esigenze.
Espandere l'elenco a discesa Raccolta e selezionare Orizzontale. Conservare solo l'immagine; eliminare gli altri componenti della raccolta. Rinominarla Order_gallery_products
Configurare la proprietà Items di questa raccolta aggiungendo la riga seguente:
```
ViewInMR1.Photos
```
Aggiungere tre etichette e modificare il testo visualizzato in Immettere il messaggio di posta elettronica per ottenere un messaggio di posta elettronica di conferma dell'ordine., ID di posta dell'organizzazione: e ID di posta del cliente:, rispettivamente.
Espandere l'elenco a discesa Input e selezionare Input di testo. Aggiungere due componenti Input di testo alla schermata e posizionarli come illustrato nell'immagine. Rinominarli Input1_products e Input2_products.
Configurare la proprietà Hint text aggiungendo Immettere ID di posta elettronica:; non archiviare alcun valore nella proprietà Default. Modificare le dimensioni del carattere e il colore in base alle proprie esigenze.
Aggiungere un pulsante dalla scheda Immetti e configurarne la proprietà Text aggiungendo Conferma.
Espandere l'elenco a discesa Icone, selezionare Indietro e l'icona Home. Posizionarle correttamente, come illustrato nell'immagine.

Configurare la proprietà OnSelect di queste due icone come indicato sotto:

Indietro:

Navigate(Product_details,ScreenTransition.CoverRight)

Home:

Navigate('Home Page',ScreenTransition.CoverRight)

Seguire la stessa procedura per Order_carpets.

Creare una pagina finale

Creare una schermata vuota e rinominarla Pagina finale.
Aggiungere un'etichetta e modificare il testo visualizzato in Ordine inviato correttamente. Posizionare l'etichetta come richiesto sullo schermo.
Aggiungere un pulsante nella parte inferiore della schermata. Configurare la proprietà Text del pulsante aggiungendo Shop more (Continua ad acquistare). Per indirizzare l'utente alla home page, selezionare il pulsante Continua ad acquistare, quindi aggiungere la riga seguente nella proprietà OnSelect.
```
Navigate('Home Page',ScreenTransition.Cover)
```
Espandere l'elenco a discesa Supporto e selezionare Immagine per aggiungere un componente immagine alla pagina finale.
Posizionare l'immagine come illustrato nell'immagine. Selezionare il file del logo da visualizzare.

Suggerimento

Salvare l'applicazione spesso selezionando la scheda File nella parte superiore e selezionando l'opzione Salva. Se richiesto, selezionare l'opzione Cloud, quindi Salva.

Inviare messaggi di posta elettronica tramite Power Apps

Selezionare la scheda Dati e + Aggiungi dati. Espandere Connettori, quindi selezionare Office 365 Outlook per aggiungerlo come uno dei connettori a questa applicazione.

Aprire Order_products e quindi configurare la proprietà OnSelect del pulsante Conferma aggiungendo le righe seguenti:

Office365Outlook.SendEmailV2(Input1_products & ";"& Input2_products,"Order Summary","<b> Your order is successfully submitted! </b> <br> Order details are as follows: <ul> <li> Product: " & Order_product_name_details & "</li> <li> Price: " & Order_price_details & "</li> <li> Color: " & Order_color_details & "</li> </ul>Notes: " & TextInput_products & "<br><b> Thank you for shopping with us! </b>");
Navigate('End page',ScreenTransition.Cover)

Nota

I nomi usati nella funzione precedente seguono le convenzioni di denominazione usate in questa applicazione al momento dello sviluppo. È possibile personalizzare la funzione in base all'applicazione.

L'implementazione dei passaggi precedenti deve far funzionare l'applicazione nel modo seguente: l'applicazione includerà una pagina di note per archiviare tutte le note della sessione, una pagina di riepilogo dell'ordine per esaminare l'ordine e inviare messaggi di posta elettronica e una pagina finale per chiudere correttamente l'applicazione.

Testare l'applicazione in un dispositivo mobile