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

Ajouter une nouvelle règle de visibilité dans CDS

Cet exemple vous explique comment ajouter une nouvelle une règle d’entreprise.

Dans un exercice précédent, vous avez vu comment créer une règle d’entreprise qui rend obligatoire la saisie du champ Nombre Km lors d’un Moyen de transport en Voiture.

Avec la nouvelle règle, vous allez indiquer que le champ Nombre Km n’est visible que si le Moyen de transport est fait en Voiture.

Préparation

Administrer l’entité

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 Données, puis cliquez sur Entités : la liste des entités existantes s’affiche.

Dans le volet central, en haut et à droite, cliquez sur l’affichage qui s’intitule Par défaut.

Dans ce menu, cliquez sur l’affichage qui s’intitule Personnalisé : l’entité Note de frais apparaît.

Cliquez sur l’entité Note de frais pour l’ouvrir.

Ajouter une règle d’entreprise

Cliquez sur l’onglet Règles d’entreprise, puis dans le menu du haut, cliquez sur Ajouter une règle d’entreprise : un nouvel onglet s’ouvre.

Dans la partie centrale, cliquez sur le pavé Condition. L’onglet Propriétés s’active. Dans cet onglet, vous pourrez modifier le nom de la condition et créer les règles.

Pour ce faire, modifiez la valeur de Nom complet en Indemnités Km. Puis, vous allez implémenter la règle.

Dans la partie des Règles, sélectionnez le champ Moyen de transport et cochez la case en face de Voiture.

Pour valider votre condition, cliquez sur le bouton Appliquer.

Ajouter et paramétrer une action

Maintenant que la condition est définie, il faut indiquer l’action qui doit être exécutée.

Pour ce faire, cliquez sur l’onglet Composants. Ensuite, avec la souris, glissez l’action qui s’intitule Définir la visibilité, à droite de la condition.

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

Définir la visibilité
Définir la visibilité

Dans les propriétés de l’action, modifiez le Nom complet en Nombre Km Visible.

Dans Champ, sélectionnez Nombre Km et dans Visible, sélectionnez Oui.

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

Contrainte obligatoire
Contrainte obligatoire

Ensuite, cliquez sur le bouton Appliquer.

Renommer la règle d’entreprise

Pour l’instant, votre règle s’intitule par défaut Nouvelle règle métier. Vous allez la renommer.

Pour ce faire, cliquez sur la flèche en face du nom Note de frais: Nouvelle règle métier (en haut, à gauche) : un bandeau s’ouvre.

Modifiez le nom de la règle métier en Visibilité Nombre Km.

Cliquez à nouveau sur la flèche en face du nom Note de frais: Nouvelle règle métier pour fermer le bandeau.

Pour l’instant, ne vous inquiétez pas de la sauvegarde de vos modifications. Ça va être bientôt fait.

Valider la règle d’entreprise

Vous allez vérifier l’absence d’erreur de conception dans votre règle.

Pour ce faire, cliquez sur l’icône Valider qui se trouve en haut et à droite.

Vous obtenez un message qui vous indique que la validation est réussie.

Enregistrer la règle d’entreprise

Pour éviter de perdre votre travail, vous allez enregistrer les modifications faites sur la règle d’entreprise.

Pour ce faire, cliquez sur l’icône Enregistrer qui se trouve en haut et à droite. Vous remarquerez que le nom de la règle a été mis à jour.

À la fin de l’enregistrement, fermez l’onglet du navigateur sur lequel vous étiez.

Vous revenez sur l’onglet précédent. Dans cet onglet, vous avez un pop-up avec un bouton OK.

Cliquez sur ce bouton OK : vous voyez votre règle. Vous remarquerez qu’elle est désactivée par défaut. C’est normal car c’est une sécurité car le processus d’activation est formel.

Activer la règle d’entreprise

Pour activer la règle d’entreprise, cliquez sur son nom pour l’ouvrir dans un nouvel onglet.

Ensuite, cliquez sur l’icône Activer qui se trouve en haut et à droite.

Vous obtenez un pop-up qui vous demande de confirmer l’activation.

Cliquez sur le bouton Activer.

À la fin de l’activation, fermez l’onglet du navigateur sur lequel vous étiez.

Vous revenez sur l’onglet précédent. Dans cet onglet, vous avez un pop-up avec un bouton OK.

Cliquez sur ce bouton OK : vous voyez votre règle. Cette fois-ci, elle est activée.

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

Règle activée
Règle activée

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment ajouter une règle d’entreprise.

Vous avez aussi découvert l’action qui s’intitule Définir la visibilité.

Vous l’avez déjà certainement deviné. Tout ce travail va être exploité dans les exercices consacrés à la création d’une application piloté par un modèle.

Catégories
Consultant, Formateur

Créer une règle d’entreprise CDS obligatoire

Cet exemple vous explique comment créer une règle d’entreprise dans CDS.

Cette règle d’entreprise est créée au niveau des données. Cela signifie qu’elle s’appliquera indépendamment de vos applications, ce qui garantit sa robustesse.

Cela signifie aussi qu’il n’est pas nécessaire de chercher à l’implémenter dans vos applications, ce qui les allège.

L’objectif de la règle est de rendre obligatoire la saisie du nombre de kms parcourus en Voiture.

Préparation

Administrer l’entité

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 Données, puis cliquez sur Entités : la liste des entités existantes s’affiche.

Dans le volet central, en haut et à droite, cliquez sur l’affichage qui s’intitule Par défaut.

Dans ce menu, cliquez sur l’affichage qui s’intitule Personnalisé : l’entité Note de frais apparaît.

Cliquez sur l’entité Note de frais pour l’ouvrir.

Ajouter une règle d’entreprise

Cliquez sur l’onglet Règles d’entreprise, puis dans le menu du haut, cliquez sur Ajouter une règle d’entreprise : un nouvel onglet s’ouvre.

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

Nouvelle règle d'entreprise (partiel)
Nouvelle règle d’entreprise (partiel)

Cet écran se compose d’une partie centrale qui schématise la règle. Celle-ci est constituée de conditions et d’actions, un peu comme un workflow.

La partie basse de la partie centrale affiche une synthèse des conditions dans une mini-carte. Cette mini-carte permet de se repérer visuellement dans une règle d’entreprise complexe ou riche. En effet, les conditions et actions sont symbolisées par des carrés de couleur. Vous verrez que cette carte va se mettre à jour au fur et à mesure de l’ajout des actions.

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

Relation Plusieurs-à-une
Relation Plusieurs-à-une

À droite de cette mini-carte, vous avez une vue de la règle métier en mode texte. Cette vue va aussi s’actualiser au fur et à mesure du paramétrage de la règle. Elle présente le fonctionnement de la règle en français à l’aide de la notation algorithmique.

Dans le volet de droite, vous avez l’onglet Composants et l’onglet Propriétés. L’onglet Composants affiche les conditions et actions disponibles que vous pourriez ajouter. L’onglet Propriétés permet de mettre à jour les caractéristiques des conditions et actions. Vous allez bientôt faire ces manipulations.

Paramétrer la condition

Dans la partie centrale, cliquez sur le pavé Condition. L’onglet Propriétés s’active. Dans cet onglet, vous pourrez modifier le nom de la condition et créer les règles.

Pour ce faire, modifiez la valeur de Nom complet en Indemnités Km. Puis, vous allez implémenter la règle.

Dans la partie des Règles, sélectionnez le champ Moyen de transport et cochez la case en face de Voiture.

Dans un exercice précédent, vous avez implémenté une règle sur le champ Moyen de transport dans un champ calculé qui concerne l’exécution d’une condition. Ici, la logique est différente puisque l’objectif est de rendre obligatoire la saisie du nombre de kms parcourus en Voiture.

Vous remarquerez que l’expression de la condition, vue en mode texte, s’affiche tout en bas.

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

Expression de la condition en mode texte
Expression de la condition en mode texte

Pour valider votre condition, cliquez sur le bouton Appliquer. La règle métier en mode texte s’actualise aussitôt dans la partie centrale.

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

Règle métier en mode texte
Règle métier en mode texte

Ajouter et paramétrer une action

Maintenant que la condition est définie, il faut indiquer l’action qui doit être exécutée.

Pour ce faire, cliquez sur l’onglet Composants. Ensuite, avec la souris, glissez l’action qui s’intitule Définir les champs commerciaux obligatoires, à droite de la condition.

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

Définir les champs obligatoires
Définir les champs obligatoires

Dans les propriétés de l’action, modifiez le Nom complet en Saisie Nombre Km.

Dans Champ, sélectionnez le champ Nombre Km et dans Statut, sélectionnez la Contrainte obligatoire.

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

Contrainte obligatoire
Contrainte obligatoire

Ensuite, cliquez sur le bouton Appliquer.

Renommer la règle d’entreprise

Pour l’instant, votre règle s’intitule par défaut Nouvelle règle métier. Vous allez la renommer.

Pour ce faire, cliquez sur la flèche en face du nom Note de frais: Nouvelle règle métier (en haut, à gauche) : un bandeau s’ouvre.

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

Renommer la règle
Renommer la règle

Modifiez le nom de la règle métier en Saisie obligatoire Km.

Cliquez à nouveau sur la flèche en face du nom Note de frais: Nouvelle règle métier pour fermer le bandeau.

Pour l’instant, ne vous inquiétez pas de la sauvegarde de vos modifications. Ça va être bientôt fait.

Valider la règle d’entreprise

Vous allez vérifier l’absence d’erreur de conception dans votre règle.

Pour ce faire, cliquez sur l’icône Valider qui se trouve en haut et à droite.

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

Valider la règle
Valider la règle

Vous obtenez un message qui vous indique que la validation est réussie.

Enregistrer la règle d’entreprise

Pour éviter de perdre votre travail, vous allez enregistrer les modifications faites sur la règle d’entreprise.

Pour ce faire, cliquez sur l’icône Enregistrer qui se trouve en haut et à droite. Vous remarquerez que le nom de la règle a été mis à jour.

À la fin de l’enregistrement, fermez l’onglet du navigateur sur lequel vous étiez en train de travailler.

Vous revenez sur l’onglet précédent. Dans cet onglet, vous avez un pop-up avec un bouton OK.

Cliquez sur ce bouton OK : vous voyez votre règle. Vous remarquerez qu’elle est désactivée par défaut. C’est normal car c’est une sécurité. En effet, le processus d’activation est formel.

Activer la règle d’entreprise

Pour activer la règle d’entreprise, cliquez sur son nom pour l’ouvrir dans un nouvel onglet.

Ensuite, cliquez sur l’icône Activer qui se trouve en haut et à droite.

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

Activer la règle
Activer la règle

Vous obtenez un pop-up qui vous demande de confirmer l’activation.

Cliquez sur le bouton Activer.

À la fin de l’activation, fermez l’onglet du navigateur sur lequel vous étiez.

Vous revenez sur l’onglet précédent. Dans cet onglet, vous avez un pop-up avec un bouton OK.

Cliquez sur ce bouton OK : vous voyez votre règle. Cette fois-ci, elle est activée.

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

Règle activée dans CDS
Règle activée dans CDS

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer une règle d’entreprise. Autrement dit, vous avez réussi à implémenter une logique métier dans vos données.

Cela signifie que cette règle va s’appliquer indépendamment des applications. Même si les applications sont mal codées, ou si un oubli a été fait, cette logique s’appliquera.

Catégories
Consultant, Formateur

Relier deux entités de CDS entre elles

Cet exemple vous explique comment relier deux entités de CDS entre elles. Notamment, vous allez relier l’entité Note de frais avec l’entité Contact.

L’entité Contact, qui est livrée par défaut dans CDS, est une entité essentielle et centrale. Elle définit les champs des personnes avec lesquelles une unité de l’organisation a une relation. Typiquement, un contact peut être un collaborateur de l’entreprise, un client ou un fournisseur. Un contact peut évidemment être aussi un client et un contact.

Comme plusieurs notes de frais peuvent être reliées à un collaborateur, la relation entre l’entité Note de Frais et l’entité Contacts est de type Plusieurs-à-une.

Préparation

Administrer l’entité

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 Données, puis cliquez sur Entités : la liste des entités existantes s’affiche.

Dans le volet central, en haut et à droite, cliquez sur l’affichage qui s’intitule Par défaut.

Dans ce menu, cliquez sur l’affichage qui s’intitule Personnalisé : l’entité Note de frais apparaît.

Cliquez sur l’entité Note de frais pour l’ouvrir.

Relier deux entités entre elles

Cliquez sur l’onglet Relations.

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

Créer une relation dans CDS
Créer une relation dans CDS

Dans le menu, cliquez sur Ajouter une relation puis cliquez sur Plusieurs-à-une.

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

Créer une relation Plusieurs-à-une dans CDS
Créer une relation Plusieurs-à-une dans CDS

Dans le volet de droite, vous voyez que votre entité Note de frais est déjà sélectionnée et que vous ne pouvez pas la modifier.

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

Relation Plusieurs-à-une
Relation Plusieurs-à-une

Sous Associé (un), cliquez sur Entité et sélectionnez l’entité Contact.

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

Mettre à jour la relation
Mettre à jour la relation

Sous Actuel (plusieurs), modifiez le champ Nom complet du champ de recherche en Travailleur.

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

Renommer une relation
Renommer une relation

Ensuite, cliquez sur le bouton OK.

Enregistrer les modifications de l’entité

Maintenant, vous allez enregistrer l’entité. En effet, pour l’instant, la relation n’est pas encore prise en compte par CDS. Pour ce faire, cliquez sur le bouton Enregistrer l’entité.

Vérifier la relation

Cliquez sur l’onglet Champs : vous pouvez constater la création de la colonne qui s’intitule Travailleur.

Pour vous aider, regardez la copie d’écran ci-dessous : l’ordre de tri a été inversée sur la colonne Nom d’affichage.

Vérifier la relation
Vérifier la relation

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris à relier deux entités entre elles. Vous avez vu aussi que ce lien génère un nouveau champ, de type recherche, dans votre entité.

Catégories
Consultant, Formateur

Importer des données Excel dans CDS

Cet exemple vous explique comment grâce à la fonctionnalité native Obtenir des données d’un fichier Excel, vous pouvez importer des données en bloc de Microsoft Excel dans une entité.

À l’issue de cette manipulation, vous disposerez d’un environnement Common Data Service mis à jour, dans lequel vous pourrez manipuler vos données.

Préparation

Adapter le fichier Excel

Dans les fichiers d’exercices, ouvrez le dossier Entités. Dans ce dossier, ouvrez le fichier Excel qui s’intitule entité_NDF.xlsx.

Dans ce menu, cliquez sur l’affichage qui s’intitule Personnalisé : l’entité Note de frais apparaît.

Prenez le temps de parcourir le fichier pour comprendre ses données.

Ensuite, remplacez partout le préfixe cr121_ par votre préfixe. Ce préfixe se trouve dans toutes les entêtes de colonnes du tableau.

Enregistrez le fichier Excel.

Le fichier ne contient que des frais liés à des déplacements. Toutefois, il aurait pu contenir des frais de toute nature.

Administrer l’entité

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 Données, puis cliquez sur Entités : la liste des entités existantes s’affiche.

Dans le volet central, en haut et à droite, cliquez sur l’affichage qui s’intitule Par défaut.

Dans ce menu, cliquez sur l’affichage qui s’intitule Personnalisé : l’entité Note de frais apparaît.

Cliquez sur l’entité Note de frais pour l’ouvrir.

Importer les données

Dans le menu, cliquez sur Obtenir les données puis cliquez sur Obtenir des données à partir d’Excel. Ne cliquez pas sur Modification des données dans Excel.

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

Obtenir des données à partir d'Excel
Obtenir des données à partir d’Excel

Ensuite, cliquez sur le bouton Fichier non chargé.

Dans la fenêtre Windows, récupérez et ouvrez le fichier entité_NDF.xlsx puis patientez quelques secondes, le temps du chargement et de l’analyse du fichier par l’assistant.

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

Mappage des champs
Mappage des champs

Le lien Mapper des champs sert à mapper manuellement les champs du fichier Excel aux champs d’entités. Dans ce scénario, vous n’avez pas besoin de l’utiliser, car normalement l’assistant reconnaît tous les champs du fichier Excel.

En haut et à droite, cliquez sur le lien Importer puis patientez quelques secondes, le temps de l’import du fichier par l’assistant.

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

Import réussi
Import réussi

Pour consulter le résultat, cliquez sur Entités dans le volet de gauche.

Ensuite, dans le volet central, cliquez sur l’entité Note de frais.

Cliquez sur l’onglet Données (à droite).

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

Données importées à partir d'Excel
Données importées à partir d’Excel

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris à importer des données dans une base CDS, à l’aide de la fonctionnalité native Obtenir des données à partir d’Excel.

Il existe d’autres techniques pour alimenter manuellement la base CDS. Notamment, vous pouvez utiliser le complément Microsoft PowerApps Office dans Excel, ou encore créer un projet d’intégration de données.

Catégories
Consultant, Formateur

Ajouter un champ calculé dans une entité CDS

Cet exemple vous explique comment ajouter un champ calculé dans une entité de la base de données CDS.

Attention, ici nous cherchons à illustrer le fonctionnement d’un champ calculé. Nous ne cherchons pas à implémenter un véritable calcul d’indemnités kilométriques 🙂

Préparation

Administrer l’entité

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 Données, puis cliquez sur Entités : la liste des entités existantes s’affiche.

Dans le volet central, en haut et à droite, cliquez sur l’affichage qui s’intitule Par défaut.

Ajouter un champ calculé

Comme son nom l’indique, un champ calculé est un champ qui résulte d’un calcul.

Dans ce scénario, le collaborateur de l’entreprise va pouvoir connaître le montant de son indemnité kilométrique en renseignant uniquement le nombre de kilomètres parcourus, s’il a utilisé sa Voiture.

Il s’agit évidemment d’un exemple simplifié à des fins pédagogiques. Dans la vraie vie, la formule de calcul est plus complexe. Par exemple, en France, l’indemnité dépend notamment du nombre de chevaux fiscaux de la voiture.

Cliquez sur le lien Ajouter un champ: le volet Propriété du champ s’ouvre sur la droite.

Renseignez Nom d’affichage : Indemnités Km.

Sélectionnez le Type de données : Devise.

Indiquez dans les options avancées que la valeur minimale est 0 et la valeur maximale 10000.

Indiquez aussi que la Source de précision est Propriété de précision et que le Nombre de décimales est 2.

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

Création du champ Indemnités Km
Création du champ Indemnités Km

Ne cliquez pas sur OK.

Au milieu du volet, en face de Calculés ou cumulatifs, cliquez sur Ajouter puis cliquez sur Calcul : un message propose d’enregistrer les changements en attente. Dans ce message, cliquez sur le bouton Enregistrer : l’enregistrement des modifications de l’entité se fait.

Normalement, une fenêtre, qui s’intitule Configurer Indemnités Km, s’ouvre directement avec la possibilité de saisir la formule de calcul.

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

Formule de calcul (partiel)
Formule de calcul (partiel)

Si c’est le cas, allez à la section qui s’intitule Formule de calcul, juste ci-dessous.

Si vous ne voyez pas la fenêtre et que vous ne voyez qu’un pop-up, comme celui de la copie d’écran ci-dessous.

Modification en cours d'un champ calculé
Modification en cours d’un champ calculé

Cliquez sur le bouton OK : vous voyez simplement la liste des champs. Dans ce cas, cliquez sur le champ Indemnités Km : le volet de droite s’ouvre sur le champ.

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

Ouvrir le champ de calcul
Ouvrir le champ de calcul

Dans ce volet, cliquez sur Ouvrir le champ de calcul : la fenêtre des formules s’ouvre.

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

Formule de calcul (partiel)
Formule de calcul (partiel)

Formule de calcul

Cette fenêtre permet de saisir des conditions facultatives. Si la condition est vérifiée, le calcul est fait dans l’action. S’il n’y a pas de conditions, le calcul est systématiquement fait.

Vous allez ajouter une condition qui stipule que le calcul ne sera fait que lorsqu’une Voiture est utilisée.

Pour ce faire, cliquez sur Ajouter une condition : un bloc apparaît.

Dans ce bloc, cliquez dans Champ et sélectionnez Moyen de transport. Ne modifiez pas Opérateur, ni Type et, dans Valeur, cochez Voiture.

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

Saisie de la condition
Saisie de la condition

Cliquez sur la coche verte de validation.

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

Condition renseignée
Condition renseignée

Maintenant, vous allez ajouter la formule de calcul.

Pour ce faire, cliquez sur Ajouter une action : un bloc apparaît.

Dans le bloc, tapez Km : le champ Nombre Km apparaît.

Sélectionnez ce champ puis multipliez le par 0.595. Faites attention, le séparateur décimal est un point “.” et non pas une virgule “,”.

Cliquez sur la coche bleue de validation.

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

Action renseignée
Action renseignée

En haut de cette fenêtre, cliquez sur enregistrer et fermer : la fenêtre se ferme et vous retrouvez le pop-up du début d’exercice.

Dans ce pop-up, cliquez sur le bouton OK : la création de la formule de calcul est terminée.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris à créer un champ calculé. Ce champ calculé se déclenche selon une condition. Dans ce cas, il se met à jour grâce à la valeur d’un autre champ.

Catégories
Consultant, Formateur

Créer des champs supplémentaires dans une entité CDS

Cet exemple vous explique comment créer des champs dans une entité de la base de données CDS.

Il est nécessaire de comprendre les nombreuses possibilités offertes par les champs. Respectez donc le type des champs, ainsi que leurs valeurs. Vous pourrez tirer profit de cette richesse par la suite.

Préparation

Administrer l’entité

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 Données, puis cliquez sur Entités : la liste des entités existantes s’affiche.

Dans le volet central, en haut et à droite, cliquez sur l’affichage qui s’intitule Par défaut.

Dans ce menu, cliquez sur l’affichage qui s’intitule Personnalisé : l’entité Note de frais apparaît.

Cliquez sur l’entité Note de frais pour l’ouvrir : plusieurs champs apparaissent, dont le champ Dépense.

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

Champs de l'entité (extrait)
Champs de l’entité (extrait)

Dans l’exercice précédent, c’est vous qui avez créé explicitement le champ Dépense. Dans la colonne Type, notez qu’il est Personnalisé. Dans CDS, la personnalisation indique une action volontaire du contributeur. Par exemple, votre entité Note de frais est aussi de type Personnalisé, car c’est vous qui l’avez créée.

Par ailleurs, la mention Champ principal, qui est accolée au nom du champ, indique le rôle essentiel de ce champ.

Les autres champs ont été rajoutés, à la suite de l’activation des options de l’exercice précédent. Vous êtes libre de les utiliser ou non, selon vos besoins.

Ajouter le champ Mission

Vous allez ajouter des champs métiers supplémentaires. Pour ce faire, cliquez sur le lien Ajouter un champ du menu : le volet Propriété du champ s’ouvre sur la droite.

Renseignez le nom d’affichage : Mission.

Sélectionnez le Type de données : Texte. Normalement, c’est le choix par défaut.

Laissez les autres options par défaut.

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

Création du champ Mission
Création du champ Mission

Puis cliquez sur le bouton OK : le champ Mission apparaît dans la liste des champs en gras.

Enregistrer les modifications de l’entité

Maintenant, vous allez enregistrer l’entité. En effet, pour l’instant, le champ n’est pas encore pris en compte par CDS. Pour ce faire, cliquez sur le bouton Enregistrer l’entité (en bas).

En respectant le même principe, ajoutez ces 7 champs supplémentaires :

Ajouter le champ Date déplacement

Ajoutez le champ Date déplacement de type Date uniquement.

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

Création du champ Date déplacement
Création du champ Date déplacement

Ajouter le champ Moyen de transport

Ajoutez le champ Moyen de transport de type Groupe d’options.

Cliquez sur Groupe d’options puis cliquez sur Nouveau groupe d’options puis créez les 4 éléments d’options suivants : Taxi, Train, Voiture, VTC.

Le moment venu, vous ne mettrez pas de valeur par défaut.

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

Création du champ Moyen de transport
Création du champ Moyen de transport

Ajouter le champ Nombre Km

Ajoutez le champ Nombre Km de type Nombre entier.

Indiquez dans les options avancées que la valeur minimale est 0 et la valeur maximale 10000.

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

Création du champ Nombre Km
Création du champ Nombre Km

Ajouter le champ Montant payé

Ajoutez le champ Montant payé de type Devise.

Indiquez dans les options avancées que la valeur minimale est 0 et la valeur maximale 10000.

Indiquez aussi que la Source de précision est Propriété de précision et que le Nombre de décimales est 2.

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

Création du champ Montant payé
Création du champ Montant payé

Ajouter le champ Date validation

Ajoutez le champ Date validation de type Date uniquement.

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

Création du champ Date validation
Création du champ Date validation

Ajouter le champ NdF Validée

Ajoutez le champ NdF Validée de type Deux options.

Gardez les valeurs proposées : Oui / Non.

Gardez aussi la valeur par défaut (Non).

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

Création du champ NdF Validée
Création du champ NdF Validée

Ajouter le champ Remboursable

Ajoutez le champ Remboursable de type Deux options.

Gardez les valeurs proposées : Oui / Non.

Gardez aussi la valeur par défaut (Non).

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

Création du champ Remboursable
Création du champ Remboursable

Enregistrer les nouvelles modifications de l’entité

Quand tous les champs seront créés, cliquez sur le bouton Enregistrer l’entité : vos champs ont bien été créés.

Pour ne voir que vos champs, cliquez sur l’affichage personnalisé. Vous voyez aussi apparaître automatiquement des champs supplémentaires à la suite de vos manipulations.

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

Les champs encadrés sont les champs que vous avez créés explicitement.

Les autres champs ont été rajoutés pour tenir compte des contraintes, liées aux types de données des champs initialement créés.

Par exemple, quand vous avez créé le champ Montant payé, les champs Devise, Montant payé (de base) et Taux de change ont été automatiquement ajoutés.

En effet, lors d’un achat en Francs Suisse, la devise est le franc suisse, le montant payé (de base) est la somme payée en francs suisse au taux de change de 0,95.

Champs personnalisés
Champs personnalisés

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris à créer des champs dans l’entité. Vous avez aussi découvert qu’un champ pouvait avoir un type de données et qu’il existait de très nombreux types. Vous avez aussi vu que vous pouviez personnaliser certains types de données. Enfin, vous avez découvert que certains champs pouvaient s’ajouter automatiquement en fonction du type de données sélectionné.

Article mis à jour le 18.04.2020.

Catégories
Consultant, Formateur

Créer une nouvelle entité CDS dans le service de données communes

Cet exemple vous explique comment créer une nouvelle entité dans la base de données CDS (Common Data Service).

Vous constaterez que les entités sont créées au singulier. C’est voulu car la forme plurielle est générée automatiquement pour la table de données correspondante.

Dans ce scénario, il s’agit de créer une entité qui peut gérer des notes de frais. Ces notes de frais seront centralisées puis saisies par l’opérateur du service central.

Cet exemple est le premier d’une série de plusieurs qui vous feront notamment découvrir la richesse des applications basées sur un modèle. Toutefois, il faudra être patient car le travail préparatoire se fait par étapes avant d’en voir le résultat qui vaut vraiment le coup 😉.

Par ailleurs, vous ferez attention de ne pas valider trop vite la création de la nouvelle entité.

Préparation

  • Pour faire cet exercice, vous avez besoin d’une base CDS existante.

Administrer l’entité

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 Données, puis cliquez sur Entités : la liste des entités existantes s’affiche.

Créer une entité

Pour créer votre entité, cliquez (haut) sur Nouvelle entité: le volet Nouvelle entité s’ouvre sur la droite.

Dans le volet Nouvelle entité, renseignez le nom d’affichage avec Note de frais.

Le nom de l’entité est au singulier.

Les champs Plusieurs noms d’affichage et Nom se mettent à jour automatiquement en fonction du nom d’affichage que vous avez entré.

Le champ Plusieurs noms d’affichage permet d’indiquer le nom de la table qui stocke les données de l’entité.

