Modification des formules

Navigation dans Power Apps et les écrans

Cet exercice sur la navigation dans Power Apps fait partie d’une série consacrée à l’apprentissage de PowerApps.

En effet, grâce au premier exercice pour créer une application Bonjour en Power Apps, vous connaissez l’environnement Power Apps.

Ensuite, avec l’exercice sur les contrôles et fonctions Power Apps, vous connaissez mieux les composants.

Maintenant, vous allez découvrir d’autres composants Power Apps : la navigation Power Apps et les écrans.

Gardez à l’esprit que l’interface a pu évoluer fortement depuis que cet article a été rédigé.

Cas d’usage pour la navigation dans Power Apps

Cet exemple explique comment créer deux écrans différents.

Pour ce faire, le premier écran sera avec un fond jaune et un bouton marqué Navigation. Lorsque l’utilisateur cliquera sur le bouton Navigation, il affichera un second écran.

Ensuite, ce deuxième écran a un fond bleu avec un bouton marqué Revenir. Lorsque l’utilisateur cliquera sur le bouton Revenir il affichera le premier écran.

Deux écrans différents (1er écran)
Deux écrans différents (1er écran)

Créer une application PowerApps

Ouvrez le site web Microsoft PowerApps et identifiez-vous avec votre compte de tenant.

https://make.powerapps.com/

Ensuite, dans le volet de navigation (à gauche), cliquez sur Applications.

Puis, dans la bannière du volet central (en haut), cliquez sur Créer une application (en haut, vers la gauche).

Enfin, dans le menu qui s’affiche, cliquez sur Zone de dessin : un nouvel onglet s’ouvre.

Vous allez créer une application qui illustre la navigation dans Power Apps, et le fonctionnement des écrans.

A cet effet, dans le volet central du nouvel onglet et sous Démarrer avec un modèle ou un canevas vierge, cliquez sur Mode téléphone sous Application vide, puis patientez.

Pour vous aider, regardez la copie d’écran ci-dessous.

Démarrer avec un modèle ou un canevas vierge
Démarrer avec un modèle ou un canevas vierge

Notez que vous auriez pu aussi bien choisir la disposition de la tablette sous Application vide, car les manipulations sont strictement identiques. Il s’agit d’un choix purement arbitraire.

Enregistrer et renommer l’application

Vous allez enregistrer votre application sur la navigation dans Power Apps.

Tout d’abord, cliquez sur le ruban Fichier puis dans le volet de gauche, cliquez sur Enregistrer.

Ensuite, dans le volet central (vers la droite), remplacez le nom de l’application (« Application ») par canEcrans.

Puis, en bas, cliquez sur le bouton Enregistrer.

Si vous ne voyez pas le bouton Enregistrer, c’est parce que vous êtes dans les Paramètres de l’application. Dans ce cas, cliquez sur Enregistrer.

Enfin, cliquez sur la flèche en haut et à gauche pour revenir à l’accueil.

Créer un écran d’affichage

Afin d’éviter toute ambiguïté, il est indiqué systématiquement le nom du contrôle. Toutefois, vous pouvez aussi sélectionner un contrôle dans la représentation graphique de l’écran au milieu.

En premier lieu, cliquez sur le ruban Accueil : la liste des sous-menus apparaît (sous Accueil).

Ensuite, dans la liste des sous-menus, cliquez sur Nouvel écran : la liste des types d’écran apparaît.

Puis, dans cette liste d’écran, cliquez sur Vierge : un nouvel écran vide est ajouté. Le nom de l’écran est Screen2.

Enfin, dans l’arborescence (à gauche), cliquez sur l’écran Screen2 puis, dans ses propriétés (à droite), cliquez dans Remplir et remplacez la couleur Blanc par un bleu très clair.

Insérer un contrôle Bouton (Button)

Vous allez améliorer votre application de navigation dans Power Apps.

Pour ce faire, vous allez ajouter un bouton.

En effet, il servira à afficher l’écran nommé Screen2.

Dans le vocabulaire PowerApps, il est plutôt usuel de dire qu’il servira à naviguer jusqu’à l’écran Screen2. Le résultat qui est attendu est le suivant : quand l’utilisateur cliquera sur le bouton, l’écran Screen2 devra s’afficher.

Pour parvenir à ce résultat, il faut utiliser la fonction Navigate. Cette fonction a besoin de deux arguments. Le premier argument indique le nom de l’écran de destination de la navigation. Le second argument indique le type de transition que vous désirez.

Vous trouverez l’aide de la fonction Navigate sur le lien ci-dessous.

https://coudr.com/powfnnavigate

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1.

Cliquez sur le ruban Insérer : la liste des sous-menus apparaît (sous Insérer).

Sous Insérer, cliquez sur Bouton : un bouton apparaît sur l’écran Screen1. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1 : Button1.

Dans l’arborescence (à gauche), cliquez sur le contrôle Button1 puis cliquez dans ses propriétés (à droite), cliquez dans la zone Texte et remplacez Bouton par Navigation.

Cliquez sur le ruban Action : la liste des sous-menus apparaît (sous Action).

Sous Action, cliquez sur Naviguer : il vous est proposé de naviguer sur l’écran Screen2, ainsi qu’un choix de transition sur l’écran Screen2 (ScreenTransition.Fade). Gardez ces valeurs par défaut : une formule de navigation a été générée automatiquement. Vous allez le vérifier tout de suite.

Pour ce faire, dans les propriétés de Button1, cliquez sur l’onglet Avancé puis cliquez dans la zone OnSelect et vérifiez la présence de la formule suivante :

Navigate(Screen2; ScreenTransition.Fade)

Vous l’avez compris : un clic sur ce bouton affichera l’écran Screen2.

Appuyez sur la touche F5 puis cliquez sur le bouton Navigation : vous devez voir l’écran bleu de Screen2.

Appuyez sur la touche échap pour sortir.

Gérer les fonctions dans votre application de navigation Power Apps

En vous inspirant des manipulations précédentes, ajoutez un bouton sur l’écran Screen2 qui permet de revenir à l’écran Screen 1.

Le texte du bouton pourra être : Revenir.

Vous prendrez aussi une transition d’écran différente de la transition par défaut, par exemple : ScreenTransition.Cover.

Changez aussi la couleur de remplissage de l’écran Screen1, par exemple : Jaune.

Avec la touche F5, testez vos manipulations.

Pour vous aider, regardez la copie d’écran ci-dessous.

Deux écrans différents (2nd écran)
Deux écrans différents (2nd écran)

Renommer les écrans

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1 puis cliquez sur les points de suspension (…) et sélectionnez Renommer.

Renommez en EcranListe.

Vous auriez pu aussi double-cliquer sur le nom de l’écran dans l’arborescence, puis le renommer.

Dans l’arborescence (à gauche), cliquez sur l’écran Screen2 puis cliquez sur les points de suspension (…) et sélectionnez Renommer.

Renommez en EcranDetail.

Avec la méthode de votre choix, constatez que les formules des boutons ont bien été changées.

Pour vous aider, regardez la copie d’écran ci-dessous.

Modification des formules
Modification des formules

Pour information, notez que pour revenir à l’écran précédent, vous auriez pu aussi utiliser la fonction Back. Pour la formation ce n’est pas nécessaire de le faire.

Vous trouverez l’aide de la fonction Back sur le lien ci-dessous. Ce lien présente l’aide de la fonction Navigate et de la fonction Back.

https://coudr.com/powfnnavigate

Enregistrer l’application

Vous allez enregistrer votre application sur la navigation dans Power Apps, et les écrans.

Pour ce faire, cliquez sur le ruban Fichier puis dans le volet de gauche, cliquez sur Enregistrer.

Ensuite, fermez l’onglet de votre application : un pop-up apparaît pour confirmer la fermeture. Dans ce pop-up, cliquez sur le bouton Quitter la page. Vous retrouverez votre application sous le menu Applications de l’accueil du site PowerApps.

Résumé

Dans cet exercice, vous avez appris comment manipuler les écrans, la navigation et les formules dans PowerApps.

Notamment, vous avez créé un écran supplémentaire. Ensuite, sur chaque écran, vous avez ajouté un bouton qui grâce à la fonction Navigate permet de changer d’écran.

Vous avez aussi appris à renommer un écran et vous avez constaté que PowerApps mettait automatiquement à jour ses formules avec le nouveau nom.

Vous verrez plus tard que ce fonctionnement est général pour les contrôles et les objets de PowerApps.

Pour aller plus loin

Si vous désirez des exemples plus avancés, vous pouvez tenter de faire les exercices qui montrent comment Créer une application Power Apps ou un Flux Automate à partir de Power Apps.

Regardez aussi des exemples concrets pour implémenter un Thème personnalisé pour Power Apps, ou des Listes déroulantes en cascade Power Apps ou un Pop-up de confirmation Power Apps.

Il y a bien d’autres exemples, comme créer des Onglets dans Power Apps, Définir une jointure dans Power Apps, etc.

Commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *