Übung: Entwerfen zusätzlicher Seiten und E-Mails in Power Apps

10 Minuten

In dieser Einheit entwerfen Sie einige zusätzliche Seiten, um Ihre Mixed Reality-Features zu unterstützen. Diese Seiten führen bestimmte Funktionen aus, die erforderlich sind, damit sich die Anwendung entsprechend verhalten kann. Außerdem verwenden Sie die E-Mail-Funktion von Power Apps, um die Bestelldetails an die Kunden zu senden.

Notizenseite erstellen

Der Benutzer kann während der In MR anzeigen-Sitzung Bilder machen und sie in einem Katalog anzeigen. Auf der Notizenseite können Sie textbezogene Notizen und Bilder speichern, die während der Ansicht in MR-Sitzung erfasst wurden.

Erstellen Sie zwei neue leere Bildschirme, und benennen Sie sie Product_notes und Carpet_notes um.
Entwerfen Sie die seite Product_notes : Wählen Sie das Dropdownmenü " Eingabe " aus, und wählen Sie dann "Texteingabe" aus. Benennen Sie sie TextInput_products um.
Wählen Sie "Katalog>horizontal" aus, um einen horizontalen Katalogtyp einzuschließen. Sie werden Fotos, die während der Sitzung Ansicht in MR aufgenommen wurden, in dieser Galerie speichern. Benennen Sie die Galerie View_products um.
Positionieren Sie den Katalog am anderen Bildschirmteil. Behalten Sie nur das Bild bei, indem Sie den Untertitel und den Titel löschen. Vergrößern Sie das Bild.
Wählen Sie den Katalog aus, und konfigurieren Sie die Items-Eigenschaft , indem Sie die folgende Zeile hinzufügen:
```
ViewInMR1.Photos
```
Alle Bilder, die in der View in MR-Sitzung aufgenommen wurden, werden in dieser Galerie für zukünftige Referenz gespeichert.
Fügen wir am oberen Rand des Bildschirms eine Beschriftung ein. Wählen Sie die Option Label aus, und richten Sie sie dann zentriert aus. Passen Sie die Position, Farbe und Textanzeige ihren Anforderungen entsprechend an. Benennen Sie Notes_label um.
Wir platzieren ein Zurück-Symbol über der zuvor hinzugefügten Bezeichnung , damit der Benutzer bei Bedarf zur Startseite navigieren kann. Um das Symbol " Zurück " hinzuzufügen, erweitern Sie auf der Registerkarte " Einfügen " das Dropdownmenü "Symbole ", und wählen Sie dann das Symbol "Zurück" aus.
Positionieren Sie das Symbol "Zurück " richtig, und konfigurieren Sie die OnSelect-Eigenschaft , indem Sie Folgendes hinzufügen:
```
Navigate(Product_details,ScreenTransition.Cover)
```
Wechseln Sie zum Product_details-Bildschirm und fügen Sie auf der Registerkarte Einfügen ein Notizsymbol aus der Dropdown-Liste Symbole hinzu.
Konfigurieren Sie die OnSelect-Eigenschaft des Notizsymbols , indem Sie die folgende Zeile hinzufügen:
```
Navigate(Product_notes,ScreenTransition.CoverRight)
```
Replizieren Sie dasselbe Verfahren für Notes_carpets.

Hinweis

Wir werden das Feature "In MR anzeigen " für die Kategorie "Teppiche " nicht einschließen. Schließen Sie für die Seite Notes_carpets das Hinzufügen des Katalog-Steuerelements zum Speichern von Fotos, die während der In MR anzeigen-Sitzung aufgenommen wurden, aus.

Tipp

Sie können Ihre Anwendung testen, indem Sie die F5-TASTE auf der Tastatur drücken oder die Schaltfläche " Wiedergeben " in der oberen rechten Ecke von Power Apps Studio auswählen.

Bestellzusammenfassungsseite erstellen

