Exercice : pratique de la navigation dans une application

30 minutes

Vous approchez de la fin de ce module, donc rassemblons le tout dans un exercice.

Dans l’exemple suivant, vous continuez d’ajouter une fonctionnalité de transition d’écran à l’application Cafetières Contoso, mais vous pouvez utiliser toute application multi-écran. Les étapes suivantes correspondent à l’application sur laquelle vous avez travaillé dans ce parcours d’apprentissage.

Remarque

Lorsque vous saisissez des formules, il est préférable de les saisir dans le champ de formule (fx) au lieu d’utiliser la technique du copier/coller. Les guillemets simples et doubles ne se traduisent pas de la même manière dans Power Apps.

Connectez-vous à la page d’accueil Power Apps, puis ouvrez l’application Cafetières Contoso en mode Édition.
Sur l’écran d’accueil, cliquez sur le bouton Afficher le catalogue. Dans la formule OnSelect, remplacez Navigate('Catalog Screen') par :

Navigate('Catalog Screen',ScreenTransition.Cover)
Toujours sur l’écran d’accueil, cliquez sur le bouton Admin Screen. Dans la formule OnSelect, remplacez Navigate('Admin Screen') par :

Navigate('Admin Screen',ScreenTransition.Fade)
Mettez l’application en mode Aperçu. Testez à quoi ressemblent les transitions en cliquant sur les boutons de l’écran d’accueil pour accéder aux écrans concernés, puis revenez à l’écran d’accueil à l’aide de vos boutons Précédent.
Ajoutez une transition vers un bouton Précédent. Remettez l’application en mode Édition et accédez à l’écran Admin Screen.
Sélectionnez l’icône représentant une flèche (ou l’icône que vous utilisez comme bouton Précédent) et redéfinissez la formule OnSelect en remplaçant Back() par :

Back(ScreenTransition.UnCoverRight)
Revenez à l’écran d’accueil et mettez votre application en mode Aperçu. Cliquez sur le bouton Admin Screen, puis sur le bouton Précédent. Avez-vous remarqué la différence dans la transition ?
Revenez en mode Édition. Ajoutez un écran Success Screen en cliquant sur Nouvel écran>Modèles>Success.
Redéfinissez le nom de l’écran sur Success Screen.
Accédez à l’écran Catalog Screen et sélectionnez votre contrôle Form. Vous pouvez le sélectionner dans votre volet Arborescence.
Dans la propriété OnSuccess du contrôle Formulaire, saisissez le code suivant :

Navigate(‘Success Screen’,ScreenTransition.Fade)
Maintenant que vous avez ajouté OnSuccess à votre formulaire, accédez à votre écran Success Screen en sélectionnant Success Screen dans le volet Arborescence.
Sur l’écran Success Screen, insérez un contrôle Timer.
Définissez les propriétés suivantes de votre contrôle Timer :
- AutoStart : true
- Duration : 4000
- OnTimerEnd : Navigate(‘Catalog Screen’,ScreenTransition.Fade)
- Visible : false
Pour tester la fonctionnalité de votre contrôle Minuterie de l’écran Success Screen, revenez à l’écran Catalog Screen et mettez votre application en mode Aperçu. Sélectionnez tout élément et apportez-y une modification sur le formulaire.
Cliquez sur le bouton Enregistrer les modifications en bas du formulaire. Si vous le faites correctement, l’application affiche l’écran Success Screen pendant quatre secondes, puis revient à l’écran « Catalog Screen » où vous pouvez continuer à apporter des modifications.
Quittez le mode Aperçu et revenez à l’écran d’accueil à partir du volet Arborescence. Vous allez maintenant créer un menu de navigation déroulant.
Insérez un contrôle Dropdown sur l’écran d’accueil et positionnez-le sous le coin supérieur gauche du rectangle d’en-tête.
Insérez un contrôle Text label et redéfinissez la propriété Text sur Screen Navigation. Placez-le juste au-dessus du contrôle Dropdown.
Sélectionnez votre contrôle Dropdown. Redéfinissez la propriété Default sur :

""
Toujours sur votre contrôle Dropdown, redéfinissez la propriété Items sur :

["", "Catalog", "Admin"]

Saisissez la formule suivante pour la propriété OnChange du contrôle Dropdown :

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

Remettez l’application en mode Aperçu/Lecture et testez la fonctionnalité OnChange de votre contrôle DropDown pour accéder aux autres écrans.
Ajoutez une icône Accueil à votre écran Catalog Screen. Remettez l’application en mode Édition et sélectionnez Catalog Screen.
Sélectionnez le contrôle d’icône Précédent en haut de l’écran Catalog Screen à droite, puis copiez-le à l’aide du raccourci clavier Ctrl + C ou en cliquant avec le bouton droit, puis en sélectionnant Copier.
Collez la copie de votre icône Précédent (Ctrl + V) et repositionnez-la en haut à gauche de votre rectangle d’en-tête.
Avec l’icône Précédent sélectionnée, cliquez sur le bouton Icône dans la barre de commandes et remplacez l’icône par l’icône Accueil.
Redéfinissez la propriété OnSelect sur :

Navigate('Home Screen', ScreenTransition.CoverRight)

Vous disposez maintenant d’un moyen de revenir à l’écran d’accueil après avoir enregistré correctement les modifications apportées à vos données.
Sur l’écran Catalog Screen, mettez votre application en mode Aperçu. Vérifiez qu’un clic sur l’icône Accueil vous redirige vers l’écran d’accueil.

Vous avez ajouté avec succès certaines fonctionnalités de navigation à une application :

Transitions d’écran pour les fonctions Navigate et Back.
Un écran Success Screen auquel vous accédez à l’aide de la propriété OnSuccess d’un contrôle Formulaire.
Un contrôle Timer qui revient à l’écran Catalog Screen à l’aide de la propriété OnTimerEnd.
Un contrôle Dropdown qui revient à d’autres écrans à l’aide de la propriété OnChange.
Une icône Accueil permettant aux utilisateurs de revenir à l’écran d’accueil.

Vous allez ensuite effectuer un contrôle des connaissances.

Exercice : pratique de la navigation dans une application

Commentaires