Claude Couderc Consulting

Manipuler les écrans, la navigation et les formules dans PowerApps

Modification des formules

Cet exercice fait partie d’une série consacrée à l’apprentissage de PowerApps. C’est donc un entraînement purement pédagogique, qui sert à vous familiariser avec l’interface, les concepts, etc.

Vous verrez après d’autres exercices pour construire une application complète.

Cas d’usage

Cet exemple explique comment créer deux écrans différents. 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.

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/

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

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

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

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.

Si la fenêtre Bienvenue dans PowerApps Studio s’ouvre, cliquez sur le bouton Ignorer. Éventuellement, vous pouvez aussi cocher la case Ne plus afficher ce message.

Enregistrer et renommer l’application

Cliquez sur le ruban Fichier puis dans le volet de gauche, cliquez sur Enregistrer.

Dans le volet central (vers la droite), remplacez le nom de l’application (“Application”) par canEcrans.

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.

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.

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

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

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

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)

Ce bouton 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.

Si un pop-up surgit, cliquez sur le bouton OK. Éventuellement, vous pouvez aussi cocher la case Ne plus afficher ce message.

Gérer les formules

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

Cliquez sur le ruban Fichier puis dans le volet de gauche, cliquez sur Enregistrer.

Fin des manipulations

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.

L’exercice est terminé.

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.

Claude COUDERC

Ajouter un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.