Catégories
Consultant, Formateur

Partager une application Power Apps pilotée par un modèle

Dans cet exercice, vous allez apprendre comment partager une application basée sur un modèle.

Préparation

  • L’exercice du TP Configurer le tableau de bord central doit être terminé avec succès.
  • Dans ce scénario, le compte autorisé à exécuter l’application est Alice MARTIN. . Il n’est pas nécessaire de créer ce compte. Remplacez-le par un compte qui existe dans votre organisation.

Administrer l’application

Ouvrez le site web Microsoft Power Apps et identifiez-vous avec votre compte.

https://make.powerapps.com/

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

Dans le volet central, cliquez sur les 3 petits points (…) en face du nom de votre application Formulaire NDF, puis cliquez sur le choix Partager : un grand volet s’ouvre à droite.

Partager l’application

Vous pouvez partager l’application avec un utilisateur ou un groupe. Vous pouvez le faire en entrant un nom, une adresse email d’utilisateurs ou de groupes de sécurité Azure Active Directory avec lesquels vous souhaitez partager l’application.

Il n’est pas possible de partager une application avec un groupe de distribution de l’organisation ou avec un utilisateur ou un groupe qui n’appartient pas à votre organisation.

Dans ce scénario, entrez Alice Martin.

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

Partage application Power Apps
Partage application Power Apps

Sélectionnez le compte Alice mais ne cliquez pas sur le bouton Partager.

Autoriser l’accès à l’entité

Cochez la case d’Alice Martin : la partie droite du volet de met à jour. L’assistant vous demande d’attribuer un rôle à Alice Martin sur Common Data Service.

Cliquez sur la flèche descendante dans le choix multiple sans faire de sélection.

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

Partage application Power Apps en cours
Partage application Power Apps en cours

Par défaut, vous n’avez que 2 rôles qui sont proposés. Le rôle Administrateur système, dont vous comprenez les droits, et le rôle System Customizer. Ce rôle donne les droits de modification sur les entités, dont l’entité Note des Frais.

Éventuellement, il est possible de créer des rôles de sécurité supplémentaires et d’y affecter des utilisateurs.

Pour l’instant, cochez la case de System Customizer, puis cliquez sur le bouton Partager (en bas).

Tester le partage

Vous allez tester le partage avec le compte d’Alice Martin.

Pour ce faire, ouvrez un autre navigateur web que celui que vous utilisez actuellement. Par exemple, si vous utilisez Google Chrome, ouvrez Microsoft Edge ou Firefox. Vous pourriez garder le même navigateur web. Toutefois, le fait de disposer de deux navigateurs différents vous évite de jongler entre les comptes.

Dans le nouveau navigateur web, ouvrez le site :

https://www.office.com

Renseignez le compte de l’utilisateur Alice Martin (alice@<nom de votre tenant>.onmicrosoft.com) puis son mot de passe.

Si vous avez oublié le mot de passe d’Alice Martin, vous pouvez le récupérer dans le courriel de votre compte d’administrateur du tenant.

Éventuellement, vous pouvez aussi le réinitialiser dans l’AD avec un nouveau mot de passe.

Une fois l’ouverture du site, fermez les pop-ups qui surgissent éventuellement.

Dans la page d’accueil du site Office 365, cliquez sur le choix Toutes les applications.

Dans la page qui s’ouvre, cherchez l’application Power Apps et cliquez dessus : la page d’accueil de Power Apps s’ouvre et vous voyez la liste des applications autorisées, dont Formulaire NdF (en bas).

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

Autoriser une application Power Apps
Autoriser une application Power Apps

Cliquez simplement sur le nom de l’application Formulaire NdF qui s’ouvre.

Vérifiez que Alice Martin peut créer, modifier ou supprimer des données de cette entité, grâce à l’application.

Ensuite, fermez l’onglet de l’application.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment partager et autoriser une application basée sur un modèle.

Vous avez pu aussi vérifier que les autorisations étaient bien accordées à l’application et sur l’entité concernée.

Catégories
Consultant, Formateur

Exécuter l’application Power Apps pilotée par un modèle

Dans cet exercice, vous allez (enfin !) pouvoir exécuter l’application basée sur un modèle que vous avez préparée.

L’exécution et le lancement de l’application ne pose pas vraiment de problème. Toutefois, c’est intéressant de découvrir les nombreuses possibilités offertes par ce type d’application. C’est d’autant plus intéressant que ces possibilités ont été générées automatiquement.

Préparation

Administrer l’application

Ouvrez le site web Microsoft Power Apps et identifiez-vous avec votre compte.

https://make.powerapps.com/

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

Dans le volet central, cliquez simplement sur le nom de votre application Formulaire NDF : l’application s’ouvre en exécution dans un nouvel onglet.

Patientez quelques instants.

Page Statistiques

Votre application s’affiche et présente la première page, qui est la page Statistiques.

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

Statistiques
Statistiques

Notez qu’il peut être normal qu’un composant soit vide. C’est le cas s’il n’y a pas de valeurs à afficher. Par ailleurs, il est possible que l’affichage de la vue Notes de frais actifs soit différent du votre. En effet, la vue a été librement enrichie comme cela était proposé dans un exercice précédent.

Rassurez-vous, il n’est pas trop tard pour enrichir cette vue. Celle-ci est directement accessible à partir de l’onglet Affichages de l’entité. Il suffit de l’ouvrir en modification, d’y ajouter les colonnes voulues puis d’enregistrer et de publier le tout. Ensuite, vous ouvrirez à nouveau votre application.

Les éléments de cette page sont dynamiques. Notamment, vous pouvez agrandir un graphique, ou filtrer des valeurs, ou approfondir une donnée, etc.

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

Explorer les données
Explorer les données

Dans le volet de gauche, vous trouvez les autres pages à afficher : Formulaire et Blog Power Apps. Cliquez sur ces liens. Vous remarquerez que Blog Power Apps s’ouvre dans un autre onglet, tandis que Formulaire reste sur l’onglet en cours.

Créer une première note de frais

Grâce au volet de gauche, ouvrez la page Formulaire. Et, sur cette page, cliquez dans le menu sur Nouveau.

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

Créer une nouvelle Note de frais
Créer une nouvelle Note de frais

Renseignez ce formulaire :

  • Dépense : Trajet aéroport Bruxelles
  • Date déplacement : 25/03/2020
  • Moyen de transport : Taxi
  • Mission : presta power apps Ixelles
  • Montant payé : 60

Gardez les valeurs par défaut des autres champs.

Puis, cliquez dans le menu sur Enregistrer et Fermer : votre enregistrement a bien été créé.

Vous remarquerez l’absence du champ Nombre Km car le transport s’est fait en Taxi. Vous allez créer une seconde note de frais avec un déplacement en Voiture.

Créer une seconde note de frais

Pour ce faire, cliquez sur le choix Nouveau.

Renseignez ce formulaire :

  • Dépense : Retour Bruxelles
  • Date déplacement : 24/04/2020
  • Moyen de transport : Voiture
  • Mission : presta power automate Ixelles
  • Nombre Km : 240

Gardez les valeurs par défaut des autres champs.

Puis, cliquez dans le menu sur Enregistrer et Fermer : votre enregistrement a bien été créé.

En revanche, si vous indiquez que vous avez utilisé votre Voiture vous voyez bien apparaître le champ Nombre Km : c’est l’application d’une règle créée dans l’exercice du TP Ajouter une nouvelle règle de visibilité.

Par ailleurs, le champ est obligatoire : c’est l’application d’une autre règle de l’exercice du TP Créer une règle d’entreprise obligatoire.

Vous pouvez aussi vérifier que le champ Indemnités Km a bien été mis à jour dans la vue Notes de frais actifs : c’est l’application d’un champ calculé de l’exercice du TP Ajouter un champ calculé.

La page Formulaire offre de très nombreuses possibilités, très intéressantes.

Par exemple, vous pouvez modifier les données directement dans Microsoft Excel online.

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

Modification des données dans Excel Online
Modification des données dans Excel Online

Par exemple, modifiez une valeur de la colonne Montant payé puis enregistrez votre modification. Ensuite, patientez quelques instants avant de visualiser votre modification.

Page Récent

Vous constaterez aussi qu’au fur et à mesure de vos manipulations, le volet des actions récentes s’enrichit automatiquement.

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

Récents
Récents

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment exécuter l’application basée sur un modèle que vous avez préparée.

Catégories
Consultant, Formateur

Configurer le tableau de bord central d’une application Power Apps

Dans un exercice précédent, vous avez configuré le tableau de bord d’une vue d’entité. Dans cet exercice, vous allez configurer un nouveau tableau de bord qui va être indépendant d’une vue d’entité.

De plus, vous pourrez configurer le plan de site pour qu’il pointe sur ce nouveau tableau de bord. Ce qui n’est pas possible de faire avec un tableau de bord d’une vue d’entité.

Préparation

Administrer l’application

Ouvrez le site web Microsoft Power Apps et identifiez-vous avec votre compte.

https://make.powerapps.com/

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

Dans le volet central, cliquez sur les 3 petits points (…) en face du nom de votre application Formulaire NDF, puis cliquez sur le choix Modifier : l’application s’ouvre dans le concepteur d’application dans un nouvel onglet.

Dans le volet central de l’application, vous avez le tableau de bord qui est au milieu avec le fond violet.

Créer un tableau de bord

Cliquez sur le composant Tableaux de bord avec le fond violet.

Le volet Composants s’affiche à droite. Il y a 7 tableaux de bord par défaut.

Vous allez créer votre tableau de bord spécifique.

Pour ce faire, cliquez sur le lien bleu Créer nouveau puis cliquez sur le choix Tableaux de bord classiques : une fenêtre s’ouvre. Celle-ci présente différentes dispositions sur sa gauche. Elle présente aussi des idées de représentations sur sa droite, avec un texte d’explications.

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

Choisir une disposition
Choisir une disposition

Dans la partie gauche, cliquez sur le Tableau de bord de présentation à 3 colonnes (c’est le modèle qui se trouve dans la copie d’écran ci-dessus), puis cliquez sur le bouton Créer.

Vous constaterez tout de suite qu’il y a plus de possibilités avec ce tableau de bord, notamment dans le choix du type d’information à saisir. En effet, comme les tableaux de bord de la vue d’entité, vous pouvez insérer un graphique, mais vous pouvez aussi insérer en plus une liste, un assistant de relation, un IFrame ou une ressource web.

Dans le champ Nom, saisissez le titre Suivi des dépenses.

Ajout de la liste 1

Dans la section haute et à gauche, cliquez sur l’icône en forme de liste (Insérer une liste) : la fenêtre Ajouter un composant s’affiche.

Dans la liste déroulante du champ Type d’enregistrement, sélectionnez le choix Notes de frais.

Dans la liste déroulante du champ Vue, sélectionnez le choix Déplacements en voiture. Puis cliquez sur le bouton Ajouter.

Pour l’instant, le résultat n’est pas visible.

Ajout du graphique 1

Dans la section haute et au milieu, cliquez sur l’icône en forme d’histogrammes (Insérer un graphique) : la fenêtre Ajouter un composant s’affiche.

Dans la liste déroulante du champ Type d’enregistrement, sélectionnez le choix Notes de frais.

Gardez le choix par défaut des champs Vue et Graphique.

Puis cliquez sur le bouton Ajouter.

Pour l’instant, le résultat n’est pas visible.

Ajout du graphique 2

Dans la section haute et à droite, cliquez sur l’icône en forme d’histogrammes (Insérer un graphique) : la fenêtre Ajouter un composant s’affiche.

Dans la liste déroulante du champ Type d’enregistrement, sélectionnez le choix Notes de frais.

Gardez le choix par défaut du champ Vue.

Dans la liste déroulante du champ Graphique, sélectionnez le choix Notes de frais Remboursables. Évidemment, vous retrouvez les mêmes graphiques parce qu’en formation vous n’allez pas passer votre temps à en créer plusieurs. En revanche en production, les concepteurs d’applications créent différents graphiques.

Puis cliquez sur le bouton Ajouter.

Pour l’instant, le résultat n’est pas visible.

Ajout de la liste 2

Dans la section basse, cliquez sur l’icône en forme de liste (Insérer une liste) : la fenêtre Ajouter un composant s’affiche.

Dans la liste déroulante du champ Type d’enregistrement, sélectionnez le choix Notes de frais.

Gardez le choix par défaut du champ Vue.

Puis cliquez sur le bouton Ajouter.

Pour l’instant, le résultat n’est pas visible.

Vous allez enregistrer les modifications du composant.

Pour ce faire, cliquez sur le bouton Enregistrer (en haut à gauche). Puis ensuite, cliquez sur le bouton Fermer : le concepteur d’applications s’affiche.

Dans le volet composant des tableaux de bord, décochez la case Tous et activez la case en face de votre tableau de bord Suivi des dépenses.

Supprimez la vue d’entité Boite aux lettres qui vient de s’ajouter. Pour supprimer une vue d’entité, cliquez sur son nom (Boite aux lettres) pour la sélectionner en entier, puis cliquez sur supprimer dans le menu.

Mettre à jour le plan de site

Vous allez modifier légèrement le plan de site.

Sur le composant Plan de site, cliquez sur l’icône en forme de crayon : le concepteur de plan de site s’ouvre.

Dans le concepteur de plan de site, cliquez sur le composant Statistiques : le volet Propriétés s’ouvre sur la droite.

Dans ce volet et dans la liste déroulante du champ Tableau de bord par défaut, effacez le tableau de bord présent puis sélectionnez le choix Suivi des dépenses.

Enregistrer et publier le plan de site

Vous allez enregistrer les modifications du composant.

Pour ce faire, cliquez sur le bouton Enregistrer (en haut, vers la droite). Cette action permet de sauvegarder vos modifications. Toutefois, elles ne sont pas visibles par d’éventuels utilisateurs.

Pour rendre visible vos modifications, cliquez aussi sur le bouton Publier (en haut, à droite).

Enregistrer l’application

Sur le fil d’ariane (en haut, à gauche), cliquez sur Concepteur d’application : vous obtenez l’affichage de votre application.

Maintenant, vous allez enregistrer les modifications de l’application (et pas seulement du composant). Pour ce faire, cliquez sur le bouton Enregistrer et fermer (en haut, vers la droite).

Vous revenez sur la liste des applications. Si vous voyez un pop-up, cliquez sur le bouton OK du pop-up.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment configurer le nouveau tableau de bord de l’application.

De plus, vous avez configuré le plan de site pour qu’il pointe sur ce nouveau tableau de bord.

Catégories
Consultant, Formateur

Configurer la vue d’entité d’une application Power Apps

Cet exercice vous explique comment configurer la vue d’entité d’une application Power Apps d’entreprise à partir d’un modèle.

Une vue d’entité est composée de différents composants : formulaires, vues, graphiques et tableaux de bord. Chacun de ses composants peut être paramétré.

Cet exercice va vous apprendre comment configurer chacun de ses composants.

Il est le cœur de l’application Power Apps basée sur un modèle. Il est relativement long car il y a de nombreuses étapes avant d’arriver à un résultat cohérent.

Soyez patient. Quand vous verrez le résultat final (et la suite !), vous allez en pleurer d’émotion 😉

Préparation

Administrer l’application

Ouvrez le site web Microsoft Power Apps et identifiez-vous avec votre compte.

https://make.powerapps.com/

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

Dans le volet central, cliquez sur les 3 petits points (…) en face du nom de votre application Formulaire NDF, puis cliquez sur Modifier : l’application s’ouvre dans le concepteur d’application dans un nouvel onglet.

Dans le volet central de l’application, vous avez la vue d’entité qui est tout en bas. Cette vue d’entité est constituée de Formulaires, Vues, Graphiques et Tableaux de bord.

Vous allez créer le formulaire qui permet la saisie ou modification d’une note de frais.

Créer un formulaire

Cliquez sur le composant Formulaires : le volet Composants s’affiche à droite. Ce volet affiche les 2 formulaires de l’entité Note de frais : Un formulaire principal et un aperçu. Ces formulaires sont génériques et livrés avec chaque entité.

Vous allez créer votre propre formulaire.

Pour ce faire, cliquez sur le lien bleu Créer nouveau, puis cliquez sur Formulaire principal. Les autres types de formulaires fonctionnement sur le même principe qu’un formulaire principal.

Une fenêtre s’ouvre.

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

Créer un formulaire
Créer un formulaire

Dans le volet de droite, remplacez le texte du champ Nom complet par Formulaire NdF.

Laissez la description inchangée même si elle n’est pas très significative.

Votre formulaire est constitué de 3 zones : Header, Général, Footer. Vous allez pouvoir les visualiser sur le formulaire.

Dans le volet de gauche, cliquez sur Arborescence (icône avec 3 feuilles empilées).

Sous Arborescence, ouvrez Formulaire NdF.

Cliquez sur Header et observez ce qui se passe sur le volet central : la zone Header est sélectionnée et délimitée par un rectangle violet.

Refaites la même manipulation avec Général et Footer. Quand vous êtes sur Général, saisissez Principal dans le champ Nom du volet de droite.

Maintenant, vous allez déposer les champs métiers dans la zone Général.

Pour ce faire, cliquez à nouveau sur Général pour la sélectionner.

Dans le volet de gauche, cliquez sur Champs (icône avec Abc).

Avec la souris, déposez les champs suivants dans la zone Général :

  • Date déplacement
  • Moyen de transport
  • Mission
  • Montant payé
  • Date validation
  • NdF Validée
  • Nombre Km

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

Liste des champs du formulaire
Liste des champs du formulaire

Dans un exercice précédent, vous avez créé une règle qui stipule que le champ Nombre Km ne doit être visible que si le Moyen de transport a été fait en Voiture. Autrement dit, le champ Nombre Km doit être caché par défaut : il ne doit apparaître que lorsque le Moyen de transport est la Voiture.

Vous allez donc masquer le champ Nombre Km. Pour ce faire, cliquez sur le champ Nombre Km puis dans le volet de droite cochez la case Masquer le champ. Ainsi, le champ Nombre Km est masqué par défaut : il ne sera visible que lorsque l’utilisateur aura indiqué un Moyen de transport en Voiture.

Vous allez enregistrer les modifications du composant.

Pour ce faire, cliquez sur le bouton Enregistrer (en haut, vers la droite). Cette action permet de sauvegarder vos modifications. Toutefois, elles ne sont pas visibles par d’éventuels utilisateurs.

Pour rendre visible vos modifications, cliquez aussi sur le bouton Publier (en haut, à droite).

À l’issue de la publication, fermez la fenêtre du Formulaire : le concepteur d’application s’affiche. Dans le volet composant des formulaires, décochez la case Tous et activez la case en face de votre formulaire (si elle est déjà cochée, laissez la cochée). Cela signifie qu’il sera le seul accessible dans l’application.

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

Liste des formulaires de l'application
Liste des formulaires de l’application

Maintenant, vous allez enregistrer les modifications de l’application (et pas seulement du composant). Pour ce faire, cliquez sur le bouton Enregistrer (en haut, vers la droite).

Pour information, vous auriez pu créer et ajouter directement les formulaires dans l’onglet Formulaires de votre entité. Avec la méthode de votre choix, vous les retrouvez dans l’onglet ci-dessous.

Si vous ne les voyez pas, appuyez sur F5 pour actualiser l’affichage de votre navigateur.

Formulaires de l'entité
Formulaires de l’entité

Créer une vue

Maintenant, cliquez sur le composant Vues : le volet Composants s’affiche à droite. Ce volet affiche les 5 vues de l’entité Note de frais. Ces vues sont génériques et livrées avec chaque entité.

Vous allez créer votre vue spécifique.

Pour ce faire, cliquez sur le lien bleu Créer nouveau: une fenêtre s’ouvre.

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

Créer une nouvelle vue (partiel)
Créer une nouvelle vue (partiel)