Modifiez la valeur du champ Plusieurs noms d’affichage en Notes de frais.

Le champ Nom peut être éventuellement modifié maintenant. Il s’agit d’un nom unique au sein de votre environnement. Après la création d’une entité, ce nom ne peut plus être modifié. Pour la formation, il n’est pas nécessaire de le modifier. De plus, il 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.

Notez quelque part votre préfixe car vous en aurez besoin plus tard.

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

Nouvelle entité en cours de création
Nouvelle entité en cours de création

Ne cliquez pas sur le bouton Créer !

Créer le champ principal

Un nom d’affichage du Champ principal est proposé. Il sert à identifier chacun des futurs enregistrements. Afin de rendre convivial l’application, le choix est fait dans ce scénario d’utiliser le nom de la Dépense comme identificateur. Toutefois, vous auriez pu aussi utiliser un identifiant numérique ou un code.

Modifiez la valeur du champ Nom d’affichage du champ principal en Dépense.

Vous remarquerez que la valeur du champ Nom du champ principal a été générée automatiquement. Notamment, l’accent a été supprimé sur le é du mot Dépense.

Ne cliquez pas sur le bouton Créer !

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

Nouvelle entité en cours de création
Nouvelle entité en cours de création

Avant de créer l’entité, vous allez compléter quelques informations complémentaires.

Paramétrer l’entité

Cliquez sur le lien Plus de paramètres puis ouvrez Description et saisissez le texte suivant Enregistrement des dépenses liées aux notes de frais pour obtenir leur remboursement.

Ensuite, vous allez ajouter des champs supplémentaires facultatifs à l’aide des options proposées lors de la création ou la modification de l’entité. Bien que ces champs soient facultatifs, la plupart d’entre eux ne pourront pas être supprimés par la suite. Par exemple, si vous vous rendez compte que finalement ils ne servent à rien. Pour la formation ce n’est évidemment pas gênant. Toutefois, en production, cela peut devenir perturbant.

Ouvrez aussi le lien Collaboration, puis cochez :

  • Autoriser les commentaires
  • Activer la gestion de documents SharePoint

Laissez les autres options de collaboration à leurs valeurs par défaut.

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

Options de collaboration
Options de collaboration

Ne modifiez les autres options de création de l’entité.

Maintenant, cliquez (enfin !) sur le bouton Créer : un pop-up surgit. Il vous informe que certaines options ne pourront plus être désactivées.

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

Confirmer les modifications
Confirmer les modifications

Vérifiez que vous avez coché les bonnes options puis cliquez sur le bouton OK.

Patientez quelques secondes : l’entité est en cours de création.

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

Entité Note de frais en cours de provisionnement
Entité Note de frais en cours de provisionnement

Au bout d’une vingtaine de secondes, l’entité Note de frais est bien créée et provisionnée.

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

Entité Note de frais créée
Entité Note de frais créée

Consulter la liste des entités

Avec la méthode de votre choix, revenez sur la liste des entités. Votre entité Note de frais s’affiche parmi toutes les autres entités. Ce qui ne la rend pas très visible. Toutefois, vous pouvez la rendre plus visible.

Pour ce faire, en haut et à droite, cliquez sur l’affichage qui s’intitule Par défaut.

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

Affichage par défaut
Affichage par défaut

Dans ce menu, cliquez sur l’affichage qui s’intitule Personnalisé : l’entité Note de frais que vous venez de créer s’affiche seule. C’est normal car pour l’instant vous n’avez créé qu’une seule entité.

L’exercice suivant fournira plus d’explications sur l’entité et ses composantes.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris à créer et paramétrer votre propre entité.

À partir de maintenant, cette entité servira aux prochains exercices.

Article mis à jour le 17.04.2020.

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

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

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

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.

Catégories
Consultant, Formateur

Ajouter une connexion SharePoint Online dans PowerApps

Objectif

Cet exercice vous explique comment ajouter une nouvelle connexion SharePoint Online dans PowerApps.

L’objectif est de relier une nouvelle liste SharePoint à l’application, afin de pouvoir sélectionner ces valeurs dans la liste existante. Cette manipulation est équivalente à l’utilisation du type de colonne Rechercher dans SharePoint.

Toutefois, il existe des différences importantes. En effet, cette manipulation permet de récupérer le contenu de n’importe quelle liste de n’importe quel site SharePoint. Ce qui n’est pas le cas avec la colonne Rechercher qui est limitée aux listes du site.

Par ailleurs, pour des raisons pédagogiques, la nouvelle connexion est faite dans cet exercice avec une liste SharePoint. En réalité, la nouvelle connexion pourrait se faire avec n’importe quelle source de données PowerApps et pas uniquement une liste SharePoint.

Prérequis

  • L’exercice du TP Créer une application PowerApps 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 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 un pop-up vous demande l’autorisation de vous connecter à SharePoint, cliquez sur Autoriser.

À l’issue de ce temps de préparation, il est possible que vous obteniez un pop-up de bienvenue.

Dans ce pop-up, 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

Personnaliser une carte de données

Pour changer un champ texte en liste déroulante qui pointe sur une autre liste, il faut personnaliser sa carte de données. Vous ne pouvez pas changer le type du contrôle. Vous devrez donc supprimer le contrôle existant puis ensuite, insérer un nouveau contrôle de type liste déroulante. Par ailleurs, comme la suppression du contrôle existant va générer des erreurs, il faudra les corriger en substituant le nom du nouveau contrôle à la place de l’ancien nom.

Vous allez voir comment faire ci-dessous.

Tout d’abord, développez EditForm1 qui se trouve sous EcranModification.

Ensuite, cliquez sur la carte qui s’intitule Producteur_DataCard1.

Pour personnaliser la carte Producteur, ouvrez ses propriétés avancées et cliquez sur Déverrouiller pour modifier les propriétés.

Ensuite, ouvrez la carte Producteur_DataCard1 pour faire apparaître ses contrôles.

Maintenant, il faut supprimer uniquement le contrôle de saisie du producteur DataCardValue4. Il ne faut pas supprimer la carte. Pour supprimer DataCardValue4, sélectionnez le dans l’arborescence puis appuyez sur la touche Suppr de votre clavier.

Pour l’instant, ne vous préoccupez pas des icônes rouges. Ces icônes rouges sont liées à la suppression du contrôle. En effet, il subsiste des formules qui font toujours référence aux propriétés de DataCardValue4. Ces erreurs vont être bientôt corrigées.

Insérer un contrôle Liste déroulante

Maintenant, il faut insérer un contrôle Liste déroulante dans Producteur_DataCard1. Pour ce faire, sélectionnez la carte Producteur_DataCard1 dans l’arborescence.

Ensuite, cliquez dans l’onglet Insérer puis cliquez sur Contrôles, et sélectionnez Liste déroulante : un nouveau contrôle apparait (Dropdown1) dans la carte.

Avant de continuer, vérifiez bien que le contrôle Dropdown1 est contenu dans Producteur_DataCard1. Si ce n’est pas le cas, supprimez le contrôle et recommencez.

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

Nouveau contrôle Producteur_DataCard1
Nouveau contrôle Producteur_DataCard1

Comme l’affichage est un peu encombré, vous allez l’aérer.

Pour ce faire, supprimez complètement la carte Pièces jointes_DataCard1.

Ensuite, agrandissez la carte Producteur_DataCard1 avec la souris.

Puis, déplacez le contrôle Dropdown1 sous producteur avec la souris.

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

Aménagement de l'écran (vue partielle)
Aménagement de l’écran (vue partielle)

Avec la méthode de votre choix, renommez le contrôle Dropdown1 en ListeDeroulanteProducteurs.

Ajouter une nouvelle source de données

Maintenant, vous allez ajouter une source de données de type SharePoint.

Sous Affichage, cliquez sur Source de données : le volet Source de données apparaît à gauche.

En haut du volet Source de données, cliquez dans la zone Rechercher…

Dans cette zone de recherche, saisissez SharePoint puis cliquez sur l’icône bleue SharePoint aide les organisations à partager : ne cliquez pas sur les icônes violettes Common Data Service.

Dans la liste qui s ‘affiche, cliquez sur la première connexion SharePoint : la liste des sites récents apparaît.

Patientez quelques instants.

Dans cette liste, sélectionnez le site SharePoint qui porte votre prénom.

Sous Choisir une liste, cochez la case lstProducteurs, puis cliquez sur Se connecter (en bas du volet).

À partir de maintenant, vous pouvez utiliser les données de cette liste dans votre application.

Ouvrez l’arborescence.

Dans l’arborescence, cliquez sur ListeDeroulanteProducteurs.

Dans la propriété Par défaut, changez la valeur 1 par :

Parent.Default

Cette formule récupère la valeur par défaut de la liste.

Dans la propriété avancée Items, changez la valeur DropDownSample par :

lstProducteurs.Titre

Cette formule affiche le contenu de la liste lstProducteurs.

Corriger les erreurs

Vous allez corriger les erreurs liées à la suppression du contrôle DataCardValue4.

Pour ce faire, cliquez sur Producteur_DataCard1.

Dans le sélecteur de propriétés du ruban, sélectionnez Update.

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

Propriété Update
Propriété Update

Dans la zone de la formule, remplacez son contenu avec la formule suivante :

ListeDeroulanteProducteurs.Selected.Titre

Cette formule affiche la valeur du champ sélectionné.

Ensuite, cliquez sur ErrorMessage4.

Dans le sélecteur de propriétés du ruban, sélectionnez Y.

