Ćwiczenie — projektowanie dodatkowych stron i wiadomości e-mail w usłudze Power Apps

10 min

W tej lekcji zaprojektujesz kilka dodatkowych stron, aby obsługiwać funkcje rzeczywistości mieszanej. Te strony wykonują określone funkcje, które są wymagane, aby aplikacja zachowywała się odpowiednio. Będziesz również używać funkcji wysyłania wiadomości e-mail w usłudze Power Apps do wysyłania szczegółów zamówienia do klientów.

Utwórz stronę notatek

Użytkownik może robić zdjęcia podczas sesji View in MR i wyświetlać je za pośrednictwem galerii. Na stronie notatki można przechowywać notatki tekstowe i obrazy przechwycone podczas View w sesji MR.

Utwórz dwa nowe ekrany Puste i nazwij je Product_notes i Carpet_notes.
Zaprojektuj stronę Product_notes: wybierz listę rozwijaną Wejściowe, a następnie wybierz pozycję Wprowadzanie tekstu. Zmień jego nazwę TextInput_products.
Wybierz pozycję Gallery>Horizontal, aby uwzględnić poziomy typ galerii. Będziesz przechowywać zdjęcia zrobione podczas sesji View w MR w tej galerii. Zmień nazwę galerii View_products.
Umieść galerię w innej części ekranu. Zachowaj tylko obraz, usuwając podtytuł i tytuł. Powiększ obraz.
Wybierz galerię i skonfiguruj właściwość Items, dodając następujący wiersz:
```
ViewInMR1.Photos
```
Wszystkie zdjęcia zrobione w widoku podczas sesji MR są przechowywane w tej galerii do przyszłego wykorzystania.
Wstawimy etykietę w górnej części ekranu. Wybierz opcję etykiety , a następnie wyrównaj ją do środka . Dostosuj położenie, kolor i wyświetlanie tekstu zgodnie z potrzebami. Zmień jego nazwę Notes_label.
Umieścimy ikonę Wstecz na wcześniej dodanej Etykiecie, aby ułatwić użytkownikowi przejście do strony głównej, kiedy będzie to wymagane. Aby dodać ikonę Wstecz, na karcie Wstaw rozwiń listę rozwijaną Ikony , a następnie wybierz ikonę Wstecz.
Umieść poprawnie ikonę Wstecz i skonfiguruj właściwość OnSelect, dodając następujące elementy:
```
Navigate(Product_details,ScreenTransition.Cover)
```
Przejdź do ekranu Product_details i dodaj ikonę Uwaga z listy rozwijanej Ikony na karcie Wstaw.
Skonfiguruj właściwość OnSelect ikony Uwaga, dodając następujący wiersz:
```
Navigate(Product_notes,ScreenTransition.CoverRight)
```
Zreplikuj tę samą procedurę dla Notes_carpets.

Notatka

Nie będziemy uwzględniać widoku w funkcji MR dla kategorii Dywany. Na stronie Notes_carpets wyklucz możliwość dodania kontrolki Galeria do przechowywania zdjęć wykonanych podczas sesji Widok w MR.

Napiwek

Aplikację można przetestować, naciskając F5 na klawiaturze lub wybierając przycisk Odtwórz w prawym górnym rogu programu Power Apps Studio.

Tworzenie strony podsumowania zamówienia

Dodaj przyciski do ekranów Product_details i Carpet_details. Zmień nazwy przycisków Order_product i Order_carpet. Zmień tekst wyświetlania przycisków na Order.
Utwórz dwa nowe ekrany Puste i zmień ich nazwy Order_products i Order_carpets.
Wybierz ekran Product_details, a następnie skonfiguruj właściwość OnSelect przycisku Order w następujący sposób:
```
Navigate('Order_products',ScreenTransition.Cover)
```
Wykonaj tę samą procedurę dla ekranu Carpet_details.
Na stronie Order_products wstaw etykiety: Produkt, Cena, Kolor, oraz Notatki i odpowiednio je nazwij.
Wstaw puste etykiety obok Product, Price, Colori Notes, jak pokazano na rysunku.

Skonfiguruj właściwość Text tych pustych etykiet w następujący sposób:

Produkt:
```
Gallery_products.Selected.Name
```
cena:
```
Gallery_products.Selected.Price
```
Kolor:
```
Gallery_products.Selected.Color
```
notatki:
```
TextInput_products.Text
```