Dans le volet central, cliquez sur Critères de filtre pour l’ouvrir.

Cliquez sur Ajouter un filtre, puis cliquez dans la liste déroulante et sélectionnez le champ Moyen de transport.

Dans le champ Sélectionner une valeur (encadré en rouge), cliquez sur la flèche: une boîte de dialogue s’ouvre. Dans cette boîte de dialogue, cliquez sur Voiture puis cliquez sur > pour l’ajouter et cliquez sur OK.

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

Critères de filtre
Critères de filtre

Dans le volet central, cliquez sur Critères de filtre pour la fermer.

Sous Colonnes, cliquez sur la zone Cliquer pour ajouter le nom de la vue.

Dans le champ Cliquer pour ajouter le nom de la vue, saisissez Déplacements en voiture.

Dans le volet Composants, cliquez sur Attributs de colonne / Entité principale.

Avec la souris, déposez les champs suivants sur la ligne marquée Dépense :

  • Date déplacement
  • Mission
  • Montant payé
  • Nombre Km
  • Indemnités Km

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

Champs à afficher (partiel)
Champs à afficher (partiel)

Vous allez enregistrer les modifications du composant.

Pour ce faire, cliquez sur le bouton Enregistrer et fermer (en haut, vers la droite) : le concepteur d’applications s’affiche.

L’action Enregistrer et ferme permet de sauvegarder vos modifications. Dans le cas des vues, elle publie aussi automatiquement vos modifications. Il n’est donc pas nécessaire, ni possible d’ailleurs, de publier.

Dans le concepteur d’application, cliquez sur le composant Vues, puis décochez la case Tous, et enfin cochez la vue Notes de frais actifs. Cette vue affiche une simple liste de dépenses dont le statut est actif. C’est le cas par défaut.

Si vous le souhaitez, vous pouvez améliorer cette vue en y ajoutant des champs supplémentaires. Si vous ne le faites pas : aucun problème car vous ne serez pas bloqué par la suite.

Dans notre cas, nous avons rajouté les mêmes champs que ceux de la vue Déplacements en voiture : Date déplacement, Mission, Montant payé, Nombre Km, Indemnités Km.

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

Liste des vues de l'application
Liste des vues de l’application

Maintenant, vous allez enregistrer les modifications de l’application (et pas seulement du composant). Pour ce faire, cliquez sur le bouton Enregistrer (en haut, vers la droite).

Pour information, vous auriez pu créer et ajouter directement les vues dans l’onglet Affichage de votre entité. Avec la méthode de votre choix, vous les retrouvez dans l’onglet ci-dessous.

Si vous ne les voyez pas, appuyez sur F5 pour actualiser l’affichage de votre navigateur.

Vues de l'entité
Vues de l’entité

Création du graphique 1

Maintenant, cliquez sur le composant Graphiques : le volet Composants s’affiche à droite. Il n’y a pas de graphiques par défaut.

Vous allez créer votre graphique spécifique.

Pour ce faire, cliquez sur le lien bleu Créer nouveau: une fenêtre s’ouvre.

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

Créer un nouveau graphique (partiel)
Créer un nouveau graphique (partiel)

Sous le ruban (en haut), dans le champ Entrer le nom du graphique ici, saisissez le titre Dépenses par Moyen de transport. Juste au-dessus de ce champ, vérifiez que la vue sélectionnée est bien Notes de frais actifs.

Dans le ruban (en haut), sélectionnez le graphique Barre.

En dessous de la partie centrale avec le graphique en grisé, cliquez dans la liste déroulante du champ Légende (Série), puis sélectionnez le champ Montant payé.

Ensuite, cliquez dans la liste déroulante du champ Horizontal (Catégorie), puis sélectionnez le champ Moyen de transport.

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

Paramétrage des axes
Paramétrage des axes

À l’issue de ces manipulations, vous obtenez un graphique qui ressemble à celui-ci :

Graphique Dépenses par Moyen de transport
Graphique Dépenses par Moyen de transport

Vous allez enregistrer les modifications du composant.

Pour ce faire, cliquez sur le bouton Enregistrer et fermer (en haut à gauche) : le concepteur d’applications s’affiche.

L’action Enregistrer et fermer permet de sauvegarder vos modifications. Dans le cas des graphiques, elle publie aussi automatiquement vos modifications. Il n’est donc pas nécessaire, ni possible d’ailleurs, de publier.

Gardez la case Tous cochée.

Création du graphique 2

Vous allez créer un autre graphique spécifique.

Pour ce faire, cliquez sur le lien bleu Créer nouveau: une fenêtre s’ouvre.

Sous le ruban (en haut), dans le champ Entrer le nom du graphique ici, saisissez le titre Notes de frais Remboursables. Juste au-dessus de ce champ, vérifiez que la vue sélectionnée est bien Notes de frais actifs.

Gardez le graphique par défaut Colonne.

En dessous de la partie centrale avec le graphique en grisé, cliquez dans la liste déroulante du champ Légende (Série), puis sélectionnez le champ Montant payé.

Ensuite, cliquez dans la liste déroulante du champ Horizontal (Catégorie), puis sélectionnez le champ Remboursable.

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

Graphique Notes de frais Remboursables
Graphique Notes de frais Remboursables

Vous allez enregistrer les modifications du composant.

Pour ce faire, cliquez sur le bouton Enregistrer et fermer (en haut à gauche) : le concepteur d’applications s’affiche.

Gardez la case Tous cochée.

Maintenant, vous allez enregistrer les modifications de l’application (et pas seulement du composant). Pour ce faire, cliquez sur le bouton Enregistrer (en haut, vers la droite).

Pour information, vous auriez pu créer et ajouter directement les graphiques dans l’onglet Graphiques de votre entité. Avec la méthode de votre choix, vous les retrouvez dans l’onglet ci-dessous.

Si vous ne les voyez pas, appuyez sur F5 pour actualiser l’affichage de votre navigateur.

Graphiques de l'entité
Graphiques de l’entité

Créer un tableau de bord

Maintenant, cliquez sur le composant Tableaux de bord de la vue d’entité. Pour l’instant, ne cliquez pas sur le composant Tableaux de bord avec le fond violet.

Le volet Composants s’affiche à droite. Il n’y a pas de tableaux de bord par défaut.

Vous allez créer votre tableau de bord spécifique.

Pour ce faire, cliquez sur le lien bleu Créer nouveau: une fenêtre s’ouvre. Celle-ci présente différentes dispositions sur sa gauche. Elle présente aussi des idées de représentations sur sa droite, avec un texte d’explications.

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

Choisir une disposition
Choisir une disposition

Dans la partie gauche, cliquez sur le Tableau de bord de présentation à 2 colonnes (c’est le modèle qui se trouve dans la copie d’écran ci-dessus), puis cliquez sur le bouton Créer.

Dans le champ Nom, saisissez le titre Dépenses.

Dans le champ Vue d’entité, sélectionnez le choix Notes de frais actifs.

Ajout du graphique 1

Dans la section haute et à gauche, cliquez sur l’icône du milieu : la fenêtre Ajouter un composant s’affiche.

Dans cette fenêtre, gardez le choix par défaut du graphique.

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

Ajouter un 1er graphique
Ajouter un 1er graphique

Puis cliquez sur le bouton Ajouter.

Ajout du graphique 2

Vous allez ajouter le second graphique.

Pour ce faire, dans la section haute et à droite, cliquez sur l’icône du milieu : la fenêtre Ajouter un composant s’affiche.

Dans cette fenêtre, changez le choix par défaut du graphique en Notes de frais Remboursables.

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

Ajouter un 2nd graphique
Ajouter un 2nd graphique

Puis cliquez sur le bouton Ajouter.

Dans cette fenêtre, gardez le choix par défaut du graphique puis cliquez sur le bouton Ajouter.

Ajout du flux

Dans notre scénario le flux est simplement une vue des données. Toutefois, il existe d’autres possibilités pour les flux.

Dans le menu du haut, cliquez sur flux : la fenêtre Ajouter un flux s’affiche.

Dans cette fenêtre, gardez tous les choix par défaut.

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

Ajouter un flux
Ajouter un flux

Puis cliquez sur le bouton OK.

Vous allez enregistrer les modifications du composant.

Pour ce faire, cliquez sur le bouton Enregistrer (en haut à gauche). Puis ensuite, cliquez sur le bouton Fermer : le concepteur d’applications s’affiche.

Gardez la case Tous cochée.

Maintenant, vous allez publier les modifications de l’application avec les modifications. Pour ce faire, cliquez sur le bouton Publier (en haut, à droite).

Pour information, vous auriez pu créer et ajouter directement les tableaux de bord dans l’onglet Tableaux de bord de votre entité. Avec la méthode de votre choix, vous les retrouvez dans l’onglet ci-dessous.

Si vous ne les voyez pas, appuyez sur F5 pour actualiser l’affichage de votre navigateur.

Tableaux de bord de l'entité
Tableaux de bord de l’entité

C’est terminé !

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment configurer la vue d’entité d’une application Power Apps d’entreprise.

Vous avez aussi appris à créer des formulaires, des vues, des graphiques et des tableaux de bord.

Enfin, vous avez découvert que tous ces composants appartenaient à votre entité.

Sachez qu’une application basée sur un modèle peut disposer de plusieurs vues d’entité indépendantes. Par exemple, vous pouvez avoir une vue d’entité d’une autre entité sur la même application.

Catégories
Consultant, Formateur

Concevoir le plan de site d’une application Power Apps

Cet exercice vous explique comment concevoir le plan de site d’une application Power Apps d’entreprise à partir d’un modèle.

Préparation

Administrer l’application

Ouvrez le site web Microsoft Power Apps et identifiez-vous avec votre compte.

https://make.powerapps.com/

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

Dans le volet central, cliquez sur les 3 petits points (…) en face du nom de votre application Formulaire NDF, puis cliquez sur Modifier : l’application s’ouvre dans le concepteur d’application dans un nouvel onglet.

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

Concepteur d'application (partiel)
Concepteur d’application (partiel)

Le message d’erreur concernant l’absence de configuration du plan de site saute aux yeux. La notion de plan de site va être rapidement explicitée. Toutefois, dans une première approche, il s’agit d’une notion identique à celle d’un plan de site d’un site web. Autrement dit, c’est un outil pour aider vos utilisateurs à naviguer dans votre application.

Sur le composant Plan de site encadré en rouge, cliquez sur l’icône en forme de crayon : le concepteur de plan de site s’ouvre.

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

Concepteur de plan de site (partiel)
Concepteur de plan de site (partiel)

Le plan du site a plusieurs rôles. Un des rôles est de configurer la navigation de votre application. Pour cela, le plan de sites possède une ou plusieurs zones. Dans une zone, il existe un ou plusieurs groupes. Et un groupe possède une ou plusieurs zones.

Les termes des composants (Zone, Groupe, Sous-zone) sont volontairement vagues et génériques. Cela permet une grande souplesse dans l’organisation du plan de site.

Paramétrer la zone

Cliquez sur Nouvelle zone : le volet Propriétés s’ouvre sur la droite. Ce volet est constitué de 2 sections : la section Général et la section Avancé.

Dans le volet Propriétés, saisissez le titre Notes de frais. La valeur 1036 entre parenthèses correspond au code langue du français.

Ensuite, cliquez sur la liste déroulante du champ Icône, et sélectionnez l’icône Views.svg (tout en bas de la liste). L’extension svg désigne un format vectoriel d’image.

Laissez le nom par défaut de la zone ID.

Cliquez sur Avancé. Vous pourriez ajouter un titre ou une description dans une langue différente du français, en la sélectionnant dans les listes déroulantes Paramètres régionaux. Pour la formation, ce n’est pas nécessaire de le faire.

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

Paramétrer la zone
Paramétrer la zone

Paramétrer le groupe

Ensuite, cliquez sur Nouveau groupe : le volet Propriétés s’ouvre sur la droite.

Dans le volet Propriétés, saisissez le titre Déclarations.

Laissez le nom par défaut de la zone ID.

Cliquez sur Avancé. Vous pourriez ajouter un titre ou une description dans une langue différente du français, en la sélectionnant dans les listes déroulantes Paramètres régionaux. Pour la formation, ce n’est pas nécessaire de le faire.

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

Paramétrer le groupe
Paramétrer le groupe

Paramétrer la sous-zone

Ensuite, cliquez sur Nouvelle sous-zone : le volet Propriétés s’ouvre sur la droite.

Dans le volet Propriétés, cliquez sur la liste déroulante sous le champ Type. Il y a différents types : Tableau de bord, Entité, Ressource Web, URL.

Le type Entité est vu dans cet exercice et le type Tableau de bord sera vu dans un autre exercice.

Le type URL permet d’associer au composant une simple URL quelconque. Par exemple, ça peut être l’URL du site intranet de votre entreprise, ou un autre site.

Le type Ressource Web référence des fichiers stockés dans le dossier virtuel webresources dans chaque instance Common Data Service. Ce dossier permet de stocker des fichiers HTML, JavaScript et CSS, ainsi que plusieurs formats d’image. Les ressources Web sont des fichiers permettant d’étendre l’application Web Common Data Service. Il est possible d’utiliser les ressources web dans les personnalisations de formulaire, dans le Plan de site, ou dans le ruban de l’application.

Sélectionnez le type Entité, puis cliquez sur la liste déroulante sous le champ Entité. Dans cette liste, sélectionnez l’entité Note de frais.

Ensuite, saisissez le titre Formulaire.

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

Paramétrer la sous-zone
Paramétrer la sous-zone

Si vous êtes en avance, vous pouvez passer un peu de temps pour découvrir les nombreux paramètres qui sont disponibles sous la section Avancé. Si vous ne voyez pas la section Avancé, cliquez sur la section Général pour la réduire : vous devriez avoir la section Avancé avec ses sous-sections.

Ajouter un tableau de bord

Comme son nom l’indique, un composant de type Tableau de bord présente des informations sous la forme d’un tableau de bord. Il existe plusieurs tableaux de bord qui sont livrés par défaut. Toutefois, vous pouvez aussi créer vos propres tableaux de bord. Vous le ferez plus tard dans un exercice suivant. Pour l’instant, l’objectif est de préparer un emplacement pour afficher un tableau de bord.

Pour ce faire, cliquez sur l’onglet Composants.

Puis, avec la souris, glissez le composant Sous-Zone au-dessus de la sous-zone Formulaire dans le plan de site.

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

Ajout d'une nouvelle sous-zone
Ajout d’une nouvelle sous-zone

Dans le volet Propriétés, cliquez sur la liste déroulante sous le champ Type.

Sélectionnez le type Tableau de bord, puis, dans le champ Tableau de bord par défaut, cliquez sur n’importe quel choix. Le choix du tableau de bord n’a pas d’importance, car vous modifierez ce choix plus tard.

Ensuite, saisissez le titre Statistiques.

Ajouter une URL

Enfin, afin d’agrémenter votre plan de site, vous allez lui ajouter une autre sous-zone.

Pour ce faire, cliquez sur l’onglet Composants.

Puis, avec la souris, glissez le composant Sous-Zone sous la sous-zone Formulaire dans le plan de site.

Dans le volet Propriétés, cliquez sur la liste déroulante sous le champ Type.

Sélectionnez le type URL, puis tapez dans le champ URL https://coudr.com.

Ensuite, saisissez le titre Blog Power Apps.

Enregistrer et publier le plan de site

Vous allez enregistrer les modifications du composant.

Pour ce faire, cliquez sur le bouton Enregistrer (en haut, vers la droite). Cette action permet de sauvegarder vos modifications. Toutefois, elles ne sont pas visibles par d’éventuels utilisateurs.

Pour rendre visible vos modifications, cliquez aussi sur le bouton Publier (en haut, à droite).

Enregistrer l’application

Sur le fil d’ariane (en haut, à gauche), cliquez sur Concepteur d’application : vous obtenez l’affichage de votre application. Par ailleurs, vous noterez la présence de la vue d’entité. Celle-ci a été rajoutée automatiquement lors de l’enregistrement du plan de site. L’exercice suivant aborde en détail le rôle et le fonctionnement de la vue d’entité.

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

Formulaire NDF mis à jour
Formulaire NDF mis à jour

Maintenant, vous allez enregistrer les modifications de l’application (et pas seulement du composant). Pour ce faire, cliquez sur le bouton Enregistrer et fermer (en haut, vers la droite).

Vous revenez sur la liste des applications. Si vous voyez un pop-up, cliquez sur le bouton OK du pop-up.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment concevoir le plan de site d’une application Power Apps d’entreprise.

C’est déjà bien mais évidemment, il reste à configurer les autres composants.

C’est l’objet des manipulations suivantes.

Catégories
Consultant, Formateur

Créer une application Power Apps d’entreprise

Cet exercice vous explique comment créer une application Power Apps d’entreprise à partir d’un modèle.

Préparation

Générer l’application

Ouvrez le site web Microsoft Power Apps et identifiez-vous avec votre compte.

https://make.powerapps.com/

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

Dans le volet central, cliquez dans le menu sur Nouvelle application puis cliquez sur Basé sur des modèles.

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

Création d'une application basée sur un modèle
Création d’une application basée sur un modèle

La page Créer une application s’ouvre dans un nouvel onglet.

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

Créer une application (partiel)
Créer une application (partiel)

Avant de renseigner les champs de cette page, il est intéressant de comprendre leur utilité.

Nommer l’application

Le nom de l’application est son nom convivial. C’est le nom utilisé par les utilisateurs pour la désigner.

Indiquez le nom Formulaire NDF.

Le nom unique comporte un préfixe qui a été automatiquement généré par le système, par exemple cr121_. Ce préfixe permet de donner un nom unique à vos objets si vous souhaitez les importer dans un autre environnement, qui aura un autre préfixe.

Gardez le nom unique sans faire aucune modification.

Créer la vignette de l’application

Une description précise permet de rendre plus explicite le rôle de l’application. Cette description s’affiche avec l’icône de l’application. Au début, vous commencez par une puis deux applications etc. Quand vous commencez en avoir plusieurs dizaines, vous vous rendez compte qu’une description précise est vraiment utile. En revanche, la description n’a aucun intérêt si c’est juste pour remettre le nom de l’application.

Saisissez la description Formulaire de saisie des notes de frais : V4. Pour un besoin spécifique, voir avec la RH de votre entreprise.

L’icône de l’application est aussi précieuse pour distinguer les différents types d’applications. Par exemple, vous pouvez utiliser une icône spécifique pour les applications RH, une autre pour les applications IT, etc. Vous trouverez plusieurs fois le même nom d’icône car elles ont plusieurs tailles.

Il est possible de charger des images personnalisées spécifiques pour vos applications dans votre environnement. Toutefois, cette manipulation avancée ne peut pas se faire directement dans cette page, pour l’instant.

Décochez la case Utiliser l’image par défaut, puis sélectionnez RightPane_EmptyState.png, dans la liste déroulante.

Vous remarquerez aussi la création automatique d’une URL d’interface unifiée pour l’application. Une petite icône vous permet de copier cette URL pour la coller dans un e-mail, par exemple.

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

Informations de l'application (partiel)
Informations de l’application (partiel)

Utiliser la solution existante pour créer l’application

L’utilisation d’une solution existante nécessite que cette solution existe 🙂

En fait, une solution est un programme. Il peut s’agir d’un programme développé par vos équipes ou par Microsoft. Par exemple, Microsoft fournit une solution qui s’intitule Le vérificateur PowerApps. Celui-ci “effectue une analyse statique de vos solutions PowerApps pour identifier les risques de performance et de stabilité, et fournit des recommandations détaillées pour supprimer ces risques de vos solutions”.

Activer cette case permet donc de créer une application à partir d’une solution déjà développée. Quand cette case est activée, le choix de la solution se fait sur la page suivante.