Dans la zone de la formule, remplacez son contenu avec la formule suivante :

ListeDeroulanteProducteurs.Y + ListeDeroulanteProducteurs.Height

Cette formule calcule la nouvelle valeur de Y (axe des ordonnées) en fonction de la hauteur du champ.

Exécuter l’application PowerApps

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.

Cliquez sur l’icône Aperçu en forme de triangle (en haut, à droite) ou appuyez sur la touche F5.

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

Affichage de la liste déroulante
Affichage de la liste déroulante

Changez le producteur du fruit sélectionné, puis validez votre choix.

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.

Vérifiez que la liste lstFruits a bien été mise à jour.

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

Liste lstFruits à jour
Liste lstFruits à jour

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment ajouter et utiliser une nouvelle connexion SharePoint Online dans PowerApps.

Article modifié le 19.10.2019

Catégories
Consultant, Formateur

Publier et Versionner une application PowerApps

Objectif

Cet exemple vous explique comment publier et restaurer une version d’une application PowerApps.

Publier une application vous permet de déployer les modifications faites dans une application Microsoft PowerApps.

Les versions d’une application PowerApps permettent de revenir à une version précédente de votre application. Dans leur fonctionnement, elles sont similaires aux versions d’une bibliothèque SharePoint.

Personnaliser une application PowerApps

Vous allez changer l’alignement du stock pour le mettre à droite.

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 le volet central, cochez la case en face d’une application déjà publiée, afin de la sélectionner. Dans ce scénario, il s’agit de l’application qui s’intitule canFruits.

Dans la bannière (en haut), cliquez sur Modifier : un nouvel onglet s’ouvre à droite.

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.

Dans l’arborescence (à gauche), cliquez sur le contrôle Body1 (sous EcranListe et BrowseGallery1) puis, dans ses propriétés (à droite), cliquez sur droite (right) dans Alignement du texte.

Enregistrer l’application

Pour ce faire, appuyez sur les touches suivantes de votre clavier : Ctrl + S.

Si une bannière vous propose de publier l’application pour la partager, ignorez-la.

Une fois enregistrée, ne cliquez pas sur le bouton Publier !

La publication permet de rendre vos modifications publiques. En effet, l’enregistrement stocke vos modifications mais celles-ci ne sont pas encore visible. Vous allez le vérifier.

Ne fermez pas cet écran.

Tester le partage

Pour vérifier que votre modification n’est pas encore visible, vous allez utiliser l’application avec le compte d’Alice.

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://portal.office.com

Renseignez le compte de l’utilisateur Alice puis son mot de passe.

Si vous avez oublié le compte ou le mot de passe de l’utilisateur, vous pouvez les récupérer dans votre email.

É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 Outlook qui s’ouvre.

Une fois que Outlook est ouvert, fermez les pop-ups qui surgissent éventuellement.

Dans Outlook, cherchez et ouvrez le message qui vous indique que l’application PowerApps est partagée avec vous.

Dans ce message, cliquez sur le bouton Open : l’application se lance.

Vous constatez immédiatement que les valeurs du stock ne sont pas alignées à droite.

Appuyez 2 ou 3 fois sur CTRL + F5 de votre clavier pour rafraîchir l’affichage : les valeurs du stock ne sont toujours pas alignées à droite.

C’est normal car vous n’avez pas encore publié votre application.

Ne fermez pas cet écran.

Revenez sur le navigateur précédent, où vous avez modifié l’application.

Publier l’application

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

Maintenant, cliquez sur le bouton Publier : un pop-up apparaît qui vous rappelle que les utilisateurs autorisés verront la nouvelle version de l’application.

Dans ce pop-up, cliquez sur le bouton Publier cette version.

Ne fermez pas cet écran.

Tester la publication

Pour vérifier que votre modification est visible, vous allez utiliser l’application avec le compte d’Alice.

Revenez sur le navigateur d’Alice.

Sur le navigateur d’Alice, appuyez sur touche F5 de votre clavier pour rafraîchit son écran.

Vous constatez immédiatement que les valeurs du stock sont alignées à droite.

Les modifications ont été publiées.

Ne fermez pas cet écran.

Revenez sur le navigateur précédent, où vous avez modifié l’application.

Versionner l’application

Normalement, vous devriez être sur le volet Enregistrer.

Cliquez sur le bouton Afficher toutes les versions : la liste des versions apparaît.

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

Liste des versions
Liste des versions

Dans cet exemple, vous avez 3 versions. La dernière version (Version 3) est celle qui vient d’être publiée : elle est dans un état Actif. Vous allez restaurer la version précédente.

Pour ce faire, cochez la case de la version précédente.

Dans la bannière (en haut), cliquez sur Restaurer : un pop-up vous demande de confirmer la restauration.

Dans ce pop-up, cliquez sur le bouton Restaurer.

Si un message vous indique que l’application est verrouillée, fermez les autres onglets PowerApps et recommencez.

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

Version restaurée
Version restaurée

Faites attention que la version a bien été restaurée mais qu’elle n’est pas encore publiée. Si vous souhaitez réellement revenir à la version précédente en production, vous devez la publier.

Pour ce faire, cliquez sur les 3 petits points (“…”) en face de la dernière version, puis cliquez sur Publier cette version : un volet s’ouvre.

Dans ce volet, cliquez sur le bouton Publier cette version.

Une fois que vous l’aurez fait, vous vérifierez que les modifications ont été publiées grâce au compte d’Alice. Notamment, vous constaterez que les valeurs du stock sont à nouveau alignées à gauche.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment publier et restaurer une version d’une application PowerApps.

Vous avez pu aussi vérifier les conséquences de la publication.

Article mis à jour le 11.10.2019

Catégories
Consultant, Formateur

Partager et Autoriser une application PowerApps

Cet exemple vous explique comment partager une application PowerApps, grâce à une série d’autorisations.

Prérequis

  • Créez un compte dans Office 365, comme celui d’Alice Martin.
  • Attribuez une licence Office 365 au compte Alice Martin avant de commencer l’exercice.
  • L’exercice du TP Créer une application PowerApps doit être terminé avec succès.
  • La liste lstFruits doit exister dans votre site SharePoint.

Partager 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 volet central, cochez la case en face d’une application déjà publiée, afin de la sélectionner. Dans ce scénario, il s’agit de l’application qui s’intitule canFruits.

Dans la bannière (en haut), cliquez sur Partager : un grand volet s’ouvre à droite.

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.

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

Partage d'une application PowerApps
Partage d’une application PowerApps

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

Vous pourriez éventuellement autoriser Alice à être copropriétaire de l’application en cochant la case Copropriétaire. Dans ce cas, elle pourrait aussi modifier ou partager l’application. Toutefois, elle ne pourrait pas la supprimer ou modifier les propriétaires. Même s’il existe plusieurs propriétaires, une seule personne peut modifier une application à un instant t. Il n’est pas possible que deux personnes puissent modifier simultanément l’application. Pour l’instant, ne cochez pas la case Copropriétaire.

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

Partage en cours d'une application PowerApps
Partage en cours d’une application PowerApps

Ne fermez pas ce volet.

Définir des autorisations de la source de données

L’application sélectionnée manipule les données d’un site SharePoint. Vous devez donc donner les autorisations suffisantes sur SharePoint aux utilisateurs avec lesquels vous partagez l’application.

Puisque le site SharePoint qui porte votre prénom hérite par défaut des autorisations du site Extranet, vous allez partager le site SharePoint Extranet avec Alice.

Pour ce faire, ouvrez le site SharePoint Extranet.

Dans le coin supérieur droit de votre site, cliquez sur l’icône membre : un volet s’ouvre.

Dans ce volet, cliquez sur Ajouter des membres.

Dans la boîte de dialogue, entrez Alice puis cliquez sur le bouton Enregistrer.

Une fois que le partage du site SharePoint est fait, revenez au volet de partage de l’application PowerApps.

Au bas du panneau de partage, cliquez sur le bouton Partager.

Par défaut, les utilisateurs concernés recevront un email pour les prévenir que l’application est partagée avec eux. Celui-ci contient un lien qui ouvre l’application. Si l’utilisateur ouvre le lien à partir d’un appareil mobile, l’application s’ouvre dans PowerApps Mobile. Si l’utilisateur ouvre le lien à partir d’un ordinateur de bureau, l’application s’ouvre dans un navigateur.

Les copropriétaires de l’application recevront un email supplémentaire. Celui-ci contient un lien qui ouvre l’application pour la modifier.

Tester le partage

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

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://portal.office.com

Renseignez le compte de l’utilisateur Alice puis son mot de passe.

Si vous avez oublié le compte ou le mot de passe de l’utilisateur, vous pouvez les récupérer dans votre email.

É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 Outlook : un nouvel onglet s’ouvre.

Dans le nouvel onglet, sélectionnez votre fuseau horaire : (UTC+01:00) Brussels, Copenhagen, Madrid, Paris puis cliquez sur Enregistrer.

Une fois que Outlook est ouvert, fermez les pop-ups qui surgissent éventuellement.

Dans Outlook, cherchez et ouvrez le message qui vous indique que l’application PowerApps est partagée avec vous.

Dans ce message, cliquez sur le bouton Ouvrez l’application : le pop-up d’autorisation s’affiche.

Si vous ne voyez qu’un écran blanc, c’est probablement parce que l’application n’a pas été publiée. Publiez l’application et partagez à nouveau l’application avec Alice.

