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.

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

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.

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 :

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.

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 :

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 :

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 !

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 » :

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 » :

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

Etape 3 : Tests par l’utilisateur

Les utilisateurs arriveront donc sur le formulaire suivant :

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