Dans ce scénario, vous n’avez pas créé de solution donc ne cochez pas la case Utiliser la solution existante pour créer l’application.

Choisir une page d’accueil pour l’application

Si cette case est activée, une page d’accueil s’affiche au moment du lancement de l’application.

Vous décidez librement du contenu de la page d’accueil. Par exemple, celle-ci peut présenter l’application et son fonctionnement, ou bien expliquer dans quel cas l’utiliser. Vous avez un exemple de page d’accueil dans le TP Créer une application Power Apps à partir d’un modèle.

Dans ce scénario, ne cochez pas la case Choisir une page d’accueil pour l’application.

Activer Mobile Offline

Si cette case est activée, vous pouvez configurer la synchronisation Mobile Offline pour permettre aux utilisateurs de travailler en mode hors connexion sur leur appareil mobile.

Dans ce scénario, ne cochez pas la case Activer Mobile Offline.

Créer l’application

Cliquez sur le bouton Terminé (en haut, à droite) : le formulaire NDF est créé et s’ouvre en mode brouillon dans le Concepteur d’applications.

Ne soyez pas surpris par le message d’erreur concernant l’absence de configuration du plan de site. Cela va être corrigé dans un prochain exercice.

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

Concepteur d'application (partiel)
Concepteur d’application (partiel)

Cliquez sur Enregistrer et fermer (en haut).

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer une application Power Apps d’entreprise à partir d’un modèle.

L’application n’est évidemment pas terminée. Toutefois, certains concepts sont nouveaux : il était important de passer un peu de temps à les comprendre.

Dans les prochains exercices, vous verrez progressivement comment construire l’application.

Catégories
Consultant, Formateur

Créer une application Power Apps canevas avec CDS

Cet exercice vous explique comment créer une application Power Apps canevas à partir d’une entité CDS.

Préparation

L’exercice du TP Créer une règle d’entreprise obligatoire doit être terminé avec succès.

Générer l’application

Ouvrez le site web Microsoft Power Apps et identifiez-vous avec votre compte.

https://make.powerapps.com/

Dans le volet de navigation (à gauche), cliquez sur Créer.

Dans le volet central, sous Démarrer à partir de données, cliquez sur Common Data Service.

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

Source de données Common Data Service (CDS)
Source de données Common Data Service (CDS)

Sous Connexions, cliquez sur votre connexion Common Data Service : le volet le plus à droite affiche toutes les tables. Ce sont bien des tables. En effet, une entité génère une table qui stocke les données. L’application s’appuie sur la table de l’entité.

Dans la zone Rechercher, saisissez le nom de votre table Notes de Frais (au pluriel car c’est une table), puis cliquez dessus pour la sélectionner, ensuite cliquez sur Se connecter (en bas, à droite).

Patientez quelques instants. Si vous obtenez un pop-up de bienvenue, cliquez sur le bouton Ignorer : votre application s’ouvre en modification.

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

Application Notes de frais (partiel)
Application Notes de frais (partiel)

Le résultat est un peu décevant car vous ne voyez pas les champs métiers de l’entité.

Vous allez corriger cela dans les sections suivantes. En attendant, vous allez renommer et enregistrer votre nouvelle application.

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 canNDF.

En bas et à droite de l’écran, 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 dans le volet de gauche.

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

Maintenant vous allez modifier légèrement la présentation de la galerie.

Basculer en affichage paysage

Dans un premier temps, vous allez basculer en affichage paysage.

Pour ce faire, cliquez sur Fichier, puis cliquez sur Paramètres dans le volet de gauche.

Dans Paramètres, cliquez sur Taille et orientation de l’écran, puis, sous Orientation, cochez la case Paysage et cliquez sur le bouton Appliquer (en bas, à droite).

Cliquez sur la flèche en haut et à gauche de l’écran pour revenir à l’accueil.

Sélectionner les champs

Ensuite, vous allez sélectionner les champs qui vous intéressent.

Pour ce faire, dans l’arborescence, cliquez sur BrowseGallery1.

Cliquez, sous Propriétés (à droite), sur Titre et sous-titre en face de la propriété Disposition, puis sélectionnez la disposition Titre, sous-titre et corps.

Ensuite cliquez, sur Modifier en face de la propriété Champs.

Ensuite assignez les valeurs suivantes :

  • Body : Dépense
  • Subtitle : Mission
  • Title : Date déplacement

Fermez le volet Données.

Mettre en forme de tableau la galerie

L’objectif est de présenter les champs de la galerie sous forme d’un tableau.

Pour ce faire, assignez les valeurs suivantes :

BrowseGallery1.Title2.Width = 270
BrowseGallery1.Subtitle2.Width = 400
BrowseGallery1.Body1.Width = 300
BrowseGallery1.Body1.Height = Title2.Size * 1,8
BrowseGallery1.NextArrow2.Height = Title2.Size * 1,8

La manipulation suivante est à faire avec la souris.

Alignez sur une seule ligne et dans cet ordre, les 4 contrôles suivants : Title2, Subtitle2, Body1, NextArrow2

Enfin :

BrowseGallery1.TemplateSize = 60

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

Application Notes de frais (partiel)
Application Notes de frais (partiel)

Évidemment, la présentation pourrait être encore nettement améliorée mais c’est déjà mieux.

Ajouter les champs métiers

Vous allez ajouter les champs métiers dans le formulaire de modification.

Pour ce faire, dans l’arborescence, cliquez sur EditScreen1, puis cliquez sur EditForm1.

Sous Propriétés (à droite), cliquez sur la liste déroulante en face de Colonnes et sélectionnez la valeur 2.

Ensuite, toujours dans les propriétés, cliquez sur Modifier les champs en face de la propriété Champs.

Supprimez le champ : Créé le.

Ensuite, cliquez sur Ajouter un champ, puis ajoutez les champs suivants :

  • Date déplacement
  • Date validation
  • Mission
  • Montant payé
  • Moyen de transport
  • NdF Validée
  • Nombre Km

Déverrouillez Date déplacement_DataCard1, puis supprimez les 3 champs : MinuteValue1, HourValue1, Separator3.

Suite à ces suppressions, des erreurs apparaissent. Corrigez les erreurs dans les formules :

Date déplacement_DataCard1.Update = DateValue1.SelectedDate
Date déplacement_DataCard1.ErrorMessage2.Y = DateValue1.Y

Déverrouillez Date validation_DataCard1, puis supprimez les 3 champs : MinuteValue2, HourValue2, Separator4.

Suite à ces suppressions, des erreurs apparaissent. Corrigez les erreurs dans les formules :

Date validation_DataCard1.Update = DateValue2.SelectedDate
Date validation_DataCard1.ErrorMessage6.Y = DateValue2.Y

Ensuite, changez la présentation pour avoir une largeur de 540 pixels pour:

Dépense_DataCard2.Width = 540
Date déplacement_DataCard1.Width = 540
Moyen de transport _DataCard1.Width = 540
Mission_DataCard1.Width = 540
Montant payé_DataCard1.Width =540
Date validation_DataCard1.Width = 540
NdF Validée_DataCard1.Width = 540
Nombre Km_DataCard1.Width = 540

Normalement, vous devriez obtenir un formulaire comme celui-ci.

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

Formulaire mis en forme
Formulaire mis en forme

Enregistrez votre application et fermez l’onglet.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer une application Power Apps canevas à partir d’une entité CDS. Vous avez vu aussi comme basculer en affichage paysage, et comment mettre sous forme de tableau la galerie. Vous avez pu modifier l’affichage du formulaire de modification.

Catégories
Consultant, Formateur

Afficher une carte géolocalisée avec Power Apps

L’objectif de cet exercice est d’afficher une carte de Microsoft Bing géolocalisée.

Si vous ne voyez rien durant l’exercice, faites des tests avec l’application Power Apps Mobile. Sur un poste de travail, le navigateur Chrome semble mieux fonctionner.

Pour vous aider, regardez la copie d’écran ci-dessous qui présente un des deux résultats attendus.

Premier résultat attendu
Premier résultat attendu

Obtenir une clé Bing Maps

Pour afficher un emplacement géographique sous forme d’une carte Bing Maps dans PowerApps, vous devez récupérer une clé d’API chez Microsoft. Elle est obligatoire.

Cette clé est un identifiant unique, qui est générée à partir de votre compte Microsoft. Selon son usage, vous avez le droit à un certain nombre d’appels de l’API Bing Maps.

Voilà à quoi ressemble une clé d’API.

Attention la clé ci-dessous est fausse (elle n’existe pas) et elle ne peut pas être utilisée.

AvyDgx0hxBPCWNLJuBPzJ2oK0yCr7tuhzVEdF3fPnIwJEC8CqrUuMV

L’utilisation de la clé est expliquée dans la suite de l’exercice. Toutefois, ce n’est pas très compliqué car elle est simplement transmise comme paramètre lors de l’appel de l’API.

Pour créer une clé, ouvrez le site web suivant :

https://coudr.com/keymsmaps

Suivez la procédure décrite sur la page pour obtenir une clé d’API pour Microsoft Maps. Cette procédure est en anglais. Si vous ne comprenez pas cette langue, demandez de l’aide à votre formateur.

La procédure est simple. Toutefois, vous devrez fournir les renseignements suivants :

  • Application name (Nom de l’application) : obligatoire. Par exemple : demo.
  • Application URL (URL de l’application) : facultatif. Laissez vide.
  • Key type (Type de clé) : obligatoire. Indiquez : Basic.
  • Application type (Type d’application) : obligatoire. Indiquez : Dev/Test.

Vous obtenez ensuite l’écran suivant :

Clé Bing Maps
Clé Bing Maps

Il suffit ensuite de cliquer sur Show key pour la voir, ou de cliquer sur Copy key pour la récupérer : copiez la clé et enregistrez-la dans un simple fichier texte, créé avec le Bloc-Notes (notepad) car vous allez bientôt l’utiliser.

Créer une application Power Apps

Ouvrez le site web Microsoft Power Apps.

https://make.powerapps.com/

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

Dans la bannière du volet central (en haut), cliquez sur Nouvelle application (en haut, vers la gauche).

Dans le menu qui s’affiche, cliquez sur : Zone de dessin.

Dans le volet central du nouvel onglet, cliquez sur Mode téléphone sous Application vide.

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 Power Apps Studio s’ouvre, cliquez sur Ignorer.

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 canBing.

En bas et à droite de l’écran, 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.

Récupérer la position courante

Si un pop-up vous indique que Power Apps souhaite connaître votre position, cliquez sur le bouton Autoriser.

Insérez un contrôle Bouton, puis changez ses propriétés.

Button1.Text = "Où suis-je ?"
Button1.Y = 40
Button1.OnSelect = UpdateContext({maPosition: Location})

Insérez deux étiquettes, et nommez-les : maLongitude, maLatitude.

Définissez leur positionnement.

maLongitude.Y = 160
maLatitude.Y = 280

Définissez leur contenu.

maLongitude.Text = "Longitude: " & maPosition.Longitude
maLatitude.Text = "Latitude: " & maPosition.Latitude

Facultativement, vous pouvez aussi agrandir la police et changer la couleur des étiquettes. C’est selon votre envie, car cela n’a pas de conséquence sur la suite de l’exercice.

Afficher la position courante

Insérez un contrôle Image, nommez-le maCarte puis définissez sa taille et son positionnement.

maCarte.Height = 600
maCarte.Width = 600
maCarte.X = 20
maCarte.Y = 400

Ensuite, définissez la propriété Image du contrôle de type Image, avec l’URL suivante. Vous prendrez soin de remplacer <votre clé> par la valeur de votre clé Bing Maps.

maCarte.Image = "https://dev.virtualearth.net/REST/V1/Imagery/Map/Road/" & Substitute("maPosition.latitude";",";".") & Substitute("maPosition.longitude";",";".") & "?mapSize=600,600 & key=<votre clé>"

La fonction Substitue() remplace le caractère “,” par “.”.

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

Afficher la position courante
Afficher la position courante

Afficher une position déterminée

Cette fois-ci, vous allez afficher la géolocalisation d’un endroit précis.

Pour ce faire, supprimez le contrôle bouton, et supprimez aussi les deux contrôles étiquettes : il ne doit rester que le contrôle image.

Ensuite, insérez un contrôle Entrée de texte, et nommez-le maVille puis définissez ses propriétés.

maVille.Default = ""
maVille.HintText = "Nom de la ville"
maVille.X = 20
maVille.X = 40

Définissez le positionnement de la carte.

maCarte.Width = 600
maCarte.X = 20
maCarte.Y = 160

Définissez la propriété Image du contrôle de type Image, avec l’URL suivante. Vous prendrez soin de remplacer <votre clé> par la valeur de votre clé Bing Maps.

maCarte.Image = "https://dev.virtualearth.net/REST/V1/Imagery/Map/Road/" & EncodeUrl(maVille.Text) & "?mapSize=600,600&key=<votre clé>"

Vous pouvez copier-coller cette URL à partir des fichiers d’exercices.

La fonction EncodeUrl() remplace les caractères non alphanumériques par des caractères alphanumériques, comme % ou des caractères hexadécimaux. En théorie, elle n’est pas indispensable. Toutefois, elle évite des caractères qui pourraient faire planter l’application.

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

Afficher une position déterminée
Afficher une position déterminée

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez découvert comment afficher une carte de Microsoft Bing géolocalisée en fonction de votre position courante et en fonction d’un emplacement défini.

Il y a d’autres appels possibles de l’API Bing Cartes. Vous les trouverez des exemples à l’emplacement : https://coudr.com/apimsmaps.

La procédure pour obtenir une clé d’API pour Google Maps est décrite sur ce lien : https://coudr.com/keygooglemaps. Le principe est similaire. Ce qui change concerne l’appel de l’API qui est différent : https://coudr.com/apigooglemaps.

Article mis à jour le 16.04.2020.

Catégories
Consultant, Formateur

Prendre une photo dans Power Apps

L’objectif de cet exercice est de créer une application Power Apps pour prendre des photos. Ces photos seront stockées dans une collection de données, puis exposées dans une galerie.

Elles pourront aussi être supprimées à la demande.

Pour vous aider, regardez la copie d’écran ci-dessous qui présente le résultat attendu (à la photo près !).

Prendre une photo
Prendre une photo

Créer une application Power Apps

Ouvrez le site web Microsoft Power Apps.

https://make.powerapps.com/

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

Dans la bannière du volet central (en haut), cliquez sur Nouvelle application (en haut, vers la gauche).

Dans le menu qui s’affiche, cliquez sur : Zone de dessin.

Dans le volet central du nouvel onglet, cliquez sur Mode téléphone sous Application vide.

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 Power Apps Studio s’ouvre, cliquez sur Ignorer.

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 canPhotos.

En bas et à droite de l’écran, 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.

Insérer un contrôle Camera

Ajoutez un contrôle Caméra.

Si un pop-up vous indique que Power Apps souhaite utiliser votre caméra, cliquez sur le bouton Autoriser.

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

Contrôle Caméra
Contrôle Caméra

Créez une collection nommée mesPhotos alimentée par la propriété Photo de la caméra, lorsque l’utilisateur sélectionnera ou appuiera sur le contrôle Camera :

Camera1.OnSelect = Collect(mesPhotos;Camera1.Photo)

Insérer un contrôle Galerie

Ajoutez un contrôle Galerie vertical : dès qu’il est inséré, cliquez sur mesPhotos dans le volet Mes sources. Cela revient à faire manuellement :

Gallery1.Items = mesPhotos

Déplacez vers le bas le contrôle Galerie.

Dans le volet Propriétés du contrôle Galerie, modifiez la disposition en Image et titre.

Supprimez le contrôle NextArrow, qui ne sert à rien dans cette application.

Le titre contient par défaut l’URL de l’élément en cours. Ce qui ne nous sert pas.

Par ailleurs, vous souhaitez que votre utilisateur, supprime une image.

Pour ce faire, modifiez la propriété Text du titre par Supprimer.

Gallery1.Title2.Text = "Supprimer"

Ensuite, modifiez la propriété OnSelect du titre pour effectuer la suppression.

Gallery1.Title2.OnSelect = Remove(mesPhotos;ThisItem)

Il serait tout à fait possible d’implémenter un pop-up de confirmation avant la validation de la suppression. C’est d’ailleurs fait dans le TP Créer un pop-up de confirmation dans Power Apps.

Tester l’application

Appuyez sur la touche F5 de votre clavier.

Il est normal que le contrôle Galerie soit vide car la collection mesPhotos n’a aucune valeur, pour l’instant.

Cliquez plusieurs fois sur le contrôle Caméra.

Supprimez aussi une ou deux photos.

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

Photos de la galerie
Photos de la galerie

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez découvert comment prendre des photos avec Power Apps

Ces photos étaient stockées dans une collection de données, puis exposées dans une galerie que vous avez personnalisée.

Vous avez aussi permis de supprimer les photos par un simple clic.

Maintenant, il reste à fournir quelques efforts supplémentaires avant de développer une application mobile comme Instagram 😉

Article mis à jour le 15.04.2020.

Catégories
Consultant, Formateur

Utiliser le stylet électronique de Power Apps

L’objectif de cet exercice est de permettre à un utilisateur de se servir du stylet. Par ailleurs, vous personnaliserez la saisie et vous autoriserez la suppression par un simple clic.

Pour vous aider, regardez la copie d’écran ci-dessous qui présente le résultat attendu.

Stylet électronique
Stylet électronique

Créer une application Power Apps

Ouvrez le site web Microsoft Power Apps.

https://make.powerapps.com/

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

Dans la bannière du volet central (en haut), cliquez sur Nouvelle application (en haut, vers la gauche).

Dans le menu qui s’affiche, cliquez sur : Zone de dessin.

Dans le volet central du nouvel onglet, cliquez sur Mode téléphone sous Application vide.

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 Power Apps Studio s’ouvre, cliquez sur Ignorer.

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 canSaisies.

En bas et à droite de l’écran, 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.

Insérer un contrôle Entrée du stylo

Ajoutez un contrôle Entrée du stylo.

Ensuite, ajoutez un contrôle Bouton, puis changez le texte du titre pour Enregistrer.

Button1.Text = "Enregistrer"

Créez une collection nommée mesSaisies, associée à la propriété OnSelect du bouton.

Button1.OnSelect = Collect(mesSaisies; {Saisie:PenInput1.Image})

Insérer un contrôle Galerie

Ajoutez un contrôle Galerie vertical : dès qu’il est inséré, cliquez sur mesSaisies dans le volet Sélectionner une source. Cela revient à faire manuellement :

Gallery1.Items = mesSaisies

Déplacez vers le bas le contrôle Galerie.

Dans le volet Propriétés du contrôle Galerie, modifiez la disposition en Image et titre.

Supprimez le contrôle NextArrow, qui ne sert à rien dans cette application.

Le titre contient par défaut l’URL de l’élément en cours. Ce qui ne nous sert pas.

Par ailleurs, vous souhaitez que votre utilisateur, supprime une Saisie.

Pour ce faire, modifiez la propriété Text du titre par Supprimer.

Gallery1.Title2.Text = "Supprimer"

Ensuite, modifiez la propriété OnSelect du titre pour effectuer la suppression.

Gallery1.Title2.OnSelect = Remove(mesSaisies;ThisItem)

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

Contrôle Entrée du stylo
Contrôle Entrée du stylo

Il serait tout à fait possible d’implémenter un pop-up de confirmation avant la validation de la suppression. C’est d’ailleurs fait dans le TP Créer un pop-up de confirmation dans Power Apps.

Tester l’application

Appuyez sur la touche F5 de votre clavier.

Grâce au menu du contrôle Entrée de stylet, changez l’épaisseur du trait en taille 8 et changez la couleur par défaut en bleu.