Sous SharePoint, cliquez sur Afficher les autorisations afin d’obtenir la liste des autorisations nécessaires pour faire fonctionner l’application. Notamment, l’application peut Lire les noms de listes et de bibliothèques, ainsi que les noms des colonnes ; Créer, lire mettre à jour, copier et supprimer des fichiers et des métadonnées ; Créer, lire, mettre à jour et supprimer des éléments de liste.

Cette manipulation est nécessaire pour des raisons de sécurité. En effet, vous devez vous assurer que les autorisations nécessaires sont cohérentes avec l’objet de l’application.

Cliquez sur le bouton Fermer, pour fermer la fenêtre de SharePoint.

Cliquez sur le bouton Autoriser : l’application se lance.

Dans la zone Rechercher des éléments, tapez la lettre i : tous les fruits avec cette lettre restent affichés (Citron, Mandarine).

Enlevez la lettre i dans la zone de recherche.

Cliquez deux ou trois fois sur l’icône de tri afin de vérifier que les éléments sont triés en ordre croissant ou décroissant sur le nom du fruit.

Fermez l’onglet de l’application.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment partager une application publiée. Vous avez pu vérifier que l’utilisateur pouvait manipuler l’application.

Article mis à jour le 04.10.2019

Catégories
Consultant, Formateur

Créer des listes en cascade dans PowerApps

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

Objectif

Les listes en cascade sont basées généralement sur au moins deux listes déroulantes. Il y a une relation de dépendance entre ces listes déroulantes.

Par exemple, une première liste des départements énumère les départements. Lorsque l’utilisateur sélectionne un département dans cette liste déroulante, la seconde liste déroulante affiche les villes du département.

Ce mécanisme est très pratique. En effet, il réduit la quantité d’informations exposées à l’utilisateur. Celui-ci peut donc faire son choix plus efficacement.

Dans l’exemple de cet exercice, une liste déroulante va afficher la liste des identifiants des fournisseurs de la liste lstAffaires. Une seconde liste déroulante affichera la liste des affaires du fournisseur sélectionné.

Prérequis

  • La liste lstAffaires doit exister dans votre site SharePoint.

Créer une application PowerApps

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

https://make.powerapps.com/

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

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

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

Dans le volet central du nouvel onglet et sous Démarrer avec un modèle ou un canevas vierge, cliquez sur Disposition de la tablette sous Application vide, puis patientez.

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

Démarrer avec un modèle tablette
Démarrer avec un modèle tablette

Notez que vous auriez pu aussi bien choisir le mode téléphone sous Application vide, car les manipulations sont strictement identiques. Il s’agit d’un choix purement arbitraire.

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

Enregistrer et renommer l’application

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

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

En bas, cliquez sur le bouton Enregistrer.

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

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.

Se connecter aux données

Dans le menu du haut, cliquez sur le ruban Affichage.

Sous Affichage, cliquez sur Source de données : le volet Source de données apparaît à gauche.

En haut du volet Source de données, cliquez dans la zone Rechercher…

Dans cette zone de recherche, saisissez SharePoint puis cliquez sur l’icône bleue SharePoint aide les organisations à partager : ne cliquez pas sur les icônes violettes Common Data Service.

Dans la liste qui s ‘affiche, cliquez sur la première connexion SharePoint : la liste des sites récents apparaît.

Patientez quelques instants.

Dans cette liste, sélectionnez votre site SharePoint.

Sous Choisir une liste, cochez la case lstAffaires, puis cliquez sur Se connecter (en bas du volet).

Lorsque la connexion est terminée, cliquez sur la croix en haut et à droite du volet Source de données pour fermer ce volet.

Insérer et définir un premier contrôle Liste déroulante (Dropdown)

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

Cliquez sur le ruban Insérer puis cliquez sur Contrôles puis cliquez sur Liste déroulante : une liste déroulante apparaît sur l’écran Screen1. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1: Dropdown1.

Dans l’arborescence, double-cliquez sur Dropdown1, et nommez-le : ListeDeroulanteFournisseur.

Ensuite, définissez les propriétés suivantes de ListeDeroulanteFournisseur :

Items = Distinct(lstAffaires.FournisseurID;FournisseurID)

Cette liste déroulante affiche les identifiants des fournisseurs. Chaque identifiant est un nombre qui se termine par 5.

La fonction Distinct() élimine les doublons d’une liste de valeurs. Par ailleurs, elle retourne une table à une colonne des résultats avec des valeurs en double supprimées. Le nom de la colonne est result. Dans le cas présent, la fonction dédoublonne les valeurs en double de la colonne FournisseurID.

Pour en savoir plus sur Distinct(), consultez la page de Microsoft dédiée aux fonctions : https://coudr.com/powfn.

Petite astuce : la fonction Dictinct() permet de forcer l’alimentation d’une liste déroulante. En effet, il arrive que PowerApps ne renseigne pas le champ de la liste déroulante lors du premier accès à l’écran. L’utilisation, même temporaire, de cette fonction oblige PowerApps à alimenter la liste déroulante.

Insérer et définir un second contrôle Liste déroulante (Dropdown)

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

Cliquez sur le ruban Insérer puis cliquez sur Contrôles puis cliquez sur Liste déroulante : une liste déroulante apparaît sur l’écran Screen1. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1: Dropdown1.

Déplacez légèrement le contrôle sous le premier, afin de bien voir les deux contrôles.

Dans l’arborescence, double-cliquez sur Dropdown1, et nommez-le : ListeDeroulanteAffaires.

Ensuite, définissez les propriétés suivantes de ListeDeroulanteAffaires :

Items = Distinct(Filter(lstAffaires;FournisseurID = ListeDeroulanteFournisseur.Selected.Result);Titre)

Cette liste déroulante affiche les affaires qui dépendent du fournisseur sélectionné dans la liste déroulante précédente.

Insérer et définir un contrôle Formulaire d’affichage (Display Form)

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

Cliquez sur le ruban Insérer puis cliquez sur Formulaires puis cliquez sur Affichage : un formulaire d’affichage apparaît sur l’écran Screen1.

Ensuite, définissez les propriétés suivantes du formulaire d’affichage :

DataSource = lstAffaires

Ensuite, cliquez sur le lien Choisissez les champs à ajouter à partir du volet Personnalisation. Ce lien se trouve dans le formulaire.

Dans le volet Champs qui s’ouvre, cliquez sur Ajouter un champ.

Cochez :

  • Titre
  • Responsable
  • MontantHT

Puis cliquez sur le bouton Ajouter.

Fermez le volet Champs.

Dans l’onglet Propriétés, modifiez la valeur de la propriété Colonnes de 3 à 1 : les champs se retrouvent l’un en-dessous de l’autre.

Ensuite, définissez les propriétés suivantes du formulaire d’affichage :

Item = LookUp(lstAffaires; Titre = ListeDeroulanteAffaires.Selected.Result)
Heigh = 358
Width = 436
X = 146
Y = 200

La fonction LookUp() utilise 2 paramètres. Le premier paramètre indique la source de données utilisée. Le second paramètre est une formule de filtre.

Dans ce scénario, la fonction LookUp() cherche dans la liste lstAffaires, l’élément dont le titre est égal au choix de la seconde liste déroulante.

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.

Résultat des listes en cascade
Résultat des listes en cascade

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

Bonus : tri des éléments des listes déroulantes.

Les listes déroulantes ne sont pas triées.

Vous devez les trier dans l’ordre alphabétique du résultat.

Pour cela, utilisez la fonction SortByColumns() pour trier les éléments des listes déroulantes en ordre descendant.

Pour savoir comment utiliser la fonction SortByColumns(), consultez la page de Microsoft dédiée aux fonctions : https://coudr.com/powfn.

Résumé

Dans cet exercice, vous avez appris comment réaliser des listes en cascade dans PowerApps, à partir d’une source de données.

Vous avez aussi vu comment afficher le résultat d’une sélection d’une liste déroulante.

Article mis à jour le 28.09.2019.

Catégories
Consultant, Formateur

Développer une véritable application PowerApps de A à Z

L’objectif de cet exercice est de découvrir le développement d’une véritable application PowerApps de A à Z.

C’est aussi l’occasion d’apprendre une technique de développement, orientée interface. Outre les explications techniques, les choix ergonomiques et de développement sont explicités : taille des contrôles, choix de boutons et non d’icônes, etc.

Vous verrez aussi une alternative possible dans la méthodologie de développement.

Préparation

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

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

Modification de l'application PowerApps TabEcrans
Modification de l’application PowerApps TabEcrans

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 PowerApps TabEcrans en modification (vue partielle)
Application PowerApps TabEcrans en modification (vue partielle)

Se connecter aux données

Dans le menu du haut, cliquez sur le ruban Affichage.

Sous Affichage, cliquez sur Source de données : le volet Source de données apparaît à gauche.

En haut du volet Source de données, cliquez dans la zone Rechercher…

Dans cette zone de recherche, saisissez SharePoint puis cliquez sur l’icône bleue SharePoint aide les organisations à partager : ne cliquez pas sur les icônes violettes Common Data Service.

Dans la liste qui s ‘affiche, cliquez sur la première connexion SharePoint : la liste des sites récents apparaît. Patientez quelques instants.

Dans cette liste, sélectionnez votre site SharePoint.

Sous Choisir une liste, cochez la case lstFruits, puis cliquez sur Se connecter (en bas du volet).

Lorsque la connexion est terminée, cliquez sur la croix en haut et à droite du volet Source de données pour fermer ce volet.

Modifier le premier écran