Fügen Sie den Bildschirmen Product_details und Carpet_details Schaltflächen hinzu. Benennen Sie die Schaltflächen Order_product und Order_carpet um. Ändern Sie den Anzeigetext der Schaltflächen in "Reihenfolge".
Erstellen Sie zwei neue leere Bildschirme, und benennen Sie sie Order_products und Order_carpets um.
Wählen Sie den Product_details Bildschirm aus, und konfigurieren Sie dann die OnSelect-Eigenschaft der Schaltfläche " Bestellung " wie folgt:
```
Navigate('Order_products',ScreenTransition.Cover)
```
Folgen Sie demselben Verfahren für den Carpet_details Bildschirm.
Fügen Sie auf der Seite Order_products Die Etiketten "Produkt", " Preis", "Farbe" und " Notizen " ein, und benennen Sie sie entsprechend um.
Fügen Sie leere Etiketten neben " Produkt", " Preis", "Farbe" und "Notizen " ein, wie in der Abbildung dargestellt.

Konfigurieren Sie die Text-Eigenschaft dieser leeren Bezeichnungen wie folgt:

Produkt:
```
Gallery_products.Selected.Name
```
Preis:
```
Gallery_products.Selected.Price
```
Farbe:
```
Gallery_products.Selected.Color
```
Hinweise:
```
TextInput_products.Text
```

Fügen Sie oben eine weitere Beschriftung hinzu, und ändern Sie den Anzeigetext in "Bestellzusammenfassung". Ändern Sie den Schriftgrad und die Schriftart entsprechend Ihren Anforderungen.
Erweitern Sie das Dropdownmenü "Katalog ", und wählen Sie "Horizontal" aus. Behalten Sie nur das Bild bei; löschen Sie andere Komponenten der Galerie. Umbenennen Order_gallery_products
Konfigurieren Sie die Items-Eigenschaft dieses Katalogs, indem Sie die folgende Zeile hinzufügen:
```
ViewInMR1.Photos
```
Fügen Sie drei Etiketten hinzu und ändern Sie den Anzeigetext zu Geben Sie Ihre E-Mail ein, um eine Bestellbestätigungsnachricht zu erhalten!, Organisations-E-Mail-Adresse: und Kunden-E-Mail-Adresse:.
Erweitern Sie das Dropdownmenü "Eingabe ", und wählen Sie "Texteingabe" aus. Fügen Sie dem Bildschirm zwei Texteingabekomponenten hinzu, und positionieren Sie sie wie in der Abbildung dargestellt. Benennen Sie sie Input1_products und Input2_products um.
Konfigurieren Sie die Hint-Texteigenschaft durch das Hinzufügen von Mail-ID eingeben:; keinen Wert in der Eigenschaft Standardeinstellung speichern. Passen Sie den Schriftgrad und die Schriftfarbe an Ihre Bedürfnisse an.
Fügen Sie auf der Registerkarte "Einfügen " eine Schaltfläche hinzu, und konfigurieren Sie die zugehörige Texteigenschaft , indem Sie "Bestätigen" hinzufügen.
Erweitern Sie das Dropdownmenü "Symbole ", und wählen Sie das Symbol " Zurück " und "Start " aus. Positionieren Sie sie richtig, wie in der Abbildung dargestellt.

Konfigurieren Sie die OnSelect-Eigenschaft dieser beiden Symbole wie folgt:

Zurück:

Navigate(Product_details,ScreenTransition.CoverRight)

Startseite:

Navigate('Home Page',ScreenTransition.CoverRight)

Befolgen Sie dasselbe Verfahren für Order_carpets.

Endseite erstellen