Avec la souris, écrivez le mot Camion ou faites un gribouillage quelconque. Si vous avez un écran tactile, vous pouvez le faire avec un stylet ou votre doigt.

Puis, cliquez deux fois sur le bouton Enregistrer.

Supprimez une saisie.

Dans le menu du contrôle Entrée de stylet, cliquez sur la X pour vider la fenêtre.

Avec la souris, écrivez le mot Bleu ou faites un gribouillage quelconque.

Puis, cliquez sur le bouton Enregistrer.

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

Saisies de la galerie
Saisies de la galerie

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez découvert comment utiliser le contrôle Entrée du stylo. Par ailleurs, vous avez utilisé le menu du contrôle pour personnaliser la saisie. Vous avez aussi permis de supprimer les saisies par un simple clic.

Article mis à jour le 14.04.2020.

Catégories
Consultant, Formateur

Créer un graphique dans Power Apps

L’objectif de cet exercice est de créer un graphique à partir des données d’une collection.

Lors de la sélection d’un segment du graphique, il sera automatiquement encadré.

Pour vous aider, regardez la copie d’écran ci-dessous qui présente le résultat attendu.

Graphique dans Power Apps
Graphique dans Power Apps

Préparation

Modifier une application existante

Ouvrez le site web Microsoft Power Apps.

https://make.powerapps.com/

Dans le volet de gauche, cliquez sur Applications.

Dans le volet central de droite, sous l’onglet Applications récentes, cliquez sur les 3 petits points en face du nom de votre application canGraphiques.

Dans la liste qui apparaît, cliquez sur Modifier.

Patientez quelques instants. Si vous obtenez un pop-up de bienvenue, cliquez sur le bouton Ignorer : votre application s’ouvre en modification.

Insérer et configurer un contrôle Graphique

Appuyez sur la touche F5 de votre clavier.

Cliquez sur le bouton pour créer la collection VillesHabitants.

Ajoutez un contrôle Graphique en secteurs, puis changez le texte du titre:

CompositePieChart1.Title2.Text = "Total par pays"

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

Ne faites pas attention aux données, elles proviennent d’un exemple fictif, livré avec le contrôle (PieChartSample).

Contrôle Graphique en secteurs
Contrôle Graphique en secteurs

Ensuite, provisionnez le contrôle Graphique en secteurs :

CompositePieChart1.PieChart1.Items = PaysHabitants

Cette formule permet d’alimenter le graphique. Celui-ci peut être vide, si aucune donnée n’existe !

Tester l’application

Appuyez sur la touche F5 de votre clavier.

Si cela n’a pas encore été fait, cliquez sur le bouton avec l’intitulé Habitants par villes, pour alimenter la collection VillesHabitants, qui contient les données en entrée. Bien évidemment, vous pouvez le faire plusieurs fois car la fonction est ClearCollect(). Cela signifie que les données ne sont alimentées qu’une seule fois, indépendamment du nombre d’appels de la fonction.

Ensuite, cliquez sur le bouton avec l’intitulé Total par pays, pour alimenter la collection PaysHabitants, qui contient le regroupement.

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

Graphique avec le total par pays
Graphique avec le total par pays

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez découvert comment créer un graphique à partir des données d’une collection. Bien évidemment, vous pouvez alimenter un graphique avec des données d’un connecteur quelconque.

Vous pouvez aussi personnaliser la légende, grâce à sa propriété Items. Enfin, selon la nature du graphique, vous pouvez aussi définir son orientation, ainsi que choisir ses couleurs.

Pour information, sachez qu’il existe d’autres possibilités plus riches. Notamment avec les vignettes Power BI ou à partir de Power BI.

Article mis à jour le 13.04.2020.

Catégories
Consultant, Formateur

Regrouper les données d’une collection dans Power Apps

L’objectif de cet exercice est de créer un regroupement de données à partir d’une collection de données. Cette collection est constituée des 3 champs suivants : Ville, Pays, Habitants.

Le regroupement doit créer une nouvelle collection de données, nommée PaysHabitants. Celle -ci doit exposer le nombre total d’habitants par pays, en utilisant la fonction GroupBy().

Pour faire cet exercice, téléchargez les fichiers. Ensuite, dézippez le fichier. Dans le dossier Collections, vous devrez utiliser le fichier Collection du nombre habitants par villes. Le mode opératoire est indiqué ci-dessous.

Pour vous aider, regardez la copie d’écran ci-dessous qui présente le résultat attendu.

Attention, il s’agit d’un total sur 2 ou 3 villes du pays et non pas le nombre total d’habitants par pays 😉

Résultat attendu
Résultat attendu

Créer une application Power Apps

Ouvrez le site web Microsoft Power Apps.

https://make.powerapps.com/

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

Dans la bannière du volet central (en haut), cliquez sur Nouvelle application (en haut, vers la gauche).

Dans le menu qui s’affiche, cliquez sur : Zone de dessin.

Dans le volet central du nouvel onglet, cliquez sur Mode téléphone sous Application vide.

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 Power Apps Studio s’ouvre, cliquez sur : Ignorer.

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 canGraphiques.

En bas et à droite de l’écran, 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 la collection de données

Dans les exercices téléchargés, ouvrez le fichier Collection du nombre habitants par villes. Ce fichier contient une fonction ClearCollect() qui crée une collection nommée VillesHabitants. Cette collection expose le nombre d’habitants de quelques villes de certains pays.

Pour créer la collection, vous allez ajouter et paramétrer un bouton.

Dans l’application canGraphiques, ajoutez un bouton, puis changez le texte du bouton :

Button1.Text = "Habitants par villes"

Ensuite copiez le contenu du fichier Collection du nombre habitants par villes dans sa propriété OnSelect (à la place de false).

Appuyez sur la touche F5 de votre clavier.

Cliquez sur le bouton pour créer la collection VillesHabitants.

Dans le ruban Fichier, vérifiez la présence de la collection.

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

Collection VillesHabitants (partiel)
Collection VillesHabitants (partiel)

Regrouper les données

Le regroupement doit créer une nouvelle collection de données, nommée PaysHabitants. Celle -ci doit exposer le nombre total d’habitants par pays, en utilisant la fonction GroupBy().

Pour ce faire, ajoutez un bouton, puis changez le texte du bouton :

Button2.Text = "Total par pays"

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

Boutons de l'application
Boutons de l’application

Ensuite, paramétrez la propriété OnSelect :

Button2.OnSelect = ClearCollect(PaysHabitants; DropColumns(AddColumns(GroupBy(VillesHabitants; "Pays"; "PaysTotal"); "Total";Sum(PaysTotal;Habitants));"PaysTotal"))

Comprendre le raisonnement

Avant d’expliquer en détail la formule, il faut comprendre le raisonnement qui aboutit à trouver cette formule.

L’objectif est d’avoir un total par pays à partir de la collection VillesHabitants.

Si vous regardez comment est construite cette collection, vous voyez ceci :

{ Ville: "Bruxelles";  Pays: "Belgique";       Habitants: 180000};
{ Ville: "Liège";      Pays: "Belgique";       Habitants: 200000};
{ Ville: "Anvers";     Pays: "Belgique";       Habitants: 500000};
{ Ville: "Genève";     Pays: "Suisse";         Habitants: 500000};
{ Ville: "Zurich";     Pays: "Suisse";         Habitants: 400000};
{ Ville: "Luxembourg"; Pays: "Luxembourg";     Habitants: 620000};
{ Ville: "Paris";      Pays: "France";         Habitants: 2200000};
{ Ville: "Nantes";     Pays: "France";         Habitants: 300000}

Celle-ci stocke le nombre d’habitants par ville et par pays : il est donc naturel de regrouper les données par pays. Dans la formule, c’est le rôle de la colonne PaysTotal, qui est créée avec la fonction GroupBy().

Ensuite, il suffit de faire la somme du nombre d’habitants qui se trouve pour chaque ligne de la colonne PaysTotal. Pour chaque pays, cette somme est stockée dans la colonne Total. La somme est calculée avec la fonction Sum(). La colonne Total est créée avec la fonction AddColumns().

Enfin, la colonne intermédiaire PaysTotal est supprimée avec la fonction DropColumns().

Ci-dessous, vous trouverez une explication plus détaillée.

Mettre en forme la formule

Pour comprendre cette formule, il faut repérer le début et la fin de chaque fonction. Pour cela, le mieux est d’utiliser la mise en forme proposée par Power Apps.

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

Mise en forme de la formule
Mise en forme de la formule

Fonction ClearCollect()

La fonction ClearCollect(…) demande à Power Apps de créer une collection. Pour ce faire, Power Apps créé une table en mémoire qui sera la future collection de données. Ensuite, le premier argument donne le nom de la collection : PaysHabitants. Power Apps le note.

Le second argument contient les champs avec leurs données. Dans un premier temps, oublions les fonctions DropColumns() et AddColumns().

Intéressons-nous à la fonction GroupBy().

Fonction GroupBy()

La fonction suivante va créer une nouvelle colonne qui se nomme PaysTotal, à partir des données de la collection VillesHabitants :

GroupBy(VillesHabitants;"Pays";"PaysTotal")

Par construction, cette colonne est donc une table qui regroupe les données de VillesHabitants par pays.

Par exemple pour la Belgique, son contenu ressemble à cette copie d’écran:

Colonne PaysTotal pour la Belgique
Colonne PaysTotal pour la Belgique

Fonctions AddColumns() et Sum()

Nous venons de voir que le premier argument de la fonction suivante renvoie une table par pays :

AddColumns(GroupBy(VillesHabitants;"Pays";"PaysTotal");"Total";Sum(PaysTotal;Habitants))

Le second argument créé une nouvelle colonne, qui se nomme “Total”. Par construction, celle-ci est alimentée avec la formule du troisième argument.

En effet, la somme de la colonne Habitants de chaque table est faite avec la fonction :

Sum(PaysTotal;Habitants)

Fonction DropColumns()

Dans la mesure où la colonne PaysTotal ne contient pas le résultat final, il ne sert à rien de la garder. C’est un simple résultat intermédiaire.

La colonne PaysTotal est donc supprimée avec la fonction :

DropColumns(AddColumns(GroupBy(VillesHabitants; "Pays"; "PaysTotal"); "Total";Sum(PaysTotal;Habitants));"PaysTotal"))

En résumé, la colonne PaysTotal a été créée avec la fonction GroupBy(), elle a servi à calculer le total par pays puis elle a été supprimée avec la fonction DropColumns().

Vérifier la formule

Appuyez sur la touche F5 de votre clavier.

Cliquez sur le bouton avec l’intitulé Habitants par villes, pour créer la collection VillesHabitants, qui contient les données en entrée.

Ensuite, cliquez sur le bouton avec l’intitulé Total par pays, pour créer la collection PaysHabitants, qui contient le regroupement.

Dans le ruban Fichier, vérifiez la présence de la collection.

Pour vous aider, regardez la copie d’écran ci-dessous qui présente le résultat attendu.

Collection PaysHabitants (partiel)
Collection PaysHabitants (partiel)

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez découvert comment regrouper les données d’une collection, et vous avez vu une méthode de résolution de problème. Ces techniques sont évidemment applicables à d’autres sources de données (Listes SharePoint, Tables SQL Server, Entités CDS, etc.)

Vous avez aussi appris comment mettre en forme une formule Power Apps complexe.

Article mis à jour le 12.04.2020.

Catégories
Consultant, Formateur

Manipuler les collections dans Power Apps

Cet exercice vous explique comment faire différentes manipulations sur les collections. Notamment, vous verrez comment créer des tables dans Power Apps. Cette technique est pratique pour générer rapidement un jeu d’essai avec des valeurs différents.

Vous verrez aussi comment récupérer la valeur d’une liste déroulante sélectionnée, et vous apprendrez à vider le contenu d’une collection existante ou d’un seul élément.

Préparation

Modifier une application existante

Ouvrez le site web Microsoft Power Apps :

https://make.powerapps.com/

Dans le volet de gauche, cliquez sur Applications.

Dans le volet central de droite, sous l’onglet Applications récentes, cliquez sur les 3 petits points en face du nom de votre application canCollections.

Dans la liste qui apparaît, cliquez sur : Modifier.

Patientez quelques instants. Si vous obtenez un pop-up de bienvenue, cliquez sur le bouton Ignorer : votre application s’ouvre en modification.

Modifier l’interface

Vous allez simplifier légèrement l’interface visuelle. En particulier, vous allez supprimer la table de données, les contrôles d’entrée de texte et réorganiser l’écran.

Pour ce faire, dans l’arborescence, cliquez sur le contrôle DataTable1 puis appuyer sur la touche Suppr de votre clavier pour supprimer le contrôle.

Avec la souris, sélectionnez les 3 contrôles d’entrée de texte puis appuyer sur la touche Suppr de votre clavier pour supprimer les contrôles.

Bien évidemment, vous auriez pu faire toutes les suppressions en une seule opération. L’intérêt est ici pédagogique afin de vous montrer différentes techniques de sélection et suppression.

Les icônes rouges d’erreurs apparaissent à cause des suppressions. En effet, les formules font encore référence aux propriétés des objets supprimés. Les erreurs vont être bientôt corrigées.

Pour l’instant, renommez le contrôle Button1 en Ajouter et déplacez le au-dessus de la galerie.

Ajouter une première liste déroulante

Dans l’arborescence, cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Ensuite, cliquez sur Contrôles, puis sélectionnez Liste déroulante: le contrôle Dropdown1 est créé.

Renommez le contrôle Dropdown1 en ListeDeroulanteNom.

Centrez le contrôle ListeDeroulanteNom.

Définissez la table de valeurs suivantes pour ListeDeroulanteNom :

Items = ["Martin";"Durand";"Tran"]

Ajouter une seconde liste déroulante

Dans l’arborescence, cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Ensuite, cliquez sur Contrôles, puis sélectionnez Liste déroulante: le contrôle Dropdown2 est créé.

Renommez le contrôle Dropdown2 en ListeDeroulantePrenom.

Centrez le contrôle ListeDeroulantePrenom et positionnez le sous ListeDeroulanteNom.

Définissez la table de valeurs suivantes pour ListeDeroulantePrenom :

Items = ["Alice";"Bob";"Chris";"Gérard"]

Ajouter une troisième liste déroulante

Dans l’arborescence, cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Ensuite, cliquez sur Contrôles, puis sélectionnez Liste déroulante : le contrôle Dropdown3 est créé.

Renommez le contrôle Dropdown3 en ListeDeroulanteAge.

Centrez le contrôle ListeDeroulanteAge et positionnez le sous ListeDeroulantePrenom.

Définissez la table de valeurs suivantes pour ListeDeroulanteAge :

Items = [28;32]

Modifier les formules

Définissez le contrôle bouton Ajouter :

OnSelect = Collect(Stagiaires; {Prénom:ListeDeroulantePrenom.Selected.Value; Nom:ListeDeroulanteNom.Selected.Value; Age:ListeDeroulanteAge.Selected.Value})
Width = 240
X = 40
Y = 390

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

Apparence finale
Apparence finale

Tester l’ajout

Avant de tester l’application, vous allez l’enregistrer. Pour ce faire, appuyez sur les touches suivantes de votre clavier : Ctrl + S.

Appuyez sur la touche F5.

Cliquez sur le bouton Ajouter : le premier élément de la collection Stagiaires est créé et affiché dans la galerie.

Modifiez les valeurs des combinaisons Nom, Prénom et Age puis générez deux éléments supplémentaires.

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

Résultats des manipulations
Résultats des manipulations

À la fin de vos tests, fermez l’application.

Insérer un contrôle Bouton (Button)

Ce contrôle permettra de vider complètement la collection.

Dans l’arborescence, cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Sous Insérer, cliquez sur Bouton : le contrôle Button2 est créé.

Renommez le contrôle Button2 en Vider.

Positionnez le contrôle Vider à coté du bouton Ajouter.

Réduisez aussi légèrement la taille des deux boutons.

Définissez le contrôle Ajouter :

Width = 240
X = 40
Y = 390

Définissez le contrôle Vider :

OnSelect = Clear(Stagiaires)
Text = "Vider"
Width = 240
X = 340
Y = 390

La fonction Clear() vide complètement une collection. Vous trouverez l’aide de la fonction Clear() sur le lien ci-dessous.

https://coudr.com/powfncollect

Tester le vidage

Avant de tester l’application, vous allez l’enregistrer. Pour ce faire, appuyez sur les touches suivantes de votre clavier : Ctrl + S.

Appuyez sur la touche F5.

Cliquez 3 fois sur le bouton Ajouter : 3 éléments identiques sont créés et affichés dans la galerie.

Cliquez sur le bouton Vider : le contenu de la collection est supprimé et la galerie n’affiche plus rien.

À la fin de vos tests, fermez l’application.

Vous pouvez vérifier que la collection existe toujours mais qu’elle est vide. Pour ce faire, cliquez sur le ruban Fichier puis cliquez sur Collections : votre collection Stagiaires apparaît bien mais vide.

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

Collection Stagiaires vide
Collection Stagiaires vide

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

L’opération précédente permet de vider une collection, vous allez voir comment supprimer un élément unitaire d’une collection.

Insérer un contrôle Icône (Icon)

Ce contrôle permettra de supprimer l’élément de votre choix de la collection.

Dans l’arborescence, cliquez sur un contrôle à l’intérieur de Gallery1, par exemple Separator2.

Faites très attention. Pour insérer un contrôle dans la une galerie, il ne suffit pas de cliquer sur la galerie. Le focus doit être sur un contrôle à l’intérieur de la galerie.

Puis dans le menu du haut cliquez sur le ruban Insérer.

Sous Insérer, cliquez sur Icônes, puis sélectionnez la corbeille : le contrôle Icon1 est créé.

Afin d’éviter que les contrôles se superposent, vous allez redéfinir la longueur des 3 contrôles : Title2, Subtitle2 et Body1.

Avec la souris, sélectionnez les 3 contrôles Title2, Subtitle2 et Body1, puis définissez en une seule fois la propriété Width :

Width = Parent.TemplateWidth - 150

Ensuite, définissez le contrôle Icon1 :

OnSelect = Remove(Stagiaires;ThisItem)

La fonction Remove() supprime un élément d’une collection. Vous trouverez l’aide de la fonction Remove() sur le lien ci-dessous.

https://coudr.com/powfncollect

Tester la suppression unitaire

Avant de tester l’application, vous allez l’enregistrer. Pour ce faire, appuyez sur les touches suivantes de votre clavier : Ctrl + S.

Appuyez sur la touche F5.

Ajoutez 3 éléments différents dans la collection.

Cliquez sur l’icône en forme de corbeille en face de l’élément du milieu et constatez qu’il est bien supprimé.

À la fin de vos tests, fermez l’application.

Bien évidemment, vous pouvez aussi vérifier que l’élément a été supprimé de la collection grâce au menu Collections du ruban Fichier.

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 Power Apps.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer des tables de données dans Power Apps. Ces tables étaient associées à des listes déroulantes.

Vous avez aussi vu comment récupérer la valeur d’une liste déroulante sélectionnée, vider le contenu d’une collection existante ou supprimer un élément d’une collection.

Article mis à jour le 11.04.2020

Catégories
Consultant, Formateur

Exporter et Importer une application Power Apps

Cet exercice vous explique comment exporter une application Power Apps existante.

Cette application sera ensuite importée.

A la fin de l’exercice, vous aurez donc une copie de la première application.

L’export / import étant une fonctionnalité en cours de développement, les interfaces vont à l’essentiel.

Préparation

Exporter une application existante

Ouvrez le site web Microsoft Power Apps :

https://make.powerapps.com/

Dans le volet de gauche, cliquez sur Applications.

Dans le volet central de droite, sous l’onglet Applications récentes, cliquez sur les 3 petits points en face du nom de votre application canVariables.

Dans la liste qui apparaît, cliquez sur Exporter un package : un volet d’ouvre.

