Model Driven App : Graphique dans un formulaire

« Une image vaut mieux que mille mots ». Et une représentation graphique est plus souvent parlante qu’une description. Mais comment intégrer un graphique dans un formulaire d’application de type Model Driven App ?

Un graphique dans les applications de type Model Driven App

Un des grands avantages de la Power Platform est la complémentarité des outils. Lors de différents événements, j’avais d’ailleurs montré comment intégrer Power BI dans Power Apps Portal renommé Power Pages (Club Power BI) et dans une application Canvas qui pilotait le tableau de bord (French Power Break). La Data Visualisation et les graphiques sont des points indispensables dans les solutions.

Avec les applications Power Apps pilotées par modèle, les « Model Driven App », il existe de nombreuses possibilités pour exploiter les données graphiquement. Une des premières possibilités est l’utilisation de graphiques issus de Dataverse. Il est possible de les exploiter directement dans la partie « Vues », en cliquant sur « Afficher Graphique » dans les tableaux de bord ou encore dans des formulaires de tables liées.

Par exemple, dans un projet, je souhaite voir les charges consommées par activité au niveau du détail du projet. C’est ce que je vous propose de voir aujourd’hui. Il existe toutefois des alternatives, avec notamment Power BI. Les données étant stockée dans Dataverse, l’actualisation peut être réalisée en live grâce au Direct Query (mise à jour à chaque modification).

Aussi, je vous propose aujourd’hui de voir comment intégrer un graphique Dataverse directement dans un formulaire en prenant en compte l’enregistrement sélectionné. Nous verrons comment ajuster la taille, les différentes options proposées et les limites que j’ai pu rencontrer. Vous pouvez également voir la documentation Microsoft qui explique comment faire sans toutefois proposer certaines personnalisations.

Graphique Model Driven App : le cas d’utilisation​

Je gère plusieurs projets. Pour chacun d’entre eux, je souhaite analyser la consommation des charges dans le temps et selon les activités du projet. Je souhaite voir rapidement les informations et pouvoir affiner si besoin en utilisant des vues différentes.

Pour ce cas, il faudra utiliser 3 tables :

– « Mission » : liste des projets ;

– « Workpackage » : liste des activités rattachées à un projet ;

– « Timesheet » : ensemble des charges consommées qui est remplie chaque semaine par l’ensemble des employés.

Pour la démonstration, j’utilise une version allégée avec des données fictives mais ce cas d’usage est celui que nous utilisons dans notre entreprise.

Graphiques dans Formulaire Model-driven
Pour réaliser ce cas, les étapes suivantes vont être nécessaires :

  • Création des graphiques
  • Ajout du graphique dans un formulaire
  • Tester dans l’application

Etape 1 : Création des graphiques​

Tout d’abord, pour créer les graphiques, il faut ouvrir votre Solution ou en créer une nouvelle. Pour se faire, l’étape qui suit expliquera tout ce qu’il faut savoir.

Graphiques dans Formulaire Model-driven
Graphiques dans Formulaire Model-driven
Un graphique est lié à une entité qui doit être ajoutée à la solution. Ici, ce sera la table « Timesheet » qui contient les activités remplies hebdomadairement par l’ensemble des employés. Puis ce sera au tour de l’entité « Mission » dans laquelle le formulaire sera créé. Attention : Il faut ajouter uniquement les entités sans les éléments :
Graphiques dans Formulaire Model-driven
Graphiques dans Formulaire Model-driven

A ce stade, vous pouvez voir que les deux entités ont bien été ajoutées et si vous regardez les éléments contenus dans ces entités, vous n’en trouverez pas : pas de formulaires, pas de colonnes, pas de vues. C’est normal, car les éléments existants ne doivent pas être modifiés. Vous allez en créer de nouveaux.

Graphiques dans Formulaire Model-driven
Graphiques dans Formulaire Model-driven
Ensuite, après avoir cliqué sur « Nouveau graphique », vous allez pouvoir créer les graphiques que vous insérerez dans le formulaire :
Graphiques dans Formulaire Model-driven
  1. Choix de la vue utilisée par défaut. Cela est utile lorsque qu’on utilise un graphique dans la partie VUE (bouton « Afficher Graphique ») mais ne sera pas du tout utilisé dans le formulaire. Une option vous permettra par la suite de donner la vue par défaut et les vues disponibles au niveau du formulaire.
  2. Nom du graphique. Le nom est important car il sera visible dans le formulaire et si vous l’acceptez, l’utilisateur aura la possibilité de changer le graphique.
  3. Il s’agit du calcul à insérer. Dans notre cas, ce sera la somme du champ « Total Semaine ».
  4. Type d’agrégation ou de calcul. Les choix possibles sont les suivants :