Erstellen Sie einen leeren Bildschirm und benennen Sie ihn in Endseite um.
Fügen Sie eine Beschriftung hinzu, und ändern Sie den Anzeigetext in "Bestellung erfolgreich übermittelt!". Positionieren Sie die Beschriftung nach Bedarf auf dem Bildschirm.
Fügen Sie unten auf dem Bildschirm eine Schaltfläche hinzu. Konfigurieren Sie die Text-Eigenschaft der Schaltfläche, indem Sie "Shop mehr" hinzufügen. Lassen Sie uns den Benutzer zur Startseite weiterleiten: Wählen Sie die Schaltfläche "Mehr shoppen" aus, und fügen Sie anschließend die folgende Zeile in die OnSelect-Eigenschaft ein.
```
Navigate('Home Page',ScreenTransition.Cover)
```
Erweitern Sie das Dropdownmenü "Medien ", und wählen Sie "Bild" aus, um der Seite "Ende" eine Bildkomponente hinzuzufügen.
Positionieren Sie das Bild wie in der Abbildung dargestellt. Wählen Sie die anzuzeigende Logodatei aus.

Tipp

Speichern Sie Ihre Anwendung häufig, indem Sie oben die Registerkarte "Datei " und dann die Option " Speichern " auswählen. Wenn Sie dazu aufgefordert werden, wählen Sie die Cloudoption und dann " Speichern" aus.

Senden von E-Mails über Power Apps

Wählen Sie die Registerkarte " Daten " aus, und wählen Sie "+Daten hinzufügen" aus. Erweitern Sie die Connectors, und wählen Sie dann Office 365 Outlook aus, um es als einen der Connectors für diese Anwendung hinzuzufügen.

Öffnen Sie Order_products , und konfigurieren Sie dann die OnSelect-Eigenschaft der Schaltfläche " Bestätigen ", indem Sie die folgenden Zeilen hinzufügen:

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)

Hinweis

Die in der vorherigen Funktion verwendeten Namen folgen den In dieser Anwendung zum Zeitpunkt der Entwicklung verwendeten Benennungskonventionen. Sie können die Funktion entsprechend Ihrer Anwendung anpassen.

Durch die Implementierung der vorstehenden Schritte muss Ihre Anwendung wie folgt funktionieren: Ihre Anwendung enthält eine Notizenseite zum Speichern aller Sitzungsnotizen, eine Zusammenfassungsseite zum Überprüfen Ihrer Bestellung und zum Senden von E-Mails sowie eine Endseite , um eine hervorragende Schließung der Anwendung zu ermöglichen.

Testen Der Anwendung auf einem mobilen Gerät

Wählen Sie den Downloadlink für Ihr Gerät aus:
- Wechseln Sie für iOS (iPad oder iPhone) zum App Store.
- Wechseln Sie für Android zu Google Play.
Öffnen Sie Power Apps auf Ihrem mobilen Gerät, und melden Sie sich mit Ihren Microsoft-Kontoanmeldeinformationen an.
Die Apps, die Sie zuletzt verwendet haben, werden auf dem Standardbildschirm angezeigt, wenn Sie sich bei Power Apps mobile anmelden.

Die Startseite ist der Standardbildschirm, wenn Sie sich anmelden. Es zeigt die Apps an, die Sie kürzlich verwendet haben, und die Apps, die Sie als Favoriten markiert haben.
Um eine App auf einem mobilen Gerät auszuführen, wählen Sie die App-Kachel aus. Wenn Sie zum ersten Mal eine Canvas-App mit Power Apps mobile ausführen, zeigt ein Bildschirm die Streifgesten an.
Um eine App zu schließen, wischen Sie mit dem Finger vom linken Rand der App nach rechts. Auf Android-Geräten können Sie auch die Schaltfläche " Zurück " auswählen und bestätigen, dass Sie die App schließen möchten.

Hinweis

Wenn eine App eine Verbindung mit einer Datenquelle oder berechtigung für die Verwendung der Gerätefunktionen (z. B. kamera- oder Standortdienste) erfordert, müssen Sie ihre Zustimmung erteilen, bevor Sie die App verwenden können. Normalerweise werden Sie nur beim ersten Ausführen der App aufgefordert.

Feedback

War diese Seite hilfreich?