Dans ce volet, renseignez le nom du package : canCollections. Dans ce scénario, CanCollections est le nom du package. Ce nom est arbitraire.

Laissez tous les autres paramètres par défaut, et cliquez sur le bouton Exporter, en bas.

Patientez quelques instants car un fichier ZIP va être généré.

Selon votre navigateur et son paramétrage, une boite de dialogue peut apparaître et vous proposer d’ouvrir ou d’enregistrer le fichier ZIP qui a été généré.

Sélectionnez l’enregistrement du fichier : ne l’ouvrez pas. Généralement le fichier est enregistré dans votre dossier Téléchargements, cependant cela dépend de la configuration de votre ordinateur.

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

Fichier ZIP exporté
Fichier ZIP exporté

Importer une application

Dans le site Power Apps, cliquez sur Applications, dans le volet de gauche.

Vous pouvez aussi, faire ces manipulations dans un environnement autre que celui de départ. Par exemple, vous pouvez exporter une application de l’environnement de développement puis l’importer dans l’environnement de recettes ou de production.

Dans le menu en haut, cliquez sur Importer un package : un volet s’ouvre et vous propose d’importer un package.

Dans ce volet, cliquez sur le bouton Charger puis sélectionnez le fichier ZIP exporté.

Patientez quelques instants : le package est en cours d’analyse.

Ensuite, le détail du package s’affiche.

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

Détail du package (partiel)
Détail du package (partiel)

Lors de l’import du package, vous avez deux solutions : soit mettre à jour une application déjà importée, soit créer une nouvelle application. Vous allez choisir cette seconde option.

Pour ce faire, cliquez sur le lien Mettre à jour : un autre volet s’ouvre.

Par défaut, la liste déroulante indique Mettre à jour. Si vous aviez voulu mettre à jour une application existante, il aurait fallu la sélectionner dans la liste des applications existantes

Cliquez sur la liste déroulante et sélectionnez Créer en tant que nouveau.

Saisissez le nom de la ressource : canCollections. Dans ce scénario, canCollections est le nom de la nouvelle application.

Cliquez sur le bouton Enregistrer : vous revenez sur le volet précédent.

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

Package prêt à être importé (partiel)
Package prêt à être importé (partiel)

Dans ce volet, cliquez sur Importer.

Patientez quelques instants : le package est en cours d’importation. Une fois l’importation réussie, vous obtenez une icône verte et l’absence de messages d’erreurs ou d’avertissements.

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

Passer en revue le contenu du package
Passer en revue le contenu du package

Dans le site Power Apps, cliquez sur Applications, dans le volet de gauche. Si la nouvelle application ne s’affiche pas, faites CTRL+F5 sur votre clavier pour rafraîchir l’affichage.

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

Affichage de la nouvelle application
Affichage de la nouvelle application

Vous disposez maintenant d’une copie (canCollections) de l’application initiale (canVariables). Les deux applications sont indépendantes. Cela signifie que vous pouvez faire évoluer canCollections indépendamment de canVariables.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment exporter et importer une application Power Apps afin d’en avoir une copie.

Article mis à jour le 10.04.2020

Catégories
Consultant, Formateur

Exposer une collection Power Apps via les tables et galeries

Cet exercice vous explique comment créer une collection, puis l’exposer via un contrôle Table de données et un contrôle Galerie.

Une table de données est un contrôle simple. Son rôle est d’afficher les données sous forme d’un tableau. Ce contrôle dispose de très peu de paramétrage, contrairement aux contrôles galeries qui offrent de très nombreuses possibilités.

À travers cet exercice, vous verrez donc deux des outils les plus importants de Power Apps : les collections et les contrôles Galerie.

Créer une application Power Apps

Ouvrez le site web Microsoft Power Apps.

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.

Dans le volet central du nouvel onglet, cliquez sur Mode téléphone d’Application vide.

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 Power Apps Studio s’ouvre, cliquez sur : Ignorer.

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 canVariables.

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

Enregistrer et changer le nom
Enregistrer et changer le nom

En bas et à droite de l’écran, 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.

Insérer un contrôle Bouton (Button)

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.

Un contrôle Bouton permet d’effectuer des actions, comme le changement d’écran, ou la création d’une variable.

Dans l’arborescence, cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

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

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

Dans les propriétés de Button1, cliquez sur l’onglet Avancé puis cliquez dans la zone OnSelect et remplacez False par :

Collect(Stagiaires; {Prénom:"Alice"; Nom:"Martin"; Age:32}; {Prénom:"Bob"; Nom:"Durand"; Age:36}; {Prénom:"Chris"; Nom:"Dubois"; Age:34})

La fonction Collect() crée de nouvelles collections. Une collection permet en particulier de stocker les données saisies par l’utilisateur.

Vous trouverez l’aide de la fonction Collect() sur le lien ci-dessous.

https://coudr.com/powfncollect

Dans ce scénario, la collection s’intitule Stagiaires. Elle est composée de trois variables : Prénom, Nom et Age. Elle contient trois éléments.

Appuyez sur la touche F5 puis cliquez une seule fois sur le bouton Ajouter.

C’est tout.

Appuyez sur la touche échap pour sortir de l’aperçu.

Pour l’instant, vous ne “voyez” rien mais sachez que grâce à cette action, vous avez bien créé la collection.

Vous pouvez vérifier que la collection existe. Pour ce faire, cliquez sur le ruban Fichier puis cliquez sur Collections : votre collection Stagiaires apparaît bien.

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

Collection Stagiaires
Collection Stagiaires

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

Dans l’étape suivante, vous pourrez voir vos valeurs grâce à un contrôle Table de données.

Insérer un contrôle Table de données (DataTable)

Maintenant, vous allez afficher les données de la collection dans un nouveau contrôle. C’est le contrôle Table de données. Ce contrôle sert uniquement à afficher des données sous forme de tableaux.

Dans l’arborescence, cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Sous Insérer, cliquez sur Table de données : un cadre apparaît sur l’écran blanc. Descendez légèrement le cadre pour qu’il n’empiète pas sur le bouton.

Dans l’arborescence, cliquez sur le contrôle DataTable1 puis cliquez dans ses propriétés (à droite), cliquez dans la liste déroulante de Source de données et sélectionnez Stagiaires.

Dessous, cliquez sur Modifier les champs en face de Champs : le volet Données apparaît.

Dans ce volet, cliquez sur Ajouter un champ.

Dans la liste, cochez les trois champs dans cet ordre : Prénom, Nom et Age.

Si vous n’avez pas respecter l’ordre, ce n’est pas grave. Il suffit de déplacer les champs avec la souris dans le volet Données.

Fermez le volet Données.

Appuyez sur la touche F5.

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

Contrôle Table de données
Contrôle Table de données

Cliquez deux ou trois fois sur le bouton Ajouter : la table de données affiche la même collection plusieurs fois. C’est normal dans la mesure où la fonction Collect() cumule les valeurs d’une collection.

Vous allez changer ce comportement.

Appuyez sur la touche échap pour sortir de l’aperçu.

Dans l’arborescence, cliquez sur le contrôle Button1 puis cliquez dans ses propriétés.

Dans les propriétés de Button1, cliquez sur l’onglet Avancé puis cliquez dans la zone OnSelect et remplacez la fonction Collect par ClearCollect. Ce qui donne :

ClearCollect(Stagiaires; {Prénom:"Alice"; Nom:"Martin"; Age:32}; {Prénom:"Bob"; Nom:"Durand"; Age:36}; {Prénom:"Chris"; Nom:"Dubois"; Age:34})

La fonction ClearCollect() crée une nouvelle collection. Si la collection existe déjà, elle est entièrement supprimée avant d’être recréée. Tandis que pour la fonction Collect(), si la collection existe déjà, les valeurs sont simplement ajoutées à la collection existante.

Appuyez sur la touche F5.

Cliquez deux ou trois fois sur le bouton Ajouter : la table de données n’affiche qu’une seule fois le contenu de la collection. C’est normal dans la mesure où la fonction ClearCollect() recrée systématiquement la collection. Si la collection existe déjà, elle est supprimée avant d’être recréée.

Appuyez sur la touche échap pour sortir de l’aperçu.

Dans cette étape, les données de la collection étaient stockées dans l’application. Dans les étapes suivantes, vous allez voir comment utiliser les contrôles pour alimenter automatiquement la collection à partir d’une saisie.

Insérer un contrôle Entrée de texte (Text input)

Un contrôle Entrée de texte permet de saisir du texte ou des nombres.

Dans l’arborescence, cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Sous Insérer, cliquez sur Texte puis sélectionnez Entrée de texte : une entrée de texte apparaît sur l’écran blanc. Le nom du contrôle s’affiche dans l’arborescence, sous Screen1 : TextInput1.

Refaites la même opération pour insérer un second contrôle Entrée de texte. Normalement, il se nomme TextInput2.

Refaites la même opération pour insérer un troisième contrôle Entrée de texte. Normalement, il se nomme TextInput3.

Pour tous les contrôles Entrée de texte concernés, supprimez le texte par défaut dans les propriétés (Entrée de texte).

Pour le dernier contrôle Entrée de texte TextInput3, changez son format dans Propriétés, en Nombre.

Arranger l’écran

Maintenant, vous allez arranger l’écran. Comme les manipulations sont un peu délicates, voici le résultat visuel attendu. Le détail des manipulations à faire se trouve en dessous.

Arrangement de l'écran
Arrangement de l’écran

Dans un premier temps, vous allez diminuer de moitié environ la hauteur du contrôle Table de données.

Il y a plusieurs méthodes pour le faire: souris ou formule. Dans tous les cas, assurez-vous de bien sélectionner le contrôle DataTable1.

Avec la souris, diminuez de moitié la hauteur du contrôle DataTable1. Si vous préférez utiliser la formule, indiquez que :

Height = 250
Y = 144

Avec la souris, descendez les trois contrôles Entrée de texte pour qu’ils soient sous le contrôle Table de données.

Ensuite, avec la souris, enlevez environ 2/3 de la largeur de chacun des trois contrôles Entrée de texte. En le faisant, vous remarquerez des pointillés qui apparaissent pour vous aider dans l’alignement du contrôle.

Si vous préférez utiliser la formule, indiquez pour chacun des trois contrôles Entrée de texte

Width = 186

Sachez que vous pouvez sélectionner les 3 contrôles en même temps et modifier en une seule opération la valeur d’une propriété commune.

Puis, alignez les 3 contrôles sur la même ligne.

Si vous préférez utiliser la formule, indiquez pour chacun des trois contrôles Entrée de texte

Y = 400

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

Nouvel écran
Nouvel écran

Modifier le contrôle bouton

Dans l’arborescence, cliquez sur le contrôle Button1 puis cliquez dans ses propriétés.

Dans les propriétés de Button1, cliquez sur l’onglet Avancé puis cliquez dans la zone OnSelect et remplacez la formule par :

Collect(Stagiaires; {Prénom:TextInput1.Text; Nom:TextInput2.Text; Age:TextInput3.Text})

Appuyez sur la touche F5.

Saisissez des données dans les contrôles Entrée de texte puis cliquez sur le bouton Ajouter: vous alimentez la collection. Celle-ci s’affiche dans le contrôle Table des entrées.

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

Insertion des entrées de texte
Insertion des entrées de texte

Appuyez sur la touche échap pour sortir de l’aperçu.

Dans un environnement de production, il faudrait évidemment apporter de nombreuses améliorations à cette application, mais ce n’est pas l’objectif ici.

Dans l’étape suivante, vous allez aussi afficher les données dans un contrôle Galerie.

Insérer un contrôle Galerie (Gallery)

Un contrôle Galerie propose de nombreuses options, même si dans cet exercice, vous n’en verrez que quelques-unes.

Dans l’arborescence, cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Sous Insérer, cliquez sur Galerie : la liste des modèles apparaît.

Dans la liste des modèles, sélectionnez Verticale : le volet Sélectionner une source de données apparaît.

Fermez ce volet. Vous n’en avez pas besoin pour l’instant.

Par défaut, le contrôle Gallery1 est sélectionné. Si ce n’est pas le cas, dans l’arborescence, cliquez sur le contrôle Gallery1.

Descendez le contrôle Gallery1 tout en bas de l’écran.

Ensuite, cliquez dans ses propriétés (à droite), cliquez sur la flèche vers le bas du menu Disposition.

Dans la liste des dispositions, cliquez sur Titre, sous-titre et corps.

Dans le contrôle Gallery1, définissez la propriété Items :

Stagiaires

Dans propriétés, sélectionnez Modifier à côté de l’étiquette Champs puis vérifiez que :

Si ce n’est pas le cas, mettez à jour les données.

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

Propriétés de la galerie
Propriétés de la galerie

Fermez le volet Données.

Appuyez sur la touche F5.

Ajoutez deux stagiaires supplémentaires.

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

Vue galerie
Vue galerie

Appuyez sur la touche échap pour sortir de l’aperçu.

Enregistrer l’application

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

La publication d’une application la rend disponible auprès des utilisateurs autorisés.

Dans l’écran Enregistrer, cliquez sur Publier : une boîte de dialogue vous informe que la publication donne accès aux utilisateurs dotés d’autorisations.

Dans cette boîte de dialogue, cliquez sur le bouton Publier cette version.

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

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 Power Apps.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris à créer et exposer les collections via les tables de données et les galeries. Contrairement aux tables de données, les galeries proposent de très nombreuses options de paramétrages. Certaines d’entre elles seront vues dans d’autres manipulations. Vous avez aussi découvert la différence entre les fonctions Collect() et ClearCollect().

Article mis à jour le 09.04.2020.

Catégories
Consultant, Formateur

Définir une jointure dans Power Apps

Cet exercice vous explique comment créer une jointure entre deux sources de données. L’exemple utilise des listes SharePoint. Vous pouvez utiliser cette technique avec les autres sources de données.

Vous verrez notamment comment utiliser la fonction LookUp() qui cherche des informations dans une source de données. Cette fonction est très similaire à la fonction équivalente de Microsoft Excel.

Préparation

  • L’exercice du TP Ajouter une connexion SharePoint Online dans Power Apps doit être terminé avec succès.
  • La liste lstFruits doit exister dans votre site SharePoint.
  • La liste lstProducteurs doit exister dans votre site SharePoint.

Modifier une application existante

Ouvrez le site web Microsoft Power Apps.

https://make.powerapps.com/

Dans le volet de gauche, cliquez sur Applications.

Dans le volet central de droite, sous l’onglet Applications récentes, cliquez sur les 3 petits points en face du nom de votre application canFruits.

Dans la liste qui apparaît, cliquez sur : Modifier.

Patientez quelques instants. Si vous obtenez un pop-up de bienvenue, cliquez sur le bouton Ignorer : votre application s’ouvre en modification.

Insérer un contrôle Étiquette

Pour afficher le pays du producteur, vous allez utiliser un contrôle de type étiquette.

Avant d’insérer ce contrôle, vous allez lui faire de la place sur l’écran EcranModification.

Pour ce faire, cliquez dans l’arborescence sur EditForm1 qui se trouve sous EcranModification.

Une fois que le contrôle EditForm1 est sélectionné, réduisez sa taille avec la souris, de façon que le bas du formulaire se trouve juste en-dessous de la carte du producteur. Cela correspond à :

Height = 621

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

Réduction de la taille du formulaire
Réduction de la taille du formulaire

Maintenant, il faut insérer le contrôle de type étiquette. Pour ce faire, sélectionnez l’écran EcranModification dans l’arborescence.

Ensuite, cliquez dans l’onglet Insérer puis cliquez sur Étiquette : un nouveau contrôle apparait (Label1).

Descendez le sous le formulaire et centrez-le. Cela correspond à :

Y = 709

Dans la zone de la formule, définissez Label1 :

Text = "Provenance : " & LookUp(lstProducteurs; Titre = ListeDeroulanteProducteurs.Selected.Titre; Provenance.Value)

Cette formule concatène un texte (“Provenance : “) et le résultat de la fonction LookUp. Cette fonction cherche dans la liste lstProducteurs, l’élément dont le titre est identique au titre de l’élément sélectionné dans la liste déroulante ListeDeroulanteProducteurs. Puis, elle affiche la valeur correspondante de la colonne Provenance.

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

Affichage de la provenance
Affichage de la provenance

Exécuter l’application Power Apps

Avant d’exécuter l’application, vous allez l’enregistrer. Pour ce faire, appuyez sur les touches suivantes de votre clavier : Ctrl + S.

Ensuite, cliquez sur EcranModification.

Appuyez sur la touche F5.

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

Provenance différente selon le producteur
Provenance différente selon le producteur

Changez le producteur du fruit sélectionné pour Verdure stagionali, puis vérifiez que la liste provenance a bien été mise à jour avec Italie.

À la fin de vos tests, fermez l’application.

Enregistrer l’application

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

La publication d’une application la rend disponible auprès des utilisateurs autorisés.

Dans l’écran Enregistrer, cliquez sur Publier : une boîte de dialogue vous informe que la publication donne accès aux utilisateurs dotés d’autorisations.

Dans cette boîte de dialogue, cliquez sur le bouton Publier cette version.

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

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 Power Apps.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment afficher des données liées entre elles, grâce à la fonction LookUp().

Article mis à jour le 08.04.2020

Catégories
Consultant, Formateur

Formater, Filtrer et Trier avec Power Apps

Dans cet exemple, vous allez procéder à plusieurs personnalisations de l’application Power Apps qui a été générée automatiquement à partir d’une liste SharePoint, dans l’exercice Créer automatiquement une application Power Apps à partir de Sharepoint.

Notamment, vous verrez comment appliquer un formatage conditionnel à la liste afin de faire apparaître en rouge, certains éléments.

Vous verrez aussi comment mettre en œuvre une liste déroulante à l’aide de la fonction Filter(). Cette fonction affiche les éléments sélectionnés selon le critère que vous avez indiqué.

Vous mettrez aussi en œuvre un second filtre pour n’afficher que les éléments qui correspondent à la saisie des premières lettres du titre.

Enfin, vous approfondirez le tri Power Apps, que vous mettrez aussi en œuvre.

Si vous faites des modifications dans votre liste SharePoint, comme l’ajout d’une colonne ou d’un élément, Power Apps ne peut pas le “savoir”. Vous devrez actualiser systématiquement votre connexion de données dans Power Apps pour que vos modifications soient prises en compte.

Pour ce faire, vous cliquerez sur le menu Affichage puis Source de données. En face de la source de données, vous cliquerez sur …, puis Actualiser.

Préparation

  • La liste lstAffaires doit exister dans votre site SharePoint.

Modifier une application existante

Ouvrez le site web Microsoft Power Apps.

https://make.powerapps.com/

Dans le volet de gauche, cliquez sur Applications.

Dans le volet central de droite, sous l’onglet Applications récentes, cliquez sur les 3 petits points en face du nom de votre application shpAffaires.

Dans la liste qui apparaît, cliquez sur : Modifier.

Patientez quelques instants. Si vous obtenez un pop-up de bienvenue, cliquez sur le bouton Ignorer : votre application s’ouvre en modification.

Appliquer un formatage conditionnel

Dans l’écran BrowseScreen1, vous souhaitez que le titre des jouets dont le montant hors taxe est supérieur à 20 euros, s’affiche en noir. Le titre des jouets dont le montant hors taxe est inférieur ou égal à 20 euros, s’affiche en rouge.

Dans l’écran BrowseScreen1, cliquez sur BrowseGallery1.

Ensuite, cliquez sur Title1.

Définissez sa propriété Color avec la formule :

If(MontantHT > 20;Color.Black;Color.Red)

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

Liste avec formatage conditionnel
Liste avec formatage conditionnel

Filtrer avec une liste déroulante

Dans l’écran BrowseScreen1, vous souhaitez disposer d’une liste déroulante pour filtrer les jouets sur leur état de conservation.