Graphiques dans Formulaire Model-driven

5. Vous pouvez choisir le type de graphique et les règles de valeurs les plus ou moins élevées (Top n ou Flop n). Dans notre cas, nous n’avons pas utilisé de règles et nous avons choisi un graphique en barres.

Graphiques dans Formulaire Model-driven

6. La catégorie définit l’axe d’analyse. Vous pouvez voir ici le Workpackage qui correspond à l’activité.
7. Description du graphique. Il est toujours utile d’expliquer à quoi correspond le graphique et comment il est utilisé. D’ailleurs vous pouvez voir que j’ai bien rempli cette partie ! 😳
8. Représentation de ce que donnera le graphique.

Lorsque vous avez terminé, cliquez sur le bouton « Enregistrer et fermer ». Et maintenant, vous pouvez recommencer avec un second graphique :

Graphiques dans Formulaire Model-driven
Nous utilisons ici un visuel « Ligne » qui est le plus cohérent pour représenter des valeurs dans le temps. Vous pouvez en rajouter autant que vous les souhaitez. Voici l’ensemble des graphiques réalisés :
Graphiques dans Formulaire Model-driven

Etape 2 : Intégrer le graphique dans un formulaire​

Maintenant que la première étape est terminée, vous allez pouvoir passer au formulaire. Allez directement dans la table où se trouvera le formulaire et créez un nouveau formulaire principal :

Graphiques dans Formulaire Model-driven
Tout d’abord commencez par mettre l’ensemble des éléments pour initialiser le formulaire avant d’y intégrer la partie graphique :
Graphiques dans Formulaire Model-driven
  1. Sélectionnez l’onglet
  2. Renseignez le nom du formulaire que vous retrouverez en haut à gauche de celui-ci. Le nom est un nom technique et ne sera donc pas affiché.
  3. Choisissez une disposition en 2 colonnes. Par défaut, il n’y a qu’une seule colonne.
  4. Il faut répartir la largeur des deux sections. Par défaut, la largeur de 50% pour chaque section. Pour notre cas, nous allons mettre 60% et 40% de façon à avoir plus de place pour afficher les champs.
  5. Ici, vous pouvez ajouter tous les champs que vous souhaitez.

Enfin, terminez en sélectionnant la section en haut à droite « New Section » et cliquez sur « Masquer l’étiquette ».

Ça y est, vous y êtes : tout est prêt pour ajouter les graphiques. Nous pourrions le faire directement depuis cette interface mais à l’heure où j’écris ce texte, il subsiste quelques petits bugs, comme la hauteur ou l’impossibilité d’avoir plusieurs graphiques basés sur la même table. Du coup, je vous propose une solution qui fonctionnera parfaitement en évitant ces petits bugs. Il faut basculer sur l’interface classique. Pour ceux qui viennent du monde Dynamics, vous arriverez dans un monde bien connu. Pour les autres, nous allons avancer pas à pas. Mais avant, pensez bien à enregistrer !

Graphiques dans Formulaire Model-driven
Une nouvelle interface apparaît, dans un nouvel onglet :
Graphiques dans Formulaire Model-driven
  1. Sélectionnez la section
  2. Cliquez sur Insérer
  3. Cliquez sur Sous-grille.

En fait, vous ajoutez une sous-grille, donc une table liée mais vous choisirez de n’afficher que le graphique.

 

L’onglet « Afficher » :

Graphiques dans Formulaire Model-driven
  1. Ajoutez un nom technique. Il est obligatoire et ne doit pas contenir d’espaces, ni de caractères spéciaux.
  2. L’étiquette sera affichée sur le visuel si la case est cochée
  3. La source de données est importantes. C’est ici qu’il faut spécifier que nous prenons uniquement les enregistrements associés, l’entité qui est sélectionnée (et donc les graphiques de cette entité) et la vue par défaut. Nous choisissons ici de voir l’ensemble des activités qui sont liées à la mission (projet).
  4. Nous donnons la possibilité à l’utilisateur de changer la vue s’il le souhaite. 3 options sont possibles : soit « désactivé » (il ne pourra pas choisir), soit il pourra accéder à toutes les vues, soit nous choisissons les vues auxquelles il aura accès. Attention : si plus tard de nouvelles vues sont ajoutées, elles ne seront pas visibles sauf si nous décidons de laisser toutes les vues (c’est ce que je recommande pour éviter des changements futurs).
  5. Sans doute le point le plus important car c’est ici que nous décidons de n’afficher que le graphique. L’utilisateur pourra modifier le graphique si la case « Afficher la sélection du graphique » est cochée. La liste déroulante permettra de définir le graphique à afficher par défaut.

 

