Exercice : créer une navigation à l’écran de base pour une application canevas
Dans cette unité, nous allons continuer à travailler sur notre application Contoso Coffee Machines. Veillez donc à ouvrir l’application que nous avons continué à créer dans ce module d’apprentissage.
Nous allons ajouter une navigation à l’écran, afin que votre utilisateur puisse accéder aux différents écrans de l’application. Lorsque vous créez une application, l’écran en haut de votre Arborescence est celui vers lequel l’application est redirigée, sauf si vous définissez délibérément un écran différent dans la formule de votre propriété StartScreen pour votre application. Dans notre cas, le premier écran qu’un utilisateur verra lorsque nous partagerons une application avec lui est notre écran « Home Screen ».
Pour ajouter une navigation à notre application, procédez comme suit :
Accédez à l’écran « Home Screen » de votre application et insérez deux contrôles Bouton.
Positionnez-les tous les deux au centre de l’écran, l’un au-dessus de l’autre avec un peu d’espace entre eux, afin que notre utilisateur ne puisse pas accidentellement appuyer sur l’un en essayant d’appuyer sur l’autre. Notez comment Power Apps vous fournit des références de trait en pointillé à l’écran pour vous aider à positionner les contrôles par rapport aux autres contrôles de l’écran à proximité. Dans ce cas, assurez-vous qu’ils sont légèrement décalés afin que nous puissions découvrir comment aligner des contrôles.
En maintenant la touche Maj enfoncée, sélectionnez les deux contrôles. Certains contrôles ont des propriétés identiques qui sont faciles à aligner une fois les deux sélectionnés. Gardez les deux contrôles sélectionnés pour les deux étapes suivantes.
Sélectionnez le contrôle déroulant Aligner dans la barre de commandes, puis « Aligner à gauche ». Si vous ne voyez pas le contrôle déroulant Aligner dans la barre de commandes, vous pouvez cliquer avec le bouton droit (avec les deux contrôles sélectionnés) et vous verrez une liste déroulante des options Aligner dans une fenêtre contextuelle.
Remarque
La fonctionnalité Aligner est un moyen puissant d’aligner rapidement plusieurs contrôles à la fois. Une autre fonctionnalité puissante à noter est la fonctionnalité Annuler, qui se trouve également dans la barre de commandes juste à droite du bouton Précédent.
À présent, recherchez les propriétés Width et Height dans le volet Propriétés à droite. Il s’agit de champs de saisie numérique. Saisissez 250 pour Width et 100 pour Height.
Redéfinissez la propriété Text du bouton en haut sur « Afficher le catalogue » et la propriété Text du bouton en bas sur « Admin Screen ».
Pour modifier la propriété Text, vous pouvez double-cliquer sur le texte d’un bouton à l’écran ou accéder au champ de formule ou au volet Propriétés pour mettre à jour le texte. Essayez toutes ces techniques pour déterminer la méthode qui vous convient le mieux.
Ensuite, nous allons ajouter nos premières fonctions qui permettront la navigation à l’écran. La fonction Navigate comporte un paramètre obligatoire : l’écran vers lequel l’application va basculer. Lorsque vous ajoutez une fonction Navigate, vous saisissez votre nom d’écran entre guillemets simples et n’oubliez pas que Power Apps vous y invitera lorsque vous le saisirez dans la barre de formule. Cliquez sur le bouton « Afficher le catalogue » et ajoutez ce qui suit dans la propriété OnSelect :
Navigate('Catalog Screen')De même, cliquez sur le bouton « Admin Screen » et saisissez ce qui suit dans la propriété OnSelect :
Navigate('Admin Screen')Permettre aux utilisateurs de naviguer à partir de l’écran d’accueil les bloquera sur l’écran de destination, à moins que nous ne leur fournissions un moyen de revenir à l’écran d’accueil. Vous avez déjà vu la fonction Navigate, qui vous permet de rediriger votre utilisateur vers l’écran d’accueil, mais Power Apps offre un moyen de revenir à l’écran précédent sur lequel se trouvait votre utilisateur grâce à la fonction Back. Accédez à l’écran Catalog Screen et ajoutez un contrôle Bouton.
Faites glisser votre nouveau contrôle Bouton vers le coin inférieur droit de l’écran et redéfinissez la propriété Text sur « Précédent ».
À présent, redéfinissez la propriété OnSelect de votre nouveaux contrôle Bouton sur ce qui suit :
Back()Cette formule redirigera l’utilisateur vers l’écran précédent.
Accédez à votre écran Admin Screen et répétez les deux étapes ci-dessus.
Revenez maintenant à votre écran Home Screen et mettez l’application en mode Aperçu. Essayez de cliquer sur votre bouton « Afficher le catalogue », puis de revenir à la page d’accueil à l’aide de votre bouton « Précédent ». Essayez la même chose avec les boutons de votre écran Admin Screen.
Conseil
Votre application comprendra la fonction Back seulement si vous accédez d’abord à cet écran au moyen de l’application. Si vous commencez à prévisualiser votre application à partir de l’écran Catalog Screen ou Admin Screen, Power Apps n’a aucun contexte quant à l’écran auquel accéder avec la fonction Back. Par conséquent, lorsque vous prévisualisez votre application, n’oubliez pas de démarrer l’aperçu à partir de l’écran Home Screen.
Félicitations ! Vous avez maintenant ajouté une navigation de base à votre application. Si vous souhaitez en savoir plus sur la navigation dans les applications, nous allons explorer cela dans le prochain module d’apprentissage. Après un bref contrôle des connaissances, restez donc avec nous pour en savoir plus sur ce que vous pouvez faire pour faire franchir un palier à votre application.