C’est une bonne pratique que la liste des valeurs d’une liste déroulante provienne d’une source de données externes comme une liste SharePoint. Toutefois, pour des raisons pédagogiques et afin d’éviter d’alourdir les manipulations, vous allez alimenter directement cette liste dans l’application.

Définissez l’écran BrowseScreen1 avec la propriété suivante :

OnVisible = ClearCollect( AffairesEtats; { Etat: "Tous"}; { Etat: "Neuf"}; { Etat: "Comme neuf"}; { Etat: "Très bon"}; { Etat: "Bon"}; { Etat: "Acceptable"} )

La fonction ClearCollect crée une collection nommée AffairesEtats. Cette collection énumère tous les états, ainsi que l’état “Tous” qui permet d’afficher tous les éléments. La collection sera créée et provisionnée lorsque la propriété OnVisible de l’écran BrowseScreen1 sera appelée.

La propriété OnVisible définit le comportement d’une application quand l’utilisateur accède à un écran. Autrement dit quand une action de l’utilisateur dans l’application affiche l’écran. Un simple aperçu F5 dans Power Apps ne déclenche donc pas l’action.

Vous allez insérer le contrôle de liste dé roulante qui va afficher les valeurs de la collection AffairesEtats.

Pour ce faire, cliquez sur le menu Insérer, puis cliquez sur Contrôles, puis sélectionnez Liste déroulante: le contrôle Dropdown1 est créé.

Vous allez recouvrir le contrôle TextSearchBox1 par le nouveau contrôle et indiquer qu’il est alimenté par la collection AffairesEtats.

Pour ce faire, définissez le contrôle Dropdown1 avec les propriétés suivantes :

Height = 71
Items = AffairesEtats
Width = 640
X = 0
Y = RectQuickActionBar1.Height

Maintenant, vous allez lier le contrôle Dropdown1 au contrôle BrowseGallery1 afin de filtrer les éléments.

Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :

Items = If(Dropdown1.Selected.Etat="Tous";lstAffaires;Filter(lstAffaires;Dropdown1.Selected.Etat = Etat.Value))

La formule est composée d’une fonction If() qui vérifie si l’utilisateur a sélectionné la valeur “Tous”. Si c’est le cas, Items est alimenté par tous les éléments de la liste lstAffaires. Si ce n’est pas le cas, la fonction Filter() s’applique. Dans cette formule, la liste lstAffaires est filtrée pour n’afficher que les éléments dont l’état est identique à l’état sélectionné par l’utilisateur dans la liste déroulante.

Le changement de la formule peut changer l’affectation des champs de la galerie. Vous allez donc vérifier l’affectation et éventuellement la corriger.

Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :

Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier à côté de l’étiquette Champs.

  • Dans la zone Body1, sélectionnez Responsable, avec la valeur d’affichage DisplayName. Si c’est déjà le bon champ, ne faites rien.
  • Dans la zone Subtitle1, sélectionnez IDaffaire. Si c’est déjà le bon champ, ne faites rien.
  • Dans la zone Title1, sélectionnez Title. Si c’est déjà le bon champ, ne faites rien.

Cliquez sur la croix en haut et à droite du volet Données pour fermer ce volet.

Cliquez sur l’écran DetailScreen1.

À partir de l’écran DetailScreen1, appuyez sur la touche F5 de votre clavier. Ensuite, cliquez sur Revenir à la liste (icône < en haut et à gauche) pour revenir à la liste.

Attention. Si vous faites F5 à partir de BrowseScreen1, le sélecteur sera vide. Ce qui est normal, car la propriété OnVisible définit le comportement d’une application quand l’utilisateur accède à un écran.

Si vous êtes face à un sélecteur vide, cliquez sur Créer un élément (icône + en haut et à droite), puis sur le bouton Annuler (icône X en haut et à gauche).

Ensuite, sélectionnez par exemple la valeur Très bon dans la liste déroulante.

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

Liste filtrée
Liste filtrée

À plusieurs reprises, changez la valeur de la liste déroulante afin de vérifier que les éléments correspondants s’affichent bien.

À la fin de vos tests, fermez l’application.

Filtrer sur les premières lettres

En plus du filtre précédent sur la liste déroulante, vous souhaitez filtrer les enregistrements du champ Titre en fonction des premières lettres de la zone de recherche. Cela requiert l’utilisation d’une seconde fonction Filter().

Tout d’abord, vous allez faire réapparaître la zone TextSearchBox1 en redimensionnant le contrôle BrowseGallery1, puis en déplaçant le contrôle Dropdown1.

Définissez le contrôle BrowseGallery1 avec les propriétés suivantes :

Y = 222

Grâce à ce paramétrage, vous avez abaissé le point haut du contrôle BrowseGallery1.

Définissez le contrôle Dropdown1 avec la propriété suivante :

Y = 154

Grâce à ce paramétrage, vous avez déplacé vers le bas le contrôle Dropdown1.

Maintenant, vous allez filtrer les enregistrements du champ Titre en fonction des premières lettres de la zone de recherche.

Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :

Items = Filter(If(Dropdown1.Selected.Etat="Tous";lstAffaires;Filter(lstAffaires;Dropdown1.Selected.Etat = Etat.Value));StartsWith(Title;TextSearchBox1.Text))

La formule est composée d’une fonction Filter() qui encapsule la fonction If(). L’explication de cette fonction est donnée dans l’étape précédente.

Afin de mieux comprendre le rôle du Filter(), la formule est réécrite différemment. Faites attention que cette écriture n’est pas valide dans Power Apps. Son rôle est uniquement de vous aider à mieux comprendre la fonction Filter().

Filter("Résultats du If()";StartsWith(Title;TextSearchBox1.Text))

La fonction Filter() n’affiche que les éléments issus du If() dont le titre débute comme les premières lettres saisies dans TextSearchBox1.

Le changement de la formule peut changer l’affectation des champs de la galerie. Vous allez donc vérifier l’affectation et éventuellement la corriger.

Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :

Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier à côté de l’étiquette Champs.

  • Dans la zone Body1, sélectionnez Responsable, avec la valeur d’affichage DisplayName. Si c’est déjà le bon champ, ne faites rien.
  • Dans la zone Subtitle1, sélectionnez IDaffaire. Si c’est déjà le bon champ, ne faites rien.
  • Dans la zone Title1, sélectionnez Title. Si c’est déjà le bon champ, ne faites rien.

Cliquez sur la croix en haut et à droite du volet Données pour fermer ce volet.

Appuyez sur la touche F5 de votre clavier.

Ensuite, sélectionnez par exemple la valeur Très bon dans la liste déroulante.

Saisissez les caractères poup dans la zone de recherche.

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

Liste filtrée (vue partielle)
Liste filtrée (vue partielle)

À la fin de vos tests, fermez l’application.

Trier sur une colonne

Vos utilisateurs souhaitent que le résultat de la liste soit trié sur le titre de l’élément. Cela nécessite d’utiliser la fonction SortByColumns(). Vous trouverez l’aide de la fonction SortByColumns() sur le lien ci-dessous qui présente toutes les fonctions de Power Apps.

https://coudr.com/powfn

Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :

Items = SortByColumns((Filter(If(Dropdown1.Selected.Etat="Tous";lstAffaires;Filter(lstAffaires;Dropdown1.Selected.Etat = Etat.Value));StartsWith(Title;TextSearchBox1.Text)));"Title";If(SortDescending1;Descending;Ascending))

La formule est composée d’une fonction SortByColumns() qui récupère le résultat de la première fonction Filter(). L’explication de cette dernière fonction est donnée dans l’étape précédente.

Afin de mieux comprendre le rôle de SortByColumns(), la formule est réécrite différemment. Faites attention que cette écriture n’est pas valide dans Power Apps. Son rôle est uniquement de vous aider à mieux comprendre la fonction SortByColumns().

SortByColumns("Résultats du Filter()";"Title";If(SortDescending1;Descending;Ascending))

La fonction SortByColumns() trie tous les résultats du Filter() sur la colonne Title. En plus, l’ordre dépend de la variable booléenne SortDescending1. La valeur de cette variable est définie par le contrôle IconSortUpDown1. En effet, la propriété OnSelect de ce contrôle est définie ainsi :

UpdateContext({SortDescending1: !SortDescending1})

Le changement de la formule peut changer l’affectation des champs de la galerie. Vous allez donc vérifier l’affectation et éventuellement la corriger.

Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :

Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier à côté de l’étiquette Champs.

  • Dans la zone Body1, sélectionnez Responsable, avec la valeur d’affichage DisplayName. Si c’est déjà le bon champ, ne faites rien.
  • Dans la zone Subtitle1, sélectionnez IDaffaire. Si c’est déjà le bon champ, ne faites rien.
  • Dans la zone Title1, sélectionnez Title. Si c’est déjà le bon champ, ne faites rien.

Cliquez sur la croix en haut et à droite du volet Données pour fermer ce volet.

Appuyez sur la touche F5 de votre clavier.

Effacez le contenu de la zone de recherche, si des caractères sont toujours présents, comme poup.

Ensuite, sélectionnez par exemple la valeur Très bon dans la liste déroulante.

Cliquez sur Trier (icône avec une flèche montante et descendante).

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

Liste filtrée et triée
Liste filtrée et triée

À la fin de vos tests, fermez l’application.

Enregistrer l’application

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

La publication d’une application la rend disponible auprès des utilisateurs autorisés.

Dans l’écran Enregistrer, cliquez sur Publier : une boîte de dialogue vous informe que la publication donne accès aux utilisateurs dotés d’autorisations.

Dans cette boîte de dialogue, cliquez sur le bouton Publier cette version.

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

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 Power Apps.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris à modifier une application Power Apps SharePoint. Notamment, vous avez vu comment appliquer un formatage conditionnel à la liste afin de faire apparaître en rouge les éléments dont le montant était inférieur à 20 euros.

Vous avez vu aussi comment n’afficher que les éléments qui correspondent au choix d’une liste déroulante, et ceux qui correspondent à la saisie de premières lettres.

Enfin, vous avez découvert le fonctionnement du tri dans Power Apps.

Article mis à jour le 07.04.2020

Catégories
Consultant, Formateur

Formulaire Power Apps à onglets

Dans cet exemple, vous découvrirez comment créer un formulaire Power Apps avec des onglets.

Pour ce faire, l’astuce consiste à utiliser des boutons qui seront suffisamment arrondis pour ressembler à des onglets.

Par ailleurs, afin de s’éviter trop de manipulations, un premier bouton nommé Jouets sera entièrement configuré. Ensuite, il sera copié 2 fois pour disposer au total de 3 boutons et donc 3 onglets. Il suffira de changer le texte des 2 nouveaux boutons pour les identifier.

Enfin, vous terminerez en associant les contrôles cartes de données aux onglets correspondants.

Préparation

Personnaliser le formulaire SharePoint

Tout d’abord, ouvrez vote site SharePoint puis sur ce site, ouvrez la liste lstAffaires avec l’interface moderne.

Ensuite, dans le menu de la liste, cliquez sur Power Apps, puis dans le sous-menu qui s’ouvre, cliquez sur Personnaliser les formulaires.

Patientez quelques instants, le temps du chargement et de la préparation du formulaire.

Préparer le formulaire

Une fois que le formulaire est ouvert dans Power Apps, fermez le volet Champs avec la croix.

Ensuite, supprimez le contrôle Image1. Ce contrôle avait été inséré précédemment dans le TP Personnaliser une liste SharePoint.

Donnez la couleur suivante au formulaire :

SharePointForm.Fill = RGBA(0; 120; 212; 1)

Puis, avec l’onglet Insérer, insérez une étiquette puis configurez ses propriétés :

Label1.Text = "Détail d'une affaire"
Label1.FontWeight = Bold
Label1.Italic = True
Label1.Height = 151
Label1.Size = 28

Ajouter un bouton

Ensuite, avec l’onglet Insérer, insérez un bouton. Grâce aux propriétés, remplacez le texte Bouton par le texte Jouet.

Button1.Text = "Jouet"

Puis, modifiez la courbure du haut du bouton de 20 degrés :

Button1.RadiusTopLeft = 20
Button1.RadiusTopRight = Button1.RadiusTopLeft

Comprendre les effets visuels des onglets

Un onglet est une sorte “d’illusion d’optique”.

En effet, lorsque l’utilisateur clique sur un onglet, il s’attend à voir l’onglet sur lequel il a cliqué “s’activer”. Inversement, il s’attend à voir les autres onglets “se désactiver”. Ces phénomènes visuels s’obtiennent en jouant sur les paramètres de couleur du bouton et ceux liés aux bordures de l’onglet.

Vous trouverez l’explication des propriétés de couleur et de bordure dans Power Apps sur le site de Microsoft Docs, qui est consultable grâce à ce raccourci : https://coudr.com/powco

De plus, le paramétrage de ces propriétés utilise la fonction ColorFade(). Celle-ci renvoie une version plus claire ou plus sombre d’une couleur. La quantité de fondu varie de -100% (complètement noir) à 100%, qui éclaire complètement une couleur au blanc.

Vous trouverez l’aide de la fonction ColorFade() sur ce lien : https://coudr.com/powfn

Personnaliser les effets visuels des onglets

Configurez les couleurs et la bordure du bouton avec ces paramètres :

Button1.BorderColor = SharePointForm1.BorderColor
Button1.BorderStyle = BorderStyle.Solid
Button1.DisabledBorderColor = ColorFade(Button1.BorderColor;
60%)
Button1.DisabledColor = Button1.Color
Button1.DisabledFill = SharePointForm1.Fill
Button1.HoverBorderColor =
ColorFade(Button1.BorderColor; 20%)
Button1.HoverColor = Button1.Color
Button1.PressedBorderColor = Button1.Fill

Mécanisme d’activation

Les propriétés DisabledBorderColor, DisabledColor, DisabledFill ne s’affichent que si la valeur de la propriété DisplayMode est définie sur Disabled (désactivé). DisplayMode fait partie des propriétés principales de Power Apps, au même titre que OnSelect par exemple. Elle sert à définir si le contrôle autorise l’entrée utilisateur (valeur: Edit), affiche uniquement les données (valeur: View) ou est désactivé (valeur: Disabled).

Si un onglet n’est pas sélectionné, ses propriétés Disabled doivent s’afficher. Si l’onglet est sélectionné, ses propriétés Disabled ne doivent pas s’afficher. Pour savoir, si l’onglet est sélectionné, il suffit de stocker le texte de l’onglet dans une variable au moment où l’utilisateur clique sur l’onglet :

Button1.OnSelect = Set(varOngletTitre;Button1.Text)

Ensuite, il suffit de comparer la valeur de la variable avec la valeur du texte de l’onglet en cours. Configurez la propriété DisplayMode du bouton :

Button1.DisplayMode = If(varOngletTitre=Button1.Text;Disabled;Edit)

Finaliser le paramétrage du bouton

Enfin, pour une raison purement esthétique (et pédagogique), le texte de l’onglet est aligné en haut et la taille du bouton est réduite. La réduction permettra d’avoir bientôt 3 boutons. Configurez ces deux dernières propriétés :

Button1.VerticalAlign = Top
Button1.Width = 148

Ensuite, glissez le bouton pour qu’il s’aligne en haut du contrôle de formulaire.

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

Premier onglet dans Power Apps
Premier onglet dans Power Apps

Multiplier le bouton d’origine

Maintenant, sélectionnez votre bouton, copiez-le et collez-le à 2 reprises : vous obtenez 3 boutons.

Renommez les 2 nouveaux boutons : Button2 et Button3.

Alignez vos boutons en haut du formulaire.

Grâce à la propriété Text, remplacez le texte “Jouet” par “Montant” puis “Responsable”.

Button2.Text = "Montant"
Button3.Text = "Responsable"

Attribuer les contrôles

Chaque onglet doit afficher des cartes de données différentes, sinon ils ne servent à rien.

Dans la vraie vie, il y aurait probablement 12 à 15 champs à répartir sur les onglets. Dans ce scénario, il y a seulement 3 champs. Toutefois, il est facile de décliner ce qu’il y a faire avec plus de champs.

Votre objectif est que le Titre apparaisse sur tous les onglets, la carte MontantHT ne doit apparaître que sur l’onglet “Montant”, tandis que la carte Responsable ne doit apparaître que sur l’onglet “Responsable”.

Cliquez sur la carte Responsable, puis définissez sa propriété visible :

Responsable_DataCard1.Visible = varOngletTitre = "Responsable"

Ne soyez pas surpris de voir le contrôle disparaître. Comme l’application n’a pas été exécutée, la variable varOngletTitre n’a pas encore de valeur. Donc varOngletTitre = “Responsable” est faux. Du coup Responsable_DataCard1.Visible = false.

Ensuite, cliquez sur la carte MontantHT, puis définissez sa propriété visible:

MontantHT_DataCard1.Visible = varOngletTitre = "Montant"

Pour la carte Titre, c’est encore plus simple : il suffit de ne pas définir la propriété OnVisible pour que la carte s’affiche sur tous les onglets. Il n’y a donc rien à faire.

Configurer l’écran

Lors de l’ouverture du formulaire, vous souhaitez que l’utilisateur arrive par défaut sur l’onglet Jouet.

Pour ce faire, configurez la propriété avancée OnVisible de l’écran :

FormScreen1.OnVisible = varOngletTitre = "Jouet"

C’est fini 😉

Tester le nouveau formulaire

Vous allez vérifier l’efficacité de vos modifications. Pour cela, cliquez sur le lien dans le coin supérieur gauche, qui s’intitule Revenir à SharePoint : une boite de dialogue s’ouvre.

Dans cette boîte de dialogue, cliquez sur le bouton Publier sur SharePoint.

Patientez quelques instants : la liste SharePoint va s’ouvrir.

Il est possible que le résultat ne soit pas immédiat suite à la manipulation ci-dessous. Dans ce cas patientez une bonne minute. Si le résultat n’est toujours pas visible : modifiez à nouveau le formulaire PowerApps puis publiez le à nouveau.

Dans cette liste, cliquez sur un élément quelconque pour l’ouvrir : il s’affiche bien dans le nouveau formulaire Power Apps.

Cliquez sur l’onglet Responsable et remarquez la présence des champs Titre et Responsable, uniquement.

Cliquez sur l’onglet Montant et remarquez la présence des champs Titre et MontantHT, uniquement.

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

Affichage d'un onglet
Affichage d’un onglet

Dans SharePoint, fermez le volet de l’élément affiché.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer des formulaires dans un formulaire Power Apps.

Maintenant, vous pouvez appliquer cette technique sur des formulaires ou sur les applications Power Apps que vous développerez dans l’avenir.

Pour aller encore plus loin, vous avez un excellent article (en anglais et en deux parties) de Mme Audrie Gordon sur Microsoft Docs. Il montre une utilisation encore plus poussée des onglets dans une application Power Apps :

Partie 1 : Handling Tab Control Scenarios in PowerApps for Full Screen Formats : https://coudr.com/powtab01

Partie 2 : Tabbed User Interface – Mobile Version : https://coudr.com/powtab02

Article mis à jour le 13.03.2020

Catégories
Consultant, Formateur

Support de cours sur Power Apps en libre accès numérique

Dans un objectif de renforcer les actions en faveur d’un meilleur accès à la connaissance, mon support de cours sur Microsoft Power Apps est en libre accès numérique.

Contrôles Power Apps

Ce support de cours est composé d’une présentation de 200 pages et des travaux pratiques (119 pages), entièrement rédigés. C’est un support de cours complet et opérationnel.

La présentation est l’exposé des concepts avec les explications. Les travaux pratiques sont rédigés sous forme de tutoriels.

Ces documents sont offerts sous license Creative Commons Zero (CCØ). Ils peuvent donc être téléchargés librement et utilisés sans restrictions.