L’onglet « Mise en forme » :

Graphiques dans Formulaire Model-driven
Le nombre de lignes va permettre de définir la hauteur du graphique. Pour toute la page, il faut choisir entre 12 et 15. Je vous laisse tester afin de voir ce qui vous convient le mieux en fonction de la situation. Finissez en cliquant sur « OK », puis enregistrez et publiez. Voici l’ordre des boutons à utiliser pour finaliser :
Graphiques dans Formulaire Model-driven

Maintenant vous pouvez revenir sur votre solution. Si une application existe déjà avec les missions, vous pouvez publier toutes les personnalisations et lancer votre application. Sinon, pour tester, il faudra créer une application Model Driven App et ajouter dans la navigation l’entité « Mission ».

Graphiques dans Formulaire Model-driven
Enregistrez, publiez et vous pouvez tester en cliquant sur « Lire » (tout est en haut à droite).

Etape 3 : Tests par l’utilisateur

Les utilisateurs arriveront donc sur le formulaire suivant :

Graphiques dans Formulaire Model-driven
Ils pourront changer de graphique à droite mais également de vue :
Graphiques dans Formulaire Model-driven
Graphiques dans Formulaire Model-driven
Graphiques dans Formulaire Model-driven

Création d’un graphique dans un formulaire Model Driven App : Avantages et limites

Créer des graphiques directement dans la nouvelle interface de formulaire est également possible mais les options restent insuffisantes avec quelques bugs comme l’impossibilité de régler la hauteur, d’avoir deux graphiques basés sur la même table dans le même onglet. Il est donc conseillé aujourd’hui de passer par l’interface classique. Ce type de graphique est rapide à mettre en œuvre et est actualisé dès le moindre changement de données.

En revanche, il est difficile de personnaliser beaucoup plus. Pour cela, il faudra soit passer par des PCF qui proposent des visuels répondant à vos besoins, soit utiliser Power BI et toute la richesse qu’il peut proposer.

Plus d’articles Microsoft Power Platform

Power BI : remplacer les accents et caractères spéciaux dans Power Query

Power BI : remplacer les accents et caractères spéciaux dans Power QueryPower Query est sensible à la casse, aux accents et caractères spéciaux. Lorsque je souhaite croiser des données, il m'est souvent très utile de remplacer ces caractères dans une colonnes texte....

Simulation et scénario avec Power BI

Power BI est un outil décisionnel de visualisation interactive des données. Une fonctionnalité très puissante est la création de simulations. A travers un exemple simple, nous allons voir comment faire.

▶ Intégrer Power Apps Portal, Dataverse et Power BI !

Conférence de Jérémy Laplaine et Gilles Pommier sur l’intégration Power Apps Portal, Dataverse et Power BI au Power Platform French Summit

Exporter des données Dataverse dans un CSV depuis Power Apps

Exporter des données Dataverse dans CSV depuis Power AppsExporter des données Dataverse dans un fichier CSV depuis Power Apps ne me paraissait, à première vue, pas très compliqué. Mais quand j'ai commencé à regarder, j'ai fait face à de très nombreux problèmes. Du...

Power BI : changer d’indicateur facilement grâce aux segments

Comment afficher un visuel sous plusieurs angles différents ?
Par exemple, comment passer d’un montant à un volume ?

En utilisant les segments de Microsoft Power BI et la fonction Switch, ce tutoriel vous accompagne pas à pas pour réaliser un visuel avec un affichage alternatif.

Regrouper et organiser des mesures Power BI

Dans Power BI, beaucoup de mesures autonomes peuvent être créées. Elles ne sont rattachées à aucune table en particulier. De ce fait, il peut être très compliqué de les retrouver.
Alors, comment les organiser pour les utiliser plus facilement ?

▶ Créer un site web externe avec Power Apps Portal & Power BI – Conférence au Club Power BI

Conférence de Jérémy Laplaine au club Power BI du 12-04-2021 – Créer un site web externe avec Power Apps Portal & Power BI

▶ Power Apps Portal + CDS + Power BI : le combo gagnant !

Conférence de Jérémy Laplaine et Gilles Pommier – Retour d’expérience Power Apps Portal au Global Microsoft 365 Developer Bootcamp

▶ Power Saturday 2020 – Réaliser un site web Microsoft Power Platform

Retour d’expérience de Jérémy Laplaine et Gilles Pommier

Creation d’un portail web Power Apps Portal avec des connexions tiers (Google, Facebook…) en utilisant pleinement les fonctionnalités de Microsoft Power Platform