Dodaj inną etykietę u góry i zmień jej tekst wyświetlania na Order Summary. Zmień rozmiar czcionki i czcionkę zgodnie z potrzebami.
Rozwiń listę rozwijaną galeria i wybierz pozycję Pozioma. Zachowaj tylko obraz; usuń inne składniki galerii . Zmień nazwę na Order_gallery_products
Skonfiguruj właściwość Items tej galerii, dodając następujący wiersz:
```
ViewInMR1.Photos
```
Dodaj trzy etykiety i zmień tekst wyświetlany na Wprowadź wiadomość e-mail, aby uzyskać wiadomość e-mail z potwierdzeniem zamówienia!, Identyfikator poczty organizacji:i Identyfikator poczty klienta:, odpowiednio.
Rozwiń listę rozwijaną Wejściowe i wybierz pozycję Wprowadzanie tekstu. Dodaj dwa komponenty pola tekstowego do ekranu i umieść je tak, jak pokazano na obrazie. Zmień ich nazwy Input1_products i Input2_products.
Skonfiguruj właściwość tekst wskazówki, dodając Wprowadź identyfikator poczty:; nie przechowuj żadnej wartości we właściwości Default. Dostosuj rozmiar i kolor czcionki zgodnie z potrzebami.
Dodaj przycisk z karty Wstaw i skonfiguruj jego właściwość Tekst, dodając Potwierdź.
Rozwiń listę rozwijaną Ikony i wybierz ikonę Wstecz oraz ikonę Dom. Umieść je poprawnie, jak pokazano na obrazie.

Skonfiguruj właściwość OnSelect tych dwóch ikon w następujący sposób:

Wstecz

Navigate(Product_details,ScreenTransition.CoverRight)

strona główna:

Navigate('Home Page',ScreenTransition.CoverRight)

Wykonaj tę samą procedurę dla zamówienia dywanów .

Tworzenie strony końcowej

Utwórz ekran Pusty i zmień jego nazwę na Strona końcowa.
Dodaj etykietę i zmień jej tekst wyświetlania na Pomyślnie przesłano zamówienie!. Umieść etykietę zgodnie z wymaganiami na ekranie.
Dodaj przycisk w dolnej części ekranu. Skonfiguruj właściwość Text przycisku, dodając Kup więcej. Przekierowujmy użytkownika na stronę główną: wybierz przycisk Kup więcej, a następnie dodaj następujący wiersz we właściwości OnSelect.
```
Navigate('Home Page',ScreenTransition.Cover)
```
Rozwiń listę rozwijaną Media i wybierz Obraz, aby dodać składnik obrazu do strony końcowej .
Umieść obraz, jak pokazano na obrazie. Wybierz plik z logo do wyświetlenia.

Napiwek

Zapisuj swoje postępy w aplikacji często, wybierając kartę Plik u góry i wybierając opcję Zapisz. Jeśli zostanie wyświetlony monit, wybierz opcję Chmura, a następnie wybierz pozycję Zapisz.

Wysyłanie wiadomości e-mail za pośrednictwem usługi Power Apps

Wybierz kartę Dane i wybierz + Dodaj dane. Rozwiń Connectors, a następnie wybierz Office 365 Outlook, aby dodać go jako jeden z łączników w tej aplikacji.

Otwórz Order_products, a następnie skonfiguruj właściwość OnSelect przycisku Potwierdź, dodając następujące wiersze:

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)

Notatka

Nazwy używane w poprzedniej funkcji są zgodne z konwencjami nazewnictwa używanymi w tej aplikacji w czasie opracowywania. Funkcję można dostosować zgodnie z aplikacją.

Zaimplementowanie powyższych kroków sprawi, że aplikacja będzie działać w następujący sposób: będzie zawierać stronę Uwagi do przechowywania wszystkich notatek sesji, stronę podsumowania zamówienia do przeglądania zamówienia i wysyłania wiadomości e-mail, oraz stronę końcową , zapewniającą doskonałe zakończenie działania aplikacji.

Testowanie aplikacji na urządzeniu przenośnym

Wybierz link pobierania dla urządzenia:
- W przypadku systemu iOS (iPad lub iPhone) przejdź do App Store.
- W przypadku systemu Android przejdź do witryny Google Play.
Otwórz usługę Power Apps na urządzeniu przenośnym i zaloguj się przy użyciu poświadczeń konta Microsoft.
Aplikacje, których ostatnio użyto, będą wyświetlane na ekranie domyślnym podczas logowania się do aplikacji mobilnych usługi Power Apps.

Strona główna jest ekranem domyślnym przy logowaniu. Wyświetla ostatnio używane aplikacje oraz aplikacje oznaczone jako ulubione.
Aby uruchomić aplikację na urządzeniu przenośnym, wybierz kafelek aplikacji. Jeśli po raz pierwszy uruchamiasz aplikację Canvas korzystając z aplikacji Power Apps na urządzeniach mobilnych, na ekranie są wyświetlane gesty przesunięcia.
Aby zamknąć aplikację, przesuń palcem z lewej krawędzi aplikacji w prawo. Na urządzeniach z systemem Android możesz również wybrać przycisk Wstecz i potwierdzić, że zamierzasz zamknąć aplikację.

Notatka

Jeśli aplikacja wymaga połączenia ze źródłem danych lub uprawnieniami do korzystania z możliwości urządzenia (takich jak aparat lub usługi lokalizacji), musisz wyrazić zgodę przed użyciem aplikacji. Zazwyczaj jest wyświetlany monit tylko przy pierwszym uruchomieniu aplikacji.