C’est une démarche qui vise à permettre au plus grand nombre l’accès à du contenu pédagogique à jour, au moment de sa rédaction, et précis.

Contrôle OnSelect

Si vous rencontrez des difficultés de téléchargement ou de compréhension, n’hésitez pas à me contacter.

Pour obtenir le support de cours complet, vous pouvez télécharger les deux documents sur Créer des applications avec Microsoft Power Apps : l’exposé et les travaux pratiques.

Téléchargement du cours : Exposé.

Téléchargement manipulations : Travaux pratiques.

Application de canevas à partir de zéro

Bien que toutes les précautions aient été prises lors de la rédaction de cette documentation, ni l’auteur, ni l’éditeur, ne seront tenus pour responsables des erreurs, ou omissions, ou dommages causés ou prétendument causés directement ou indirectement par les informations contenues dans ces documents.

Cette documentation est éditée à des fins purement éducatives. Les informations contenues dans ces documents sont fournies sans aucune garantie expresse, statutaire ou implicite. Les manipulations sont faites sous votre seule et unique responsabilité

Article mis à jour le 13.01.2020.

Catégories
Consultant, Formateur

Centre d’excellence de la Power Platform

Le Centre d’excellence de la Power Platform est une solution à charger dans un environnement qui n’est pas l’environnement par défaut.

Il sert à administrer les applications Power Apps et Power Automate de votre organisation.

Centre d'Excellence - Résumé

Il est lui-même constitué d’applications Power Apps et de flux Power Automate pour fonctionner. Des rapports Power BI sont disponibles.

Centre d'Excellence - Solution

Pour la télécharger :

https://coudr.com/cex

Pour l’installation, il faut ouvrir le fichier Documentation.pdf et suivre les instructions. Elles sont détaillées et très claires.

Les rapports Power BI sont probablement les plus impressionnants. Par exemple, vous avez le rapport ci-dessous sur les applications.

Centre d'Excellence - Applications

Il y d’autres rapports disponibles sur les environnements ou les flux, comme ci-dessous.

Article modifié le 22.12.2019.

Catégories
Consultant, Formateur

Créer un projet d’intégration de données

Cet exercice vous explique comment créer un projet d’intégration de données.

Pratique

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

https://make.powerapps.com/

Dans le menu supérieur, vérifiez que vous êtes dans votre environnement par défaut. Si vous n’êtes pas dans votre environnement par défaut, cliquez sur Environnement.

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

Sélection de l'environnement
Sélection de l’environnement

Cliquez ou tapez sur le nom de votre environnement par défaut, pour le sélectionner.

Ensuite, dans le volet de navigation (à gauche), cliquez ou tapez sur Données. Dans la liste déroulante qui apparaît, cliquez ou tapez sur Intégration de données : le volet central affiche un message.

Dans le volet central, cliquez ou tapez sur Créer un projet d’intégration de données : une fenêtre Power Query s’ouvre. Celle-ci vous propose de sélectionner une source de données.

Actuellement les sources de données accessibles sont des fichiers Access, Excel, JSON, Texte/CSV, XML ; ou des bases de données Amazon Redshift, IBM Db2, Oracle, PostgreSQL, SQL Server ; ou des sources de données Azure Data Explorer ; Azure SQL Data Warehouse , SQL Azure ; ou des services en ligne Liste SharePoint Online, Objets Salesforce, rapports Salesforce ; ou des sources de données API web, Liste SharePoint, ODAta, Page Web, Table vide, Requête vide.

Dans cette liste, sélectionnez Excel.

Dans la fenêtre qui s’ouvre, cliquez ou tapez sur le bouton Parcourir.

Si une fenêtre vous demande de choisir un compte, sélectionnez votre compte de tenant.

Une nouvelle fenêtre s’affiche. Dans le menu supérieur de cette fenêtre, cliquez sur Charger puis sur Fichiers.

Chargez le fichier excel_ventes.xlsx qui se trouve dans les dossiers d’exercice. Une fois que le fichier est chargé, sélectionnez-le puis cliquez ou tapez sur le bouton Ouvrir.

Pour information, sachez que le fichier est chargé à cet emplacement OneDrive : https://monsupersite-my.sharepoint.com/personal/jack_monsupersite_onmicrosoft_com/Documents.

Cliquez ou tapez sur le bouton Suivant.

Dans le volet de gauche, cochez Tableau3 (et non pas Tableau).

Cliquez ou tapez sur le bouton Suivant.

Cliquez ou tapez à nouveau sur le bouton Suivant.

Dans l’écran Mapper des entités, cochez Charger sur la nouvelle entité.

Vous pouvez choisir le type de chaque colonne.

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

Modifiez le type de la zone de destination de chaque colonne en Texte.

Dans la zone Champ Nom principal, sélectionnez Clef.

Cochez la case Supprimer les lignes qui n’existent plus dans la sortie de requête.

Renommez le nom de l’entité en le préfixant avec votre prénom, par exemple jack_Tableau3.

Renommez le nom de l’entité en le préfixant avec votre prénom, par exemple jack_Tableau3.

Cliquez ou tapez à nouveau sur le bouton Suivant.

Dans l’écran Mapper des entités, cochez Actualiser manuellement.

Cliquez ou tapez à nouveau sur le bouton Créer.

Si d’aventures, vous obtenez une erreur : reprenez votre projet et réessayez les étapes précédentes.

Cliquez ou tapez à nouveau sur le bouton Terminé.

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

Projet d'intégration terminé

Avec le menu …, renommez le projet en le préfixant avec votre prénom, par exemple jack_projet1.

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer un projet d’intégration de données.

Catégories
Consultant, Formateur

Exécuter une application canevas basée sur un modèle

Cet exercice vous explique comment exécuter l’application Donner des bravos.

Préparation

Pratique

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

https://web.powerapps.com/

Sous Applications récentes, vous devriez voir l’application de canevas Donner des bravos.

Si elle n’apparaît pas, cliquez dans le volet de gauche, sur Applications.

Cliquez ou tapez sur Donner des bravos pour l’ouvrir.

Application Shoutouts

Il est possible qu’un bandeau rouge s’affiche en haut de l’écran. Ce bandeau va disparaître automatiquement au bout de 30 secondes. Il est lié à des données manquantes vous concernant, comme votre photo de profil. Dans un environnement réel de production, il faudrait le faire.

Cliquez ou tapez sur NEXT (suivant) : cette page explique le rôle de l’application.

Cliquez ou tapez à nouveau sur NEXT (suivant) : cette page explique que vous pouvez ajouter un message qui sera lu par votre communauté.

Cliquez ou tapez à nouveau sur NEXT (suivant) : cette page explique que vous pouvez ajouter une photo ou une image à votre message.

Cliquez ou tapez à nouveau sur NEXT (suivant) : cette page explique que les félicitations seront reçues par email par le destinataire, ainsi que son responsable hiérarchique.

Cliquez ou tapez à nouveau sur NEXT (suivant) : vous pouvez maintenant envoyer des félicitations à quelqu’un. Vous pouvez aussi consulter les félicitations que vous avez reçues et celles que vous avez envoyées. Vous remarquerez que l’application vous a automatiquement envoyé une première félicitation en votre nom.

Pour envoyer vos félicitations, cliquez ou tapez sur le + de Send Shoutout (envoyer des félicitations).

Dans l’écran Search person (recherche de personne), tapez le nom de Bob Durand dans la zone Search : il s’affiche aussitôt juste en dessous de votre saisie.

Cliquez ou tapez sur NEXT (suivant) : la liste des types de félicitations s’affiche.

Dans cette liste, cliquez ou tapez sur Thank You (Merci) puis cliquez ou tapez sur NEXT (suivant).

Dans l’écran Your Personal Message and Photo (Votre message personnel et votre photo), saisissez le message suivant : Tu es la personne qui mérite la plus grande reconnaissance pour le travail accompli.

Facultativement, vous pouvez charger aussi une image. Vous en trouverez une dans les fichiers d’exercices.

Cliquez ou tapez sur NEXT (suivant) : l’écran qui s’intitule Review Your Shoutout (Révisez votre message de félicitation) s’affiche.

Cliquez ou tapez sur SEND (envoyer) : Le message Your Shoutout has been sent (Votre message de félicitation a été envoyé) s’affiche.

Cliquez ou tapez sur l’icône X en haut à droite pour revenir à l’espace de travail par défaut de l’application.

Vérifiez la présence du message de félicitations dans la boite aux lettres de Bob Durand, ainsi que celle de Karine Marchais.

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment exécuter une application canevas basée sur un modèle.

Catégories
Consultant, Formateur

Créer une application PowerApps canevas à partir d’un modèle

Cet exercice vous explique comment créer une application canevas à partir d’un modèle.

Vous pourrez ainsi explorer les possibilités de conception de PowerApps. Dans cet exemple, vous pourrez aussi appliquer les premiers concepts de PowerApps et développer votre application de canevas.

Préparation

  • Pour faire cet exercice, vous avez besoin d’un compte utilisateur dans Office 365, ainsi que la messagerie Outlook.

Pratique

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

https://web.powerapps.com/

Dans le volet de navigation (à gauche), cliquez sur Créer.

Dans la zone de recherche (en haut, à droite), entrez : Shoutouts, puis cliquez sur : Shoutouts.

L’application de canevas Shoutouts encourage les collègues à partager des compliments au travail. Vous pouvez envoyer des notifications automatiques par e-mail aux responsables des destinataires.

Donnez un nom à votre application : Donner des bravos

Le nom de l’application ne doit pas dépasser 64 caractères.

Gardez la case de Tablette sélectionnée.

Sous le libellé Se connecte à, l’application de canevas Shoutouts vous indique qu’elle peut se connecter à Outlook d’Office 365 (icône bleue) et à votre compte (icône rouge).

Application PowerApps canevas basée sur un modèle

Ensuite, cliquez ou tapez sur Créer.

Une fenêtre, intitulée Encore quelques instants, vous informe que l’application de canevas Shoutouts a besoin de votre autorisation pour se connecter à votre compte utilisateur et à votre compte de boîte aux lettres.

Éventuellement, vous pourriez changer de compte. Pour l’instant, ne changez pas de compte.

Dans la fenêtre qui s’intitule Encore quelques instants, cliquez ou tapez sur le bouton Autoriser.

Patientez quelques instants : une fenêtre, intitulée Bienvenue dans PowerApps Studio, s’affiche.

Dans cette fenêtre, cliquez ou tapez sur Afficher un aperçu de cette application.

Puis ouvrez le mode Aperçu en appuyant sur F5 (ou en cliquant ou appuyant sur le bouton de lecture près de l’angle supérieur droit).

Chaque exemple représente un scénario différent avec une variété d’écrans et d’autres contrôles.

Application PowerApps Shoutouts Bravos

Une fois l’exploration de l’application terminée, fermez le mode Aperçu en appuyant sur Échap (ou en cliquant ou en appuyant sur l’icône de fermeture près de l’angle supérieur droit, sous la barre de titre pour PowerApps).

Si une fenêtre, intitulée Le saviez-vous apparaît cliquez ou tapez sur le bouton OK pour la faire disparaître.

Vous allez enregistrer l’application. Pour ce faire, en haut à gauche, cliquez ou tapez sur l’onglet Fichier.

Dans la page Paramètres de l’application, passez en revue les paramètres par défaut.

Près du bord gauche, cliquez ou tapez sur Enregistrer.

Ensuite, sélectionnez Le cloud puis cliquez ou tapez sur le bouton Enregistrer.

Patientez quelques instants : le message Toutes les modifications sont enregistrées s’affiche.

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer votre propre application stockée dans votre compte cloud.

Si vous lancez immédiatement l’application Shoutouts, vous aurez probablement des erreurs car le contexte de son fonctionnement n’est pas encore défini. Les exercices suivants vous montreront comment utiliser correctement cette application.

Gardez à l’esprit qu’une application PowerApps s’exécute généralement dans un environnement varié. Il est donc normal de s’assurer que toutes les conditions nécessaires à son exécution sont réunies.

Article mis à jour le 09.11.2019.

Catégories
Consultant, Formateur

Créer une stratégie de protection contre la perte de données

Cet exemple vous explique comment créer une nouvelle stratégie de protection contre la perte de données. Des stratégies de protection contre la perte de données définies par les administrateurs de clients peuvent être appliquées à un seul environnement, ou à plusieurs.

Prérequis

  • Pour réaliser cet exercice, vous devez aller sur le site de Microsoft ci-dessous, afin d’activer une version d’évaluation gratuite PowerApps Plan 2.

https://make.powerapps.com/signup?redirect=marketing&email=

Pratique

Ouvrez le centre d’administration PowerApps et identifiez-vous avec votre compte de tenant.

https://admin.powerapps.com/

Centre d'administration PowerApps

Dans le volet de navigation (à gauche), cliquez ou tapez sur Stratégies de données.

Puis cliquez ou tapez sur Nouvelle stratégie (en haut et à droite de l’écran).

Nouvelle stratégie de données

Dans la boîte de dialogue Nom de la stratégie de données, gardez le choix par défaut (Appliquer à TOUS les environnements) puis cliquez ou tapez sur le bouton Continuer : la liste des groupes de données s’affiche.

Groupes de données

Dans l’étiquette horodatée, comme Stratégie 08:22:01 11-16-2019 (en haut et au milieu de la page), entrez le nom de la stratégie de données : Sécuriser les données métiers.

Cliquez ou tapez sur le lien Ajouter qui se trouve dans la zone de groupe Business data only (Données métiers uniquement) : la liste des connecteurs s’affiche. Cette liste est constituée de tous les connecteurs de données qui figurent dans le groupe No business data allowed (Données métiers non autorisées).

Dans la page Ajouter des connecteurs, sélectionnez les connecteurs Office 365 Outlook et SharePoint.

Cliquez ou tapez sur le bouton Ajouter des connecteurs. L’ajout d’un connecteur à un groupe de données le supprime automatiquement de l’autre groupe de donnée.

Enfin cliquez ou tapez sur Enregistrer la stratégie (en haut et à droite de l’écran) pour valider vos manipulations.

Une fois la stratégie créée, elle apparaît dans la liste des stratégies de données de la page Stratégies de protection contre la perte de données.

Stratégie de protection contre la perte de données

Cliquez ou tapez sur Sécuriser les données métiers pour afficher les détails de la stratégie.

Notez que vous pourriez éventuellement modifier les environnements sur lesquels la stratégie s’applique. Vous pourriez aussi éventuellement classer différemment les connecteurs de données. Toutefois, ne faites aucune modification pour l’instant.

Une fois que vous avez passé en revue les détails de la stratégie, cliquez ou tapez sur Fermer (en haut et à droite de l’écran).

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer une nouvelle stratégie de protection contre la perte de données.

Cette stratégie permet aux applications concernées de partager des données entre Office 365 Outlook et SharePoint. Par ailleurs, elle bloque automatiquement le partage des données avec les autres connecteurs.

Concrètement et grâce à cette stratégie, une application ne pourra pas partager des données métiers entre SharePoint et LinkedIn, par exemple.

Article mis à jour le 16.11.2019.

Catégories
Consultant, Formateur

Créer une connexion à une passerelle

Cet exemple vous explique comment créer une connexion à une passerelle. Cette connexion permettra de connecter une base de données locale, qui pourra être utilisée dans une application PowerApps.

Prérequis

  • L’exercice du TP Créer une nouvelle passerelle doit être terminé avec succès.
  • Vous devez disposer des droits pour vous connecter à un site SharePoint Server local ou à une base de données SQL Server locale.

Pratique

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

https://make.powerapps.com/

Dans le menu supérieur, vérifiez que vous êtes dans votre environnement par défaut. Si vous n’êtes pas dans votre environnement par défaut, cliquez sur Environnement.

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

Sélection de l'environnement
Sélection de l’environnement

Cliquez ou tapez sur le nom de votre environnement par défaut, pour le sélectionner.

Ensuite, dans le volet de navigation (à gauche), cliquez ou tapez sur Données. Dans la liste déroulante qui apparaît, cliquez ou tapez sur Connexions : le volet central apparaît.

Dans le volet central, cliquez ou tapez sur Nouvelle connexion (en haut à gauche).

Dans la zone de recherche (en haut, à droite), entrez SharePoint, puis cliquez sur SharePoint.

Variante : Si vous disposez d’une base de données SQL Server sur laquelle vous avez un accès autorisé, vous pouvez vous connecter à cette base.

Un pop-up propose de vous connecter directement au service Cloud, ou à l’aide d’une passerelle de données locales.

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

Sélection de la connexion

Dans le pop-up, cochez sur Se connecter à l’aide d’une passerelle de données locale : le pop-up s’agrandit.

Dans la nouvelle zone, gardez l’authentification Windows.

Renseignez le nom d’utilisateur local et son mot de passe.

Gardez la passerelle qui porte votre prénom.

Puis cliquez sur le bouton Créer.

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

Création de la connexion

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer une connexion à une passerelle pour vous connecter à un serveur SharePoint local ou à une base de données SQL Server locale.

Catégories
Consultant, Formateur

Créer une nouvelle passerelle

Cet exemple vous explique comment créer une nouvelle passerelle. Cette passerelle permettra de vous connecter à une base de données locale.

Prérequis

  • Pour réaliser cet exercice, vous devez aller sur le site de Microsoft ci-dessous, afin d’activer une version d’évaluation gratuite PowerApps Plan 2.

https://make.powerapps.com/signup?redirect=marketing&email=

  • Vous devez disposer des autorisations d’Administrateur de l’environnement PowerApps, Administrateur global Office 365 ou Administrateur Azure Active Directory.

Pratique

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

https://make.powerapps.com/

Dans le menu supérieur, vérifiez que vous êtes dans votre environnement par défaut. Si vous n’êtes pas dans votre environnement par défaut, cliquez sur Environnement.

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

Sélection de l'environnement

Cliquez ou tapez sur le nom de votre environnement par défaut, pour le sélectionner.

Ensuite, dans le volet de navigation (à gauche), cliquez ou tapez sur Données. Dans la liste déroulante qui apparaît, cliquez ou tapez sur Passerelles : le volet central affiche un message.

Si le volet central affiche le message suivant : “Vous ne pouvez pas installer de passerelle dans cet environnement”, basculez sur votre environnement par défaut comme indiqué plus haut.

Dans le volet central, cliquez ou tapez sur Nouvelle passerelle. Vous arrivez sur une page web qui vous propose de télécharger la passerelle de données locale.

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

Télécharger la passerelle locale

Cliquez ou tapez sur le bouton Télécharger.

Installez le logiciel GatewayInstall.exe en suivant les instructions.

À la fin de l’installation, entrez l’email associé à votre tenant. Dans ce scénario, il s’agit de l’adresse jack@monsupersite.onmicrosoft.com. Pour vous l’adresse sera forcément différente : il s’agit de votre adresse email dans le tenant.

Dans la fenêtre qui s ‘ouvre, entrez le mot de passe associé.

La fenêtre peut être cachée. Faites Alt-Tab pour la faire apparaître.

Une nouvelle fenêtre apparait.

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

Paramétrage de la passerelle

Dans la zone Nouveau nom de on-premises data gateway, entrez votre prénom.

Entrez la clé de récupération suivante : AaBbCcDd01.

Cliquez ou tapez sur le bouton Configurer : patientez quelques instants. Votre passerelle est prête à être utilisée.

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

On-premises data gateway

Décochez la case Contribuez à l’amélioration de on-premises data gateway en envoyant des informations d’utilisation à Microsoft puis cliquez sur le bouton Fermer.

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer une nouvelle passerelle. Cette passerelle permet ensuite de vous connecter à un SharePoint Server local ou à une base de données SQL Server locale.

Article mis à jour le 16.11.2019.

Catégories
Consultant, Formateur

Créer une nouvelle base de données pour PowerApps

Cet exemple vous explique comment créer une nouvelle base de données dans un environnement existant.

Prérequis

  • Pour réaliser cet exercice, vous devez aller sur le site de Microsoft ci-dessous, afin d’activer une version d’évaluation gratuite PowerApps Plan 2.

https://make.powerapps.com/signup?redirect=marketing&email=

Pratique

Ouvrez le centre d’administration PowerApps et identifiez-vous avec votre compte de tenant.

https://admin.powerapps.com/

Dans le volet de navigation (à gauche), cliquez ou tapez sur Environnements.

Cherchez l’environnement qui est par défaut. S’il n’y a qu’un seul environnement, alors il est forcément par défaut. En revanche, si vous avez plusieurs environnements qui sont présents, vous devez appliquer la méthode suivante pour déterminer l’environnement par défaut. Regardez la valeur qui se trouve dans la colonne TYPE. S’il est indiqué Par défaut, il s’agit de l’environnement par défaut.

Une fois que vous avez déterminé l’environnement par défaut, cliquez ou tapez sur son nom.

Dans les détails de l’environnement, cliquez ou tapez sur le bouton Créer une base de données (à droite).

Cette action active l’accès au Common Data Service (Service de données communes).

Sélectionnez la devise EUR et la langue French pour les données stockées dans la base de données.

Vous ne pourrez plus changer la devise ou la langue une fois la base de données créée.

Notez que Microsoft se réserve le droit d’utiliser vos noms d’entité et de champs pour améliorer leur Common Data Service. En revanche, ils n’utilisent pas le contenu de vos tables de base de données.

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

Créer ma base de données

Ensuite, cliquez ou tapez sur le bouton Créer une base de données.

Patientez quelques minutes, le temps de la création de la base de données sur le service de données communes. Ce temps est variable, mais comptez au moins 3 à 5 minutes.

Si d’aventures, vous obtenez un message d’erreur, cliquez à nouveau sur le bouton Créer une base de données.

Une fois la base de données créée, cliquez ou tapez sur Environnements (volet de gauche) pour afficher la liste des environnements de la page Environnements.

Remarquez la présence d’une chaîne de caractères entre parenthèses, à côté du nom de l’environnement, comme orgfe408f65. C’est le nom unique de la division racine dans Dynamics 365 Customer Engagement. Une division est un groupe logique d’activités professionnelles liées. Une division peut avoir plusieurs sous-divisions.

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer une nouvelle base de données dans un environnement existant.

Catégories
Consultant, Formateur

Créer un environnement de développement pour PowerApps

Cet exemple vous explique comment créer un environnement de développement.

Prérequis

  • Pour réaliser cet exercice, vous devez aller sur le site de Microsoft ci-dessous, afin d’activer une version d’évaluation gratuite PowerApps Plan 2.

https://make.powerapps.com/signup?redirect=marketing&email=

Pratique

Ouvrez le centre d’administration PowerApps et identifiez-vous avec votre compte de tenant.

https://admin.powerapps.com/

Dans le volet de navigation (à gauche), cliquez ou tapez sur Environnements.

Puis cliquez ou tapez sur Nouvel environnement (en haut et à droite de l’écran).

Dans la boîte de dialogue Nouvel environnement, entrez le nom suivant pour l’environnement : Formation.

Puis sélectionnez votre région Europe et un type d’environnement Essai.

La région proposée par défaut est la région d’origine du tenant Azure Active Directory. Toutefois, vous pouvez la changer lors de la création de l’environnement. En revanche, vous ne pourrez plus la changer une fois que l’environnement sera créé.

Ensuite, cliquez ou tapez sur le bouton Créer un environnement.

Une fois l’environnement créé, vous recevez un message de confirmation dans la boîte de dialogue qui vous propose de créer une base de données.

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

Créer une base de données

Cliquez ou tapez sur le bouton Créer une base de données.

Cette action active l’accès au Common Data Service (Service de données communes).

Sélectionnez la devise EUR et la langue French pour les données stockées dans la base de données.

Vous ne pourrez plus changer la devise ou la langue une fois la base de données créée.

Gardez cochée la case Inclure des exemples d’applications et de données.

Notez que Microsoft se réserve le droit d’utiliser vos noms d’entité et de champs pour améliorer leur Common Data Service. En revanche, ils n’utilisent pas le contenu de vos tables de base de données.

Ensuite, cliquez ou tapez sur le bouton Créer une base de données.

Attendez la disparition du bandeau bleu qui vous informe que la configuration de la base de données est en cours.

Le temps de la configuration de la base de données sur le service de données communes est variable, mais comptez au moins 3 à 5 minutes. À la fin de la configuration, l’écran s’actualisera automatiquement et le bandeau bleu disparaîtra comme par magie.

Une fois la base de données créée, votre nouvel environnement apparaît dans la liste des environnements de la page Environnements.

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer un environnement de développement.

Catégories
Consultant, Formateur

Démarrer un flux Power Automate dans une application PowerApps

Cet exemple vous explique comment démarrer un flux dans une application canevas PowerApps.

Prérequis

  • La liste lstAffaires doit exister dans votre site SharePoint.

Créer le flux

Vous allez créer le flux Flow. Pour ce faire :

Ouvrez le centre des processus et tâches Microsoft Flow :

https://emea.flow.microsoft.com/fr-fr/

Dans le volet de navigation (à gauche), cliquez ou tapez sur Mes flux.

Dans le menu supérieur, cliquez ou tapez sur le menu Nouveau.

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

Nouveau flux
Nouveau flux

Puis cliquez ou tapez sur Automatisé – à partir de zéro.

Si la fenêtre Générer un flux automatisé s’ouvre, cliquez sur Ignorer.

Vous allez indiquer le connecteur à utiliser. Pour ce faire, dans la zone Rechercher parmi les connecteurs et les déclencheurs, saisissez powerapps et faites entrée.

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

Connecteur PowerApps
Connecteur PowerApps

Dans la liste des déclencheurs, cliquez ou tapez sur PowerApps de PowerApps.

Cliquez sur Nouvelle étape.

Dans la zone de recherche parmi les actions, entrez Créer un élément.

Dans la liste des actions qui s’affiche, cliquez ou tapez sur Créer un élément dans SharePoint.

Si un pop-up intitulé Entrer l’adresse et le nom de liste/bibliothèque du site SharePoint s’affiche, cliquez sur Reçu (ou sur Ne plus afficher).

Cliquez ou tapez dans la zone Adresse du site, patientez quelques secondes puis sélectionnez l’adresse du site SharePoint qui porte votre prénom.

Cliquez ou tapez dans la zone Nom de la liste, patientez quelques secondes puis sélectionnez votre liste (lstAffaires).

Cliquez ou tapez dans la zone Titre, puis dans la fenêtre de contenu dynamique, recherchez et ajoutez le paramètre Demander dans PowerApps : le nom du paramètre change automatiquement en Créerunélément_Titre.

Le rôle de Demander dans PowerApps est de faire un lien entre Flow et PowerApps pour chaque champ qui le nécessite. Cela signifie que PowerApps va transmettre le contenu du champ titre au champ Titre de Flow à travers Créerunélément_Titre.

Ensuite, cliquez ou tapez dans la zone FinWkf, et saisissez : non.

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

Flux PowerApps
Flux PowerApps

Renommer le flux de travail

Maintenant, vous allez renommer votre flux.

Pour ce faire, cliquez, en haut et à gauche de l’écran, sur Sans titre.

Saisissez le texte : NouvelleAffaire (sans espace).

Vérifier le flux

Vous allez vérifier votre flux.

Pour ce faire, cliquez, en haut et à droite de l’écran, sur le lien Vérificateur de flux.

Un volet apparaît sur la droite. Normalement, vous devez avoir 0 erreur et 0 avertissement. Dans le cas contraire, demandez de l’aide à votre formateur.

Faites attention que le vérificateur de flux ne capte pas toutes les erreurs. Vous pouvez avoir des erreurs lors de l’enregistrement et lors de l’exécution du flux.

Si vous n’avez pas d’erreur, ni d’avertissement, fermez en cliquant sur l’icône X en haut et à droite du volet.

Enregistrer le flux

Vous allez enregistrer votre flux.

Pour ce faire, cliquez, en haut et à droite de l’écran, sur le lien Enregistrer. Vous pouvez aussi cliquer sur le bouton Enregistrer qui se trouve sous le flux.

Si vous avez un message sur un bandeau rouge en haut de l’écran, il s’agit d’une erreur. Dans ce cas, demandez de l’aide à votre formateur.

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.

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

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.

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 appNouvelleAffaire.

En bas, cliquez sur le bouton Enregistrer.

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

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.

Insérer un contrôle Entrée de texte (Text input)

Un contrôle Entrée de texte permet de saisir du texte ou des nombres.

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Sous Insérer, cliquez sur Texte puis sélectionnez Entrée de texte : une entrée de texte apparaît sur l’écran blanc. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1 : TextInput1.

Dans l’arborescence (à gauche), cliquez sur le contrôle TextInput1 puis cliquez dans ses propriétés (à droite), cliquez dans la zone Texte et supprimez Entrée de texte : la case doit être vierge.

Dans l’arborescence (à gauche), cliquez sur le contrôle TextInput1 puis cliquez sur les 3 petits points (…) puis dans le menu cliquez sur Renommer et renommez en affaireTitre.

Insérer un contrôle Bouton (Button)

Un contrôle Bouton permet d’interagir avec l’application.

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

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

Avec la souris, sélectionnez Button1 sur l’écran central puis glissez Button1 sous affaireTitre.

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 Créer.

Dans l’arborescence (à gauche), cliquez sur le contrôle Button1 puis cliquez sur les 3 petits points (…) puis dans le menu cliquez sur Renommer et renommez en affaireCreer.

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

Ecran avec 2 contrôles
Ecran avec 2 contrôles

Relier au flux

Dans l’arborescence (à gauche), cliquez sur le contrôle affaireCreer pour le sélectionner, puis cliquez dans le menu Action, et cliquez sur Flows : un volet s’ouvre à droite.

Cliquez sur le nom du flux : NouvelleAffaire.

Patientez une dizaine de secondes : une formule a été créée automatiquement dans la barre de formules.

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

Paramétrer la formule
Paramétrer la formule

Cliquez dans la barre de formule, juste après la parenthèse et complétez la formule pour obtenir exactement.

NouvelleAffaire.Run(affaireTitre.Text)

Cette formule permet de transmettre à PowerApps le contenu du champ titre.

Fermez le volet Données.

Enregistrer l’application

Cliquez sur le ruban Fichier puis cliquez sur Enregistrer.

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

Exécuter l’application PowerApps

Cliquez sur Screen1.

Cliquez sur l’icône Aperçu en forme de triangle (en haut, à droite) ou appuyez sur la touche F5.

Dans la zone d’entrée de texte, tapez le texte : Chevaux en bois.

Fermez le mode Aperçu en appuyant sur la touche Échap du clavier. Vous pouvez aussi fermer le mode Aperçu, à l’aide de la croix en haut et à droite.

Si un pop-up apparaît, lisez-le puis fermez-le.

Ensuite, ouvrez la liste lstAffaires : la nouvelle affaire a bien été créée.

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

Liste lstAffaires mise à jour
Liste lstAffaires mise à jour

Fin des manipulations

L’exercice est terminé.

Bonus

Si vous en voulez plus : modifiez le flux pour que les nouvelles affaires disposent d’un champ IDAffaire qui soit attribué aléatoirement entre 1000 et 10000.

Résumé

Dans cet exercice, vous avez appris démarrer un flux dans une application canevas PowerApps. Ce n’était pas demandé, mais vous auriez pu mettre à jour plusieurs éléments de la liste à partir de PowerApps. Par ailleurs, il aurait aussi été possible de démarrer plusieurs flux à partir de cette application PowerApps.

Article mis à jour le 09.11.2018.

Catégories
Consultant, Formateur

Créer un pop-up de confirmation dans PowerApps

Objectif

Lors d’une suppression d’un élément, il est préférable d’afficher une demande de confirmation à l’utilisateur de l’application PowerApps. Cette demande de confirmation permet de s’assurer notamment que l’utilisateur n’a pas cliqué par erreur sur le bouton de suppression.

La demande de confirmation se présente souvent d’un pop-up. Celui-ci affiche généralement un message avec un bouton pour confirmer et un bouton pour revenir en arrière.

L’objet de cet exercice est de voir comment implémenter ce pop-up. Il permet aussi de découvrir le regroupement de contrôles dans un nouveau contrôle.

Plus précisément, dans l’application PowerApps, vous allez utiliser 4 contrôles : 1 rectangle pour griser le fond de l’écran, 1 contrôle pour afficher un message de demande de confirmation, 1 bouton de confirmation et 1 bouton d’annulation de la suppression.

Le bouton de confirmation supprimera réellement l’élément.

Le bouton d’annulation reviendra à l’écran sans rien supprimer.

Ces 4 contrôles seront dans un groupe. Le groupe s’affichera uniquement en fonction de la valeur d’une variable booléenne.

Cette variable sera créée et alimentée grâce au contrôle de suppression de l’écran de modification. En effet, généralement c’est l’écran de modification qui propose la suppression d’un élément. Toutefois, il est possible de mettre un contrôle de suppression sur un contrôle galerie, par exemple.

Prérequis

Modifier une application existante

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

https://make.powerapps.com/

Dans le volet de gauche, cliquez sur Applications.

Dans le volet central de droite, sous l’onglet Applications récentes, cliquez sur les 3 petits points en face du nom de votre application canFruits.

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

Modification de l'application canFruits
Modification de l’application canFruits

Dans la liste qui apparaît, cliquez sur Modifier. Patientez quelques instants. Si vous obtenez un pop-up de bienvenue, cliquez sur le bouton Ignorer : votre application s’ouvre en modification.

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

Application canFruits en modification
Application canFruits en modification

Créer une variable associée à la suppression

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

Avec la méthode de votre choix, renommez le contrôle Icon1 en IconSuppression. Le contrôle Icon1 est la corbeille.

Copiez le contenu de la propriété OnSelect du contrôle IconSuppression, dans un fichier texte quelconque. A peu de choses près, vous pourrez le réutiliser plus tard, lorsque la suppression sera confirmée. Le contenu est le suivant :

Remove(lstFruits; BrowseGallery1.Selected);;Navigate(EcranListe;
ScreenTransition.None)

Ensuite, définissez la propriété OnSelect du contrôle IconSuppression avec cette nouvelle formule.

OnSelect = UpdateContext({boolSuppression: true})

Cette formule permet de créer une variable locale qui s’intitule boolSuppression et de définir sa valeur à true (vraie). Elle permettra de décider plus loin, s’il faut afficher ou non, la fenêtre de confirmation.

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

Insérer et définir un contrôle Rectangle

Afin de simuler la superposition du pop-up sur l’écran en cours, il est d’usage de flouter l’arrière-plan. Pour cela, vous allez utiliser un rectangle semi-transparent.

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

Cliquez sur le ruban Insérer puis cliquez sur Icônes puis cliquez sur Rectangle (presque tout en bas de la liste) : le contrôle Rectangle1 s’affiche.

Renommez Rectangle1 en rctSuppression. Les 3 premières lettres du nom du rectangle sont rct. C’est une abréviation de rectangle.

Définissez les propriétés suivantes de rctSuppression :

Fill = RGBA(219; 219; 219; 0,50)
Height = 1136
Width = 640
X = 0
Y = 0

Ces propriétés définissent essentiellement l’aspect du rectangle.

Insérer et définir un contrôle Étiquette

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

Cliquez sur le ruban Insérer puis cliquez sur Étiquette : le contrôle Label1 s’affiche.

Renommez Label1 en lblSuppression. Les 3 premières lettres du nom de l’étiquette sont lbl. C’est une abréviation de label, soit étiquette en français.

Définissez les propriétés suivantes de lblSuppression :

BorderThickness = 5
Color = RGBA(0; 0; 0; 1)
Fill = RGBA(215; 223; 240; 1)
Text = "Confirmez-vous la suppression ?"
Size = 26
Height = 140
Width = 580
X = 30
Y = 248

Ces propriétés définissent essentiellement l’aspect de l’étiquette.

Insérer et définir un premier contrôle Bouton

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

Cliquez sur le ruban Insérer puis cliquez sur Entrée puis cliquez sur Bouton : le contrôle Bouton1 s’affiche.

Renommez Bouton1 en btbSuppression. Les 3 premières lettres du nom du bouton sont btn. C’est une abréviation de button, soit bouton en français.

Définissez les propriétés suivantes de btbSuppression :

BorderThickness = lblSuppression.BorderThickness
BorderColor = lblSuppression.BorderColor
Color = lblSuppression.Color
Fill = lblSuppression.Fill
Text = "Oui"
Size = lblSuppression.Size
Height = 70
Width = 290
X = lblSuppression.X
Y = 388
OnSelect = Remove(lstFruits; BrowseGallery1.Selected);;UpdateContext({boolSuppression:
false});;Navigate(EcranListe; ScreenTransition.None)

La propriété OnSelect supprime l’élément, met à jour la variable boolSuppression à false (faux) et affiche l’écran EcranListe.

Vous noterez aussi que certaines propriétés du contrôle sont alimentées par les valeurs des propriétés du contrôle lblSuppression. Quand cela a du sens, c’est pratique pour modifier en une fois tous les contrôles concernés.

Insérer et définir un second contrôle Bouton

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

Copiez-coller le bouton btbSuppression.

Renommez btbSuppression_1 en btbAnnulation. Les 3 premières lettres du nom du bouton sont btn. C’est une abréviation de button, soit bouton en français.

Définissez les propriétés suivantes de btbAnnulation :

BorderThickness = lblSuppression.BorderThickness
BorderColor = lblSuppression.BorderColor
Color = lblSuppression.Color
Fill = lblSuppression.Fill
Text = "Non"
Size = lblSuppression.Size
Height = 70
Width = 290
X = 320
Y = 388
OnSelect = UpdateContext({boolSuppression: false})

La propriété OnSelect met à jour la variable boolSuppression à false (faux).

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

Message de demande de confirmation
Message de demande de confirmation

Grouper les contrôles

Dans cette section, vous allez regrouper les contrôles liés à la demande de confirmation. L’intérêt d’avoir un groupe est de pouvoir faire apparaître ou disparaître les 4 contrôles simultanément. Comme un groupe est un contrôle, il possède des propriétés. Notamment, la propriété Visible du groupe va servir à l’afficher ou pas.

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

Sélectionnez les 4 contrôles suivants : rctSuppression, lblSuppression, btbSuppression et btbAnnulation puis faites un clic droit sur la souris et sélectionnez le menu Groupe : le contrôle Group1 est créé.

Le regroupement des 4 contrôles permet de les manipuler d’un seul bloc.

Renommez Group1 en grpSuppression. Les 3 premières lettres du nom du groupe sont grp. C’est une abréviation de Group, soit groupe en français.

Maintenant, il reste à mettre en œuvre la visibilité ou non du groupe.

Pour ce faire, définissez les propriétés suivantes de grpSuppression :

Visible = boolSuppression

La propriété Visible indique s’il faut afficher ou non le groupe. Cet affichage dépend de la valeur de la variable boolSuppression.

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

Message de demande de confirmation
Message de demande de confirmation

Enregistrer et tester l’application

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

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

Appuyez sur la touche F5.

Procédez à des tests. Par exemple, vous pouvez faire une tentative de suppression d’un élément. Puis, ensuite, vous pouvez faire une réelle suppression.

Une fois vos vérifications terminées, fermez la fenêtre en cliquant sur la croix en haut et à droite ou sur Échap du clavier.

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 implémenter un pop-up de confirmation. Vous avez aussi découvert le regroupement de contrôles dans un nouveau contrôle.

Article mis à jour le 30.10.2019.