Exercice : pratique de la navigation dans une application

Vous approchez de la fin de ce module, donc appliquons ce que vous avez découvert dans un exercice guidé.

Dans cet exemple, vous allez continuer à configurer les transitions d’écran dans l’application Contoso Coffee Machines. Si vous utilisez une autre application multi-écrans, vous pouvez suivre les mêmes étapes.

1. Connectez-vous à la page d’accueil Power Apps, puis ouvrez l’application Contoso Coffee Machines en mode Édition.

2. Sur l’écran d’accueil, cliquez sur le bouton Afficher le catalogue (Button2 dans l’exemple ci-dessous). Dans sa propriété OnSelect, remplacez :

   Navigate('Catalog Screen')

   par :

   Navigate('Catalog Screen',ScreenTransition.Cover)

   

3. Toujours sur l’écran d’accueil, cliquez sur le bouton Admin Screen. Dans sa formule OnSelect, remplacez :

   Navigate('Admin Screen')

   par :

   Navigate('Admin Screen',ScreenTransition.Fade)

4. Prévisualisez l’application. Cliquez sur les boutons Catalog et Admin pour observer les transitions. Ensuite, revenez à l’écran d’accueil à l’aide de vos boutons Précédent.

5. Repassez en mode Édition. Sur l’écran Admin Screen, cliquez sur l’icône représentant une flèche servant de bouton Précédent. Redéfinissez sa propriété OnSelect :

   Back()

   sur :

   Back(ScreenTransition.UnCoverRight)

6. Prévisualisez à nouveau l’application. Cliquez sur le bouton Admin Screen, puis sur le bouton Précédent. Notez la différence dans la transition de retour.

7. En mode Édition, insérez un nouvel écran : Nouvel écran>Modèles>Success Screen. Redéfinissez son nom sur Success Screen.

8. Sur l’écran Catalog Screen, sélectionnez votre contrôle Formulaire dans l’Arborescence.

9. Définissez la propriété OnSuccess du formulaire sur :

   Navigate(‘Success Screen’,ScreenTransition.Fade)

10. Accédez à l’écran Success Screen dans l’Arborescence, puis insérez un contrôle Minuterie.

11. Définissez les propriétés suivantes du contrôle Minuterie :

    • AutoStart : true

    • Duration : 4000

    • OnTimerEnd : Navigate(‘Catalog Screen’,ScreenTransition.Fade)

    • Visible : false

    

12. Revenez à l’écran Catalog Screen, puis prévisualisez l’application. Apportez une modification au formulaire et cliquez sur Enregistrer les modifications.

    L’application devrait afficher l’écran Success Screen pendant quatre secondes, puis revenir à l’écran Catalog Screen.

13. Quittez le mode Aperçu et revenez à l’écran Home Screen. À présent, ajoutez un menu de navigation déroulant.

14. Insérez un contrôle Liste déroulante et placez-le sous la zone supérieure gauche du rectangle d’en-tête.

15. Ajoutez un contrôle Libellé de texte au-dessus de la liste déroulante et définissez sa propriété Text sur :

    Screen Navigation

    Définissez sa propriété Color sur :

    Color.White

16. Sélectionnez le contrôle Dropdown et définissez ses propriétés :

    • Default : ""

    • Items : ["", "Catalog Screen", "Admin Screen"]

17. Définissez sa propriété OnChange :

    Switch(
        Self.SelectedText.Value,
        "Catalog",
        Navigate(
            'Catalog Screen',
            ScreenTransition.Cover
        ),
        "Admin",
        Navigate(
            'Admin Screen',
            ScreenTransition.Cover
        )
    );
    Reset(Self)
    

    

18. Prévisualisez à nouveau l’application. Testez la liste déroulante pour vérifier la navigation entre les écrans.

19. Revenez en mode Édition, puis sélectionnez l’écran Catalog Screen. Copiez l’icône Précédent (Ctrl + C), puis collez-la (Ctrl + V). Déplacez l’icône dupliquée en haut du rectangle d’en-tête à droite.

20. Remplacez l’icône dupliquée par une icône Accueil.

21. Définissez la propriété OnSelect de l’icône Accueil sur :

    Navigate('Home Screen', ScreenTransition.CoverRight)

22. Prévisualisez l’application. Sur l’écran Catalog Screen, vérifiez qu’un clic sur l’icône Accueil vous redirige vers l’écran Home Screen.

Vous avez correctement configuré les fonctionnalités de navigation dans votre application :

• Fonctions Navigate et Back avec transitions d’écran
• Écran Success Screen s’affichant lors de l’envoi du formulaire à l’aide d’OnSuccess
• Contrôle Minuterie qui navigue après un délai au moyen d’OnTimerEnd
• Menu déroulant pour la navigation à l’aide d’OnChange
• Icône Accueil pour revenir à l’écran d’accueil

À présent, vous allez effectuer un contrôle des connaissances.