L’application sera utilisée par des personnes qui travaillent sur des tablettes durcies, dans un environnement hostile avec beaucoup de poussière. Dans ce cas, il est préférable d’utiliser des gros boutons, plutôt que des icones.

Dans l’écran EcranPrincipal, supprimez le contrôle Hexagone avec le bouton Suppr de votre clavier.

Définissez le contrôle Bouton avec les propriétés suivantes :

Color = Couleurs.Color
Fill = Couleurs.Fill
Height = 84
Size = 28
Width = 304
X = 1046
Y = 668

Insérez un autre contrôle Bouton avec les propriétés suivantes :

Color = Couleurs.Color
Fill = Couleurs.Fill
Height = 84
Size = 28
Width = 304
X = 22
Y = 668

Vous pouvez aussi copier-coller un contrôle puis modifier les valeurs des propriétés de la copie.

Insérez un contrôle icône de type Rectangle avec les propriétés suivantes :

Fill = Couleurs.Fill
Height = 100
Width = 1366
X = 0
Y = 0

Insérez un contrôle Étiquette avec les propriétés suivantes :

Align = Align.Center
Color = Couleurs.Color
Fill = Couleurs.Fill
Height = 100
Size = 28
Text = "Fruits frais"
Width = 1366
X = 0
Y = 0

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

Écran mis à jour
Écran mis à jour

Cet écran va vous servir de modèle pour l’écran suivant.

Dupliquer l’écran principal pour lister

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

Maintenant, vous allez renommer l’écran dupliqué.

Pour ce faire, dans l’arborescence (à gauche), double-cliquez sur l’écran EcranPrincipal_1 puis tapez son nouveau nom : EcranListe.

Ensuite, dans l’écran EcranListe, supprimez les deux contrôles Bouton avec le bouton Suppr de votre clavier.

Puis vous allez déplacer l’écran dupliqué, afin de le remonter tout en haut.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran EcranListe puis cliquez sur les points de suspension (…) et sélectionnez Monter.

Insérer un contrôle Galerie (Gallery)

Sur l’écran EcranListe, vous allez insérer un contrôle Galerie vertical.

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

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

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

Dans la liste des modèles, sélectionnez Verticale.

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

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.

Ensuite, définissez les propriétés suivantes de Gallery1 :

Height = 568
Items = lstFruits
Width = 1366
X = 0
Y = 100

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 Stock.
  • Dans la zone Subtitle2, sélectionnez Saisons.
  • Dans la zone Title2, sélectionnez Title.

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

Vous obtenez l’affichage de la liste des fruits.

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

Galerie mise en forme (vue partielle)
Galerie mise en forme (vue partielle)

Ensuite, définissez les propriétés suivantes de NextArrow2 :

Color = Couleurs.Color

Puis, définissez les propriétés suivantes de Separator2 :

Fill = Couleurs.Fill

Vous allez faire apparaître le nom du producteur entre parenthèse, à coté du nom du fruit.

Pour ce faire, définissez les propriétés suivantes de Title2 :

Text = ThisItem.Titre & " (" & Producteur & ")"

Le champ producteur de la liste SharePoint est volontairement vide, il est donc normal que la parenthèse soit vide. Toutefois, vous devez vous mettre à la place de l’utilisateur de votre application. Celui-ci peut ne pas comprendre la présence de cette paire de parenthèse vide. Vous allez donc rajouter une information qui indique que la provenance est inconnue quand le champ producteur est vide.

Pour ce faire, redéfinissez les propriétés suivantes de Title1 :

Text = ThisItem.Titre & " (" & If(IsBlank(Producteur); "Provenance inconnue"; Producteur) & ")"

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

Nouvelle mise en forme de la galerie (vue partielle)
Nouvelle mise en forme de la galerie (vue partielle)

Cependant, cette mise en forme ne vous convient pas. Vous voulez que le contenu formaté du champ producteur se trouve à côté du champ titre.

Avec la souris, redimensionnez le champ Title2 pour qu’il occupe moins de la moitié de la largeur. La hauteur reste inchangée.

Title2.Height = Title2.Size * 1,8 (soit 36)
Title2.Width = Parent.TemplateWidth – 740 (soit 626)

Ensuite, copiez-collez le champ Title2: vous obtenez un nouveau champ Title2_1. Renommez Title2_1 en Producteur1. Ensuite, avec la souris, déplacez Producteur1 à coté de Title1.

Producteur1.X = 675
Producteur1.Y = 18 

Définissez les propriétés suivantes de Producteur1:

Producteur1.Text = If(IsBlank(Producteur); "Provenance
inconnue"; "Producteur: " & Producteur)

Définissez les propriétés suivantes de Title2 :

Title2.Text = ThisItem.Titre

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

Dernière mise en forme de la galerie (vue partielle)
Dernière mise en forme de la galerie (vue partielle)

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

Sur l’écran EcranListe, vous allez insérer un contrôle Icône Ajouter.

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

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

Sous Insérer, cliquez sur Icônes : la liste des icônes apparaît.

Dans la liste des modèles, sélectionnez + Ajouter.

Ensuite, définissez les propriétés suivantes de Icon1 :

Color = Couleurs.Color
X = 1276
Y = 18

Dupliquer l’écran principal pour afficher

Il faut ensuite développer l’écran détail pour afficher le détail d’un élément.

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

Maintenant, vous allez renommer l’écran dupliqué.

Pour ce faire, dans l’arborescence (à gauche), double-cliquez sur l’écran EcranPrincipal_1 puis tapez son nouveau nom : EcranDetail.

Puis vous allez déplacer l’écran dupliqué, afin de le remonter au-dessus de l’écran EcranPrincipal.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran EcranDetail puis cliquez sur les points de suspension (…) et sélectionnez Monter.

Insérer un contrôle Formulaire (Form)

Sur l’écran EcranDetail, vous allez insérer un contrôle Formulaire.

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

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

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

Dans la liste des modèles, sélectionnez Affichage.

Par défaut, le contrôle FormViewer1 est sélectionné. Si ce n’est pas le cas, dans l’arborescence (à gauche), cliquez sur le contrôle FormViewer1.

Ensuite, définissez les propriétés suivantes de FormViewer1 :

DataSource = lstFruits
Height = 568
Item = Gallery1.Selected
Width = 1366
X = 0
Y = 100

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

Cliquez sur Ajouter un champ : une petite fenêtre s’ouvre dans le volet Champs. Descendez l’ascenseur de cette petite fenêtre jusqu’en bas, pour faire apparaître les champs qui vous intéressent.

Cochez :

  • Producteur
  • Saisons
  • Stock
  • Titre

Puis cliquez sur le bouton Ajouter.

Cliquez sur la flèche à gauche du nom de chaque champ, pour réduire le détail affiché. Vous devrez donc le faire 4 fois.

Avec la souris, déplacez les champs pour être dans cet ordre.

  • Titre
  • Stock
  • Saisons
  • Producteur

Fermez le volet Champs.

Ce formulaire est utilisé par des personnes qui travaillent sur des tablettes durcies, dans un environnement hostile avec beaucoup de poussière. Vous allez grossir la taille des polices.

Pour ce faire, modifiez la Hauteur de toutes les cartes à 250.

Puis, modifiez la Taille de police de tous les DataCardKey à 32.

Ensuite, modifiez la Taille de police de tous les DataCardValue à 48.

Enfin, modifiez la Hauteur de tous les DataCardValue à 87.

Vous allez afficher les champs sur 2 colonnes.

Pour ce faire, cliquez sur FormViewer1, puis changez la valeur de la propriété Colonnes à 2 (au lieu de 3).

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

Formulaire de détail mis en forme (vue partielle)
Formulaire de détail mis en forme (vue partielle)

Enfin, définissez les propriétés du bouton de gauche : Button2_1.

OnSelect = Navigate(EcranListe;ScreenTransition.Fade)
Text = "Accueil"

Le choix a été fait d’associer un bouton pour revenir à l’accueil.

Insérer un contrôle Bouton (Button)

Sur l’écran EcranDetail, vous allez insérer un contrôle Bouton.

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

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

Sous Insérer, cliquez sur Bouton : un bouton s’affiche.

Définissez le contrôle Bouton avec les propriétés suivantes :

Color = Couleurs.Color
Fill = Couleurs.Fill
Height = 84
Size = 28
Width = 304
X = 534
Y = 668

Dupliquer l’écran principal pour modifier

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

Maintenant, vous allez renommer l’écran dupliqué.

Pour ce faire, dans l’arborescence (à gauche), double-cliquez sur l’écran EcranPrincipal_1 puis tapez son nouveau nom : EcranModification.

Puis vous allez déplacer l’écran dupliqué, afin de le remonter au-dessus de l’écran EcranPrincipal.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran EcranModification puis cliquez sur les points de suspension (…) et sélectionnez Monter.

Insérer un contrôle Formulaire (Form)

Sur l’écran EcranModification, vous allez insérer un contrôle Formulaire.

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

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

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

Dans la liste des modèles, sélectionnez Modifier.

Par défaut, le contrôle Form1 est sélectionné. Si ce n’est pas le cas, dans l’arborescence (à gauche), cliquez sur le contrôle Form1.

Ensuite, définissez les propriétés suivantes de Form1 :

DataSource = lstFruits
Height = 568
Item = Gallery1.Selected
Width = 1366
X = 0
Y = 100

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

Cliquez sur Ajouter un champ : une petite fenêtre s’ouvre dans le volet Champs. Descendez l’ascenseur de cette petite fenêtre jusqu’en bas, pour faire apparaître les champs qui vous intéressent.

Cochez :

  • Producteur
  • Saisons
  • Stock
  • Titre

Puis cliquez sur le bouton Ajouter.

Cliquez sur la flèche à gauche du nom de chaque champ, pour réduire le détail affiché. Vous devrez donc le faire 4 fois.

Avec la souris, déplacez les champs pour être dans cet ordre.

  • Titre
  • Stock
  • Saisons
  • Producteur

Fermez le volet Champs.

Ce formulaire est utilisé par des personnes qui travaillent sur des tablettes durcies, dans un environnement hostile avec beaucoup de poussière. Vous allez grossir la taille des polices.

Pour ce faire, modifiez la Hauteur de toutes les cartes à 250.

Puis, modifiez la Taille de police de tous les DataCardKey à 32.

Ensuite, modifiez la Taille de police de tous les DataCardValue à 48.

Enfin, modifiez la Hauteur de tous les DataCardValue à 87.

Vous allez afficher les champs sur 2 colonnes.

Pour ce faire, cliquez sur Form1, puis changez la valeur de la propriété Colonnes à 2 (au lieu de 3).

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

Formulaire de modification mis en forme (vue partielle)
Formulaire de modification mis en forme (vue partielle)

Maintenant, définissez les propriétés du bouton de gauche : Button2_2.

OnSelect = Back(ScreenTransition.Fade)
Text = "Retour"

Ensuite, définissez les propriétés du bouton de droite : Button1_2.

OnSelect = SubmitForm(Form1);;Navigate(EcranListe;ScreenTransition.Fade)
Text = "Valider"

Finaliser la navigation de l’écran qui liste

La navigation entre les écrans a été partiellement mise en œuvre. Toutefois, certaines actions de navigation ne peuvent être mises en œuvre que lorsque les éléments sont présents. C’est la raison pour laquelle cette navigation est faite à la fin.

Bien évidemment, vous pourriez changer de méthode de développement. Pour des raisons pédagogiques, le choix a été fait de rentrer tout de suite dans le détail de chaque écran afin de diminuer les manipulations.

Toutefois, si vous avez une vision d’ensemble des tous les composants de PowerApps, vous pouvez d’abord créer tous les objets nécessaires à votre application : écrans, formulaires, etc. Ensuite, vous pouvez préciser le paramétrage de chaque contrôle.

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

Cliquez sur le contrôle NextArrow2.

Définissez la propriété suivante de NextArrow2 :

OnSelect = Navigate(EcranDetail;ScreenTransition.Fade)

Cliquez sur le contrôle Icon1.

Définissez la propriété suivante de Icon1 :

OnSelect = NewForm(Form1);;Navigate(EcranModification;ScreenTransition.Fade)

Finaliser la navigation de l’écran qui détaille

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

Définissez les propriétés du contrôle Bouton de droite : Button1_1.

OnSelect = EditForm(Form1);;Navigate(EcranModification;ScreenTransition.Fade)
Text = "Modifier"

Définissez les propriétés du contrôle Bouton du milieu : Button3.

OnSelect = Remove(lstFruits;Gallery1.Selected);;Navigate(EcranListe;ScreenTransition.Fade)
Text = "Supprimer"

Enregistrer et exécuter l’application

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

Cliquez sur l’icône Aperçu en forme de triangle (en haut, à droite) ou appuyez sur la touche F5.

Vérifiez que vous pouvez :

  • Afficher la liste des éléments.
  • Afficher un élément.
  • Ajouter un élément.
  • Modifier un élément.
  • Supprimer un élément.
  • Naviguer d’un écran à un autre.

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 découvert le développement d’une véritable application PowerApps de A à Z, à travers une technique de développement, orientée interface.

Article mis à jour le 24.09.2019.

Catégories
Consultant, Formateur

Personnaliser le thème d’un écran PowerApps

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

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

Cas d’usage

Il est fréquent qu’il soit demandé que le jeu de couleurs d’une application soit modifié ou personnalisé. Dans cet exemple, vous verrez une première manipulation qui permet d’appliquer un jeu de couleur à une application.

Ensuite, des astuces sont introduites pour aider l’application à être maintenable. Notamment, vous verrez comment tirer parti de PowerApps pour changer le jeu de couleurs des contrôles sans avoir à tout modifier.

En particulier, vous découvrirez comment définir les propriétés d’un contrôle à l’aide des propriétés d’un autre contrôle.

Créer une application PowerApps

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

https://make.powerapps.com/

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

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

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

Dans le volet central du nouvel onglet et sous Démarrer avec un modèle ou un canevas vierge, cliquez sur Disposition de la tablette sous Application vide, puis patientez.

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

Démarrer avec un modèle tablette
Démarrer avec un modèle tablette

Notez que vous auriez pu aussi bien choisir le mode téléphone sous Application vide, car les manipulations sont strictement identiques. Il s’agit d’un choix purement arbitraire.

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

Enregistrer et renommer l’application

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

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

En bas, cliquez sur le bouton Enregistrer.

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

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

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.

Renommer le premier écran

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

Renommez en EcranPrincipal.

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

Insérer un contrôle Bouton (Button)

Sur l’écran EcranPrincipal, vous allez insérer un bouton. Ce bouton sert uniquement à vérifier l’impact du changement de thème que vous ferez ensuite.

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

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

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

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

Bouton avec couleur initiale
Bouton avec couleur initiale

Changer le thème

Maintenant, vous allez changer le thème cette application. Le thème est un jeu de couleurs.

Pour ce faire, cliquez sur le ruban Accueil : la liste des sous-menus apparaît (sous Accueil).

Dans cette liste, cliquez sur Thème. Dans la liste des thèmes, sélectionnez le thème de votre choix, par exemple Corail.

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

Bouton avec un nouveau thème
Bouton avec un nouveau thème

Le thème a bien été changé pour le bouton existant, mais que se passerait-il si vous ajoutiez un nouveau contrôle ? Les nouveaux contrôles, comme les contrôles existants, bénéficieront du nouveau thème.

Pour le vérifier, vous allez ajouter un élément graphique sur l’écran EcranPrincipal.

Insérer une icône

Sur l’écran EcranPrincipal, vous allez insérer un hexagone étoile. Cet hexagone sert uniquement à vérifier l’impact du changement de thème.

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

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

Sous Insérer, cliquez sur Icônes : une liste d’icônes apparait avec un ascenseur à droite. Descendez l’ascenseur complètement tout en bas. Dans la liste, cliquez sur Hexagone, puis déplacez le pour le mettre à coté de Bouton.

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

Bouton avec nouveau thème
Bouton avec nouveau thème

Comme prévu, le nouveau contrôle bénéficie du thème par défaut.

L’utilisation d’un thème est évidemment pratique. Toutefois, il arrive souvent que les jeux de couleurs de votre organisation ne correspondent pas aux thèmes prédéfinis.

Vous allez voir une autre technique qui permet d’avoir une personnalisation des couleurs.

Ajouter un nouvel écran

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

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

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

Renommer le second écran

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

Renommez en EcranMaitre.

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

Insérer un contrôle Étiquette (Label)

Sur l’écran EcranMaitre, vous allez insérer un contrôle de type Étiquette.

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

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

Sous Insérer, cliquez sur Étiquette : une étiquette apparaît sur l’écran EcranMaitre. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous EcranMaitre : Label1.

Renommer le contrôle

Sur l’écran EcranMaitre, vous allez renommer le contrôle.

Dans l’arborescence, double-cliquez sur Label1, et nommez-le : Couleurs.

Personnaliser le contrôle

Modifiez la propriété Couleur (Color) du contrôle Couleurs pour une couleur foncée, par exemple bleu foncé : RGBA(39; 113; 194; 1). La propriété Color concerne la couleur du texte.

Modifiez la propriété Couleur d’arrière-plan (Fill) du contrôle Couleurs pour une couleur claire, par exemple jaune vif : RGBA(255; 255; 0; 1). La propriété Fill concerne le remplissage de la forme.

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

Nouvelles valeurs pour Couleurs
Nouvelles valeurs pour Couleurs

Associer le contrôle

Vous allez associer les propriétés du contrôle Couleurs aux propriétés correspondantes des contrôles de l’autre écran.

Sur l’écran EcranPrincipal, cliquez sur un des 2 contrôles présents : celui que vous voulez.

Spécifiez les valeurs suivantes pour les propriétés ci-dessous quand elles existent.

Les propriétés sont liées à la nature de chaque objet. Il est donc normal que la propriété Fill existe aussi pour l’hexagone, tandis que Color n’existe pas car il n’y a pas de texte à colorier dans ce contrôle.

Fill = Couleurs.Fill
Color = Couleurs.Color

Refaites la même personnalisation sur l’autre contrôle.

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

Couleurs personnalisées
Couleurs personnalisées

Tester le changement de couleur

Modifiez la propriété Couleur d’arrière-plan du contrôle Couleurs pour une autre couleur claire, par exemple un rouge extrêmement pale : RGBA(39; 113; 194; 1).

Affichez l’écran EcranPrincipal et constatez l’application immédiate de vos modifications.

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

Nouvelles couleurs personnalisées
Nouvelles couleurs personnalisées

Enregistrer l’application

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

Fin des manipulations

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

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment appliquer un thème et comment personnaliser les thèmes grâce à une astuce. Vous êtes aussi familiarisé un peu plus avec le fonctionnement des propriétés et des formules.

Vous comprenez aussi comment vous pouvez utiliser les propriétés d’un contrôle dans un autre.

Article mis à jour le 23.09.2019.