Exercice - Concevoir des pages supplémentaires et envoyer des e-mails avec Power Apps

  • 10 minutes

Dans cette unité, vous allez concevoir des pages supplémentaires pour prendre en charge vos fonctionnalités de réalité mixte. Ces pages exécutent certaines fonctions spécifiques requises pour que l’application se comporte correctement. Vous utiliserez également la fonctionnalité d’e-mail de Power Apps pour envoyer les détails de la commande aux clients.

Page Créer des notes

L’utilisateur peut prendre des photos pendant la session Affichage dans MR et les afficher via une galerie. Dans la page Notes, vous pouvez stocker des notes textuelles et des images capturées pendant la session Affichage dans MR .

  1. Créez deux écrans vides et renommez-les Product_notes et Carpet_notes.

    Capture d’écran des nouveaux écrans pour les notes.

  2. Concevez la page Product_notes : sélectionnez la liste déroulante Entrée , puis sélectionnez Entrée de texte. Renommez-le TextInput_products.

    Capture d’écran de l’ajout d’une entrée de texte.

  3. Sélectionnez Galerie>Horizontale pour inclure un type horizontal de galerie. Vous allez stocker des photos prises pendant la session View in MR dans cette galerie. Renommez la galerie View_products.

    Capture d’écran de l’ajout d’une galerie horizontale.

  4. Positionnez la galerie dans l’autre partie de l’écran. Conservez uniquement l’image en supprimant le sous-titre et le titre. Agrandissez l’image.

    Capture d’écran de l’image uniquement dans la galerie.

  5. Sélectionnez la galerie et configurez la propriété Items en ajoutant la ligne suivante :

    ViewInMR1.Photos

    Capture d’écran de l’ajout d’une propriété à la galerie.

    Toutes les photos prises dans la vue dans la session MR sont stockées dans cette galerie pour une référence ultérieure.

  6. Insérons une étiquette en haut de l’écran. Sélectionnez l’option Étiquette , puis centrez-la . Personnalisez la position, la couleur et l’affichage du texte en fonction de vos besoins. Renommez-le Notes_label.

    Capture d’écran de l’insertion d’étiquette.

  7. Nous allons placer une icône Précédent sur l’étiquette précédemment ajoutée pour aider l’utilisateur à accéder à la page d’accueil si nécessaire. Pour ajouter l’icône Précédent , sous l’onglet Insertion , développez la liste déroulante Icônes , puis sélectionnez l’icône Précédent.

    Capture d’écran de l’icône d’ajout de retour.

  8. Positionnez l’icône Précédent correctement et configurez la propriété OnSelect en ajoutant les éléments suivants :

    Navigate(Product_details,ScreenTransition.Cover)

    Capture d’écran de la position et de l’option OnSelect.

  9. Basculez vers l’écran Product_details et ajoutez une icône de note dans la liste déroulante Icônes sous l’onglet Insertion .

    Capture d’écran de l’icône ajout d’une note.

  10. Configurez la propriété OnSelect de l’icône Note en ajoutant la ligne suivante :

    Navigate(Product_notes,ScreenTransition.CoverRight)

    Capture d’écran de OnSelect pour la note.

  11. Répliquez la même procédure pour Notes_carpets.

    Remarque

    Nous n’inclurons pas la fonctionnalité Affichage dans MR pour la catégorie Tapis . Pour la page Notes_carpets , excluez l’ajout du contrôle Galerie pour stocker les photos prises pendant la session Affichage dans MR .

    Conseil / Astuce

    Vous pouvez tester votre application en appuyant sur la touche F5 du clavier ou en sélectionnant le bouton Lecture en haut à droite de Power Apps Studio.

Page De résumé de commandes

  1. Ajoutez des boutons aux écrans Product_details et Carpet_details . Renommez les boutons Order_product et Order_carpet. Remplacez le texte d’affichage des boutons par Ordre.

    Capture d’écran de l’ajout d’un bouton de commande.

  2. Créez deux écrans vides et renommez-les Order_products et Order_carpets.

    Capture d’écran de l’ajout de nouveaux écrans.

  3. Sélectionnez l’écran Product_details , puis configurez la propriété OnSelect du bouton Commande comme suit :

    Navigate('Order_products',ScreenTransition.Cover)

    Capture d’écran de la configuration Order OnSelect.

  4. Suivez la même procédure pour l’écran Carpet_details .

  5. Dans la page Order_products , insérez des étiquettes Produit, Prix, Couleur et Notes , puis renommez-les en conséquence.

    Capture d’écran des étiquettes dans Order_sofas.

  6. Insérez des étiquettes vides en regard du produit, du prix, de la couleur et des notes , comme indiqué dans la figure.

    Capture d’écran des étiquettes vides dans Order_sofas.

  7. Configurez la propriété Text de ces étiquettes vides comme suit :

    • Produit :

      Gallery_products.Selected.Name

      Capture d’écran de la configuration du texte produit.

    • Prix :

      Gallery_products.Selected.Price

      Capture d’écran de la configuration du texte Price.

    • Couleur :

      Gallery_products.Selected.Color

      Capture d’écran de la configuration du texte couleur.

    • Remarques :

      TextInput_products.Text

      Capture d’écran de la configuration du texte notes.

  8. Ajoutez une autre étiquette en haut et modifiez son texte d’affichage en Résumé de commande. Modifiez la taille et la police de police en fonction de vos besoins.

    Capture d’écran de l’ajout de l’étiquette Résumé de commande.

  9. Développez la liste déroulante Galerie et sélectionnez Horizontal. Conservez uniquement l’image ; supprimez d’autres composants de la galerie. Renommez-le Order_gallery_products

    Capture d’écran de l’ajout d’une galerie.

  10. Configurez la propriété Items de cette galerie en ajoutant la ligne suivante :

    ViewInMR1.Photos

    Capture d’écran de la configuration d’éléments dans la galerie.

  11. Ajoutez trois étiquettes et modifiez le texte d’affichage pour entrer votre courrier électronique pour obtenir un message de confirmation de commande !, ID de messagerie de l’organisation :, et ID de messagerie client :, respectivement.

    Capture d’écran de trois étiquettes.

  12. Développez la liste déroulante Entrée et sélectionnez Entrée de texte. Ajoutez deux composants d’entrée de texte à l’écran et positionnez-les comme indiqué dans l’image. Renommez-les Input1_products et Input2_products.

    Capture d’écran de deux champs d’entrée de texte.

  13. Configurez la propriété de texte Hint en ajoutant l’ID de messagerie Entrée :; ne stocke aucune valeur dans la propriété Default . Ajustez la taille et la couleur de police en fonction de vos besoins.

    Capture d’écran de la configuration du texte d’indicateur.

  14. Ajoutez un bouton à partir de l’onglet Insertion et configurez sa propriété Text en ajoutant Confirm.

    Capture d’écran de l’ajout d’un bouton confirmer.

  15. Développez la liste déroulante Icônes , puis sélectionnez Icône Retour et Accueil . Positionnez-les correctement, comme indiqué dans l’image.

    Capture d’écran de l’ajout d’icônes de retour et d’accueil.

  16. Configurez la propriété OnSelect de ces deux icônes comme suit :

    • Retour :

      Navigate(Product_details,ScreenTransition.CoverRight)

      Capture d’écran de la configuration OnSelect de retour.

    • Accueil :

      Navigate('Home Page',ScreenTransition.CoverRight)

      Capture d’écran de la configuration de OnSelect : Order.

  17. Suivez la même procédure pour Order_carpets.

Créer une page de fin

  1. Créez un écran vide et renommez-le fin de page.

    Capture d’écran de la page de fin.

  2. Ajoutez une étiquette et modifiez son texte d’affichage pour Commander correctement envoyé !. Positionnez l’étiquette comme nécessaire sur l’écran.

    Capture d’écran de l’ajout d’une étiquette pour Order Réussie.

  3. Ajoutez un bouton en bas de l’écran. Configurez la propriété Text du bouton en ajoutant Shop more. Dirigeons l’utilisateur vers la page d’accueil : sélectionnez le bouton Acheter plus , puis ajoutez la ligne suivante dans la propriété OnSelect .

    Navigate('Home Page',ScreenTransition.Cover)

    Capture d’écran du bouton Afficher plus.

  4. Développez la liste déroulante Média et sélectionnez Image pour ajouter un composant image à la page End.

    Capture d’écran de l’ajout d’un composant image.

  5. Positionnez l’image comme indiqué dans l’image. Sélectionnez le fichier de logo à afficher.

    Capture d’écran de l’ajout d’un fichier logo au composant image.

    Conseil / Astuce

    Enregistrez fréquemment votre application en sélectionnant l’onglet Fichier en haut et en sélectionnant l’option Enregistrer . Si vous y êtes invité, sélectionnez l’option cloud , puis sélectionnez Enregistrer.

Envoyer des e-mails via Power Apps

  1. Sélectionnez l’onglet Données , puis sélectionnez + Ajouter des données. Développez les connecteurs, puis sélectionnez Office 365 Outlook pour l’ajouter en tant que connecteurs pour cette application.

    Capture d’écran de l’ajout de connecteurs de données pour Outlook.

  2. Ouvrez Order_products , puis configurez la propriété OnSelect du bouton Confirmer en ajoutant les lignes suivantes :

    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)

    Capture d’écran de la configuration du bouton Confirmer.

    Remarque

    Les noms utilisés dans la fonction précédente suivent les conventions d’affectation de noms utilisées dans cette application au moment du développement. Vous pouvez personnaliser la fonction en fonction de votre application.

L’implémentation des étapes précédentes doit faire fonctionner votre application de la façon suivante : votre application inclut une page Notes pour stocker toutes les notes de session, une page récapitulative commande pour passer en revue votre commande et envoyer des courriers, et une page de fin pour fournir une excellente fermeture à l’application.

Animation de la démonstration de l’application après l’ajout de pages et de fonctionnalités de messagerie supplémentaires.

Tester votre application sur un appareil mobile

  1. Choisissez le lien de téléchargement pour votre appareil :

  2. Ouvrez Power Apps sur votre appareil mobile et connectez-vous avec vos informations d’identification de compte Microsoft.

  3. Les applications que vous avez utilisées récemment apparaissent sur l’écran par défaut lorsque vous vous connectez à Power Apps mobile.

    L’écran d’accueil est l’écran par défaut lorsque vous vous connectez. Il affiche les applications que vous avez utilisées récemment et les applications que vous avez marquées comme favoris.

  4. Pour exécuter une application sur un appareil mobile, sélectionnez la vignette de l’application. Si c’est la première fois que vous exécutez une application canevas à l’aide de Power Apps mobile, un écran affiche les mouvements de balayage.

  5. Pour fermer une application, utilisez votre doigt pour balayer du bord gauche de l’application à droite. Sur les appareils Android, vous pouvez également sélectionner le bouton Précédent et confirmer que vous souhaitez fermer l’application.

    Remarque

    Si une application nécessite une connexion à une source de données ou une autorisation d’utiliser les fonctionnalités de l’appareil (telles que les services de caméra ou d’emplacement), vous devez donner votre consentement avant de pouvoir utiliser l’application. En règle générale, vous êtes invité uniquement la première fois que vous exécutez l’application.