Rendre vos rapports interactifs avec le Web Report Designer

Ajouter de l’interactivité à votre rapport signifie ajouter seulement deux éléments dans Telerik Web Report Designer : un filtre pour contrôler vos données et un paramètre de rapport pour transmettre ces données.

Dans un étude de cas antérieure en utilisant le Concepteur de rapports Web du Progrès Reportage Telerikje vous ai montré comment combiner un graphique avec plusieurs tableaux qui vous permettaient à la fois de voir les données du graphique (à gauche) et d’explorer des données plus détaillées pour n’importe quelle colonne affichée dans le graphique (dans le tableau sous le graphique).

Mais, pour voir les détails d’une catégorie, vous devez basculer vers le panneau de recherche à droite du rapport et sélectionner la catégorie pour laquelle vous souhaitez obtenir des données détaillées. S’il n’y a que cinq ou six éléments parmi lesquels choisir, ce n’est pas un problème. Mais à mesure que le nombre d’entrées dans le graphique augmente et que la liste des éléments dans le panneau de recherche s’allonge, trouver la bonne entrée dans la liste devient de plus en plus difficile.

Il serait considérablement plus efficace si vous pouviez simplement cliquer sur une colonne du graphique pour que le tableau affiche les données détaillées. Non seulement cela aurait l’air plus cool, mais cela éliminerait le besoin de la liste de recherche et libérerait plus d’espace sur le rapport pour les données.

Eh bien, vous pouvez avoir ce rapport plus efficace (et plus cool) : il vous suffit d’ajouter deux éléments à votre rapport.

Configuration pour l’interactivité : filtres et paramètres de rapport

Examen rapide du meilleur rapport : mon rapport amélioré contient un graphique montrant la quantité totale disponible pour chaque catégorie de produits (boissons, produits, etc.). Lorsque j’ai créé le graphique à l’aide de l’assistant Graphique à colonnes, j’ai défini les catégories du graphique sur le champ CategoryName de ma source de données et les valeurs du graphique sur le champ Quantité disponible de ma source de données.

Le tableau est défini sur la même source de données, donc si je ne le filtre pas, le tableau affichera une ligne pour chaque produit, chaque ligne indiquant le nom du produit, la quantité disponible et la quantité en commande.

Pour qu’un tableau (ou, d’ailleurs, un autre graphique) affiche les informations d’une colonne sélectionnée dans votre graphique, vous devez ajouter un filtre au tableau. Pour cette étude de cas, je vais ajouter un filtre au tableau basé sur le même champ que les catégories de mon graphique : le champ CategoryName de la source de données. Pour qu’un clic sur le graphique définisse un filtre sur le tableau, vous avez besoin d’un paramètre de rapport pour transmettre les données. Je vais créer un paramètre de rapport appelé CatName pour lier mon graphique au filtre de ma table.

Vous devez commencer par créer le paramètre de rapport et, pour ce faire, vous devez obtenir le panneau de droite pour afficher les paramètres de votre rapport. C’est simple : cliquez dans la fenêtre principale du concepteur et continuez à appuyer sur la touche Échap jusqu’à ce que le panneau de droite affiche le nom de votre rapport.

Ensuite, dans ce panneau de droite, recherchez la section Paramètres du rapport et cliquez sur le signe plus à sa droite pour ouvrir une boîte de dialogue Ajouter un nouvel élément.

Pour définir votre paramètre de rapport dans la boîte de dialogue :

1. Cochez la case Autoriser Null pour empêcher le filtrage lorsque l’utilisateur n’a rien sélectionné dans le graphique.

2. Définissez la zone de texte Nom pour appeler le paramètre quelque chose dont vous vous souviendrez (j’ai choisi « CatName »).

3. Définissez le type de données pour qu’il corresponde au type du champ que vous allez filtrer dans le tableau (dans mon cas, je vais filtrer sur le champ CategoryName qui est une chaîne).

4. Maintenant que vous avez défini un paramètre pouvant être défini à partir d’un point de données dans le graphique, cliquez sur le bouton Enregistrer pour le créer.

Maintenant que le paramètre de rapport est créé, vous pouvez passer à la création de votre filtre.

Pour cela, dans le designer, sélectionnez le tableau en cliquant dans le coin supérieur droit de la bordure du tableau (vous pouvez faire apparaître la bordure en cliquant n’importe où dans le tableau). Une fois que vous avez sélectionné votre tableau, dans le panneau de droite, recherchez la section Filtres et cliquez sur le signe plus à sa droite.

Dans la boîte de dialogue Ajouter un nouvel élément qui s’affiche, utilisez les trois points horizontaux à droite de la zone de texte Expression pour sélectionner le champ que vous filtrerez dans votre table (dans mon cas, il s’agit du champ CategoryName). Ensuite, utilisez les trois points horizontaux à côté de la zone de texte Valeur pour sélectionner la propriété Value pour votre paramètre de rapport (j’ai sélectionné la propriété Value de mon paramètre CatName).

Permettre l’interactivité

Une fois le filtre et le paramètre créés, vous êtes prêt à ajouter votre interactivité : plus précisément, lorsque vous cliquez sur une colonne du graphique, vous souhaitez réafficher votre rapport avec votre paramètre de rapport défini sur une valeur basée sur la colonne sélectionnée. Dans mon cas, par exemple, lorsque je clique sur une colonne de mon graphique, je souhaite réafficher le rapport avec la valeur de mon paramètre de rapport définie sur le champ Catégorie de la colonne sélectionnée. Le filtre sur le tableau limitera alors les lignes du tableau aux produits de la catégorie sélectionnée.

Étant donné que je filtre sur les catégories de mon graphique, pour définir l’interactivité des colonnes individuelles, je dois définir l’action pour les groupes de catégories dans mon graphique. Commencez par cliquer sur votre graphique pour obtenir le panneau de droite permettant d’afficher les paramètres du graphique. Ensuite, développez la section Données pour afficher la zone Groupes de catégories du graphique et cliquez sur le signe plus à sa droite pour afficher une boîte de dialogue Ajouter un nouvel élément.

Tout d’abord, configurez le réaffichage de votre rapport : en haut de la boîte de dialogue, développez la section Activité. Dans la liste déroulante Type, sélectionnez Accédez au rapport. Cela entraînera l’affichage de la zone Source du rapport. Dans la section Type de cette section, sélectionnez UriReportSource pour accéder à votre rapport via son URL.

Heureusement, vous n’avez pas besoin de connaître l’URL de votre rapport : cliquez simplement sur l’icône de page à droite de la zone de texte Uri pour obtenir une liste de vos rapports. Ensuite, double-cliquez sur l’icône de votre rapport pour définir l’URL de votre rapport.

Maintenant que vous réaffichez votre rapport, il ne vous reste plus qu’à transmettre la valeur à utiliser par le filtre de votre table à l’aide de votre paramètre de rapport. Commencez par cliquer sur le signe plus à côté de la section Paramètres sous la zone de texte Uri. Cela ouvrira une autre boîte de dialogue Ajouter un nouvel élément.

Dans cette boîte de dialogue, dans la boîte de dialogue Nom, entrez le nom de votre paramètre (CatName, dans mon cas). Ensuite, utilisez les trois points à droite de la zone de texte Valeur pour sélectionner le champ dont vous souhaitez transmettre la valeur au filtre utilisé par votre table (dans mon cas, je souhaite transmettre le champ CategoryName).

Enregistrez vos modifications et vous êtes prêt à tester votre rapport.

Cependant, avant d’exécuter votre test, c’est une bonne idée de cliquer sur le menu hamburger dans le coin supérieur gauche du concepteur de rapport et de sélectionner l’option Publier. Cela garantit que la version de votre rapport vers laquelle vous accédez lorsque vous réaffichez votre rapport est la même version que celle que vous prévisualisez.

L’essayer

Maintenant, pour tester votre rapport, cliquez sur le bouton Aperçu dans le coin supérieur droit de votre concepteur pour afficher votre rapport. Essayez ensuite de cliquer sur l’une des colonnes de votre rapport. La sélection d’une colonne entraînera la définition de votre paramètre, ce qui mettra à jour le filtre en utilisant ce paramètre. Votre tableau s’affichera alors à nouveau, affichant uniquement les données filtrées pour l’élément que vous avez sélectionné dans le graphique.

Vous pouvez bien sûr faire bien plus avec votre graphique. Il n’est pas vraiment nécessaire que le graphique de mon étude de cas ait une légende, par exemple. Si je désactive l’option de visibilité dans la section Style de la légende, la légende disparaîtra et laissera plus d’espace pour mon graphique. Le titre du graphique sera par défaut « graph1 », mais vous pouvez le modifier dans la section Apparence du graphique.

Vous souhaiterez peut-être également nettoyer les en-têtes de colonnes de votre tableau, car ils correspondent par défaut aux noms de vos champs (double-cliquez simplement dessus). Et, actuellement, avant de sélectionner une colonne dans le graphique, votre tableau affiche ses en-têtes mais sans aucune donnée. Il n’y a rien de mal à cela, mais cet affichage initial est en quelque sorte… eh bien, moche. Votre tableau a un paramètre Aucune donnée que vous pouvez modifier pour que votre tableau affiche simplement du texte avant de sélectionner une colonne (j’ai défini le mien sur « Cliquez sur une colonne du graphique pour afficher les données détaillées de cette catégorie »).

Mais ce n’est en réalité qu’une simple façade : si vous êtes la seule personne à utiliser le rapport que vous venez de créer, vous ne vous souciez peut-être pas beaucoup de son apparence : l’interactivité était ce qui comptait ici. En fait, votre interactivité est désormais suffisamment cool pour que vous attendiez secrètement que quelqu’un regarde par-dessus votre épaule en cliquant sur le graphique, juste pour qu’il puisse vous demander « Comment avez-vous fait ça ?

Et : Encore une fois, merci à Ivan Hristov dont la connaissance des concepteurs de rapports Telerik dépasse l’entendement.

Rapports intégrés ?

Progress Telerik Reporting fournit tous les outils dont vous avez besoin pour intégrer les rapports riches et interactifs dont vos utilisateurs ont besoin pour analyser et comprendre leurs données directement dans les applications de vos utilisateurs (y compris en permettant à vos utilisateurs d’exporter les résultats dans plus de 15 formats, soit pour les distribuer, soit pour les intégrer à d’autres outils d’analyse). Telerik Reporting vous permet ensuite d’aller plus loin et de doter vos utilisateurs d’un concepteur de rapports Web entièrement fonctionnel pour créer les rapports qu’ils souhaitent sans jamais quitter les applications où ils utiliseront leurs rapports.

Vous pouvez exploiter ces outils faciles à utiliser dans n’importe quel environnement d’application Web côté client (HTML5/JS, Angular, React, Vue ou Blazor) et dans n’importe quelle application .NET (Web ou bureau : ASP.NET Core, ASP.NET MVC, ASP.NET AJAX, WinForms et UWP).

Si vous ne l’avez toujours pas essayé, vous pouvez lancer un essai gratuit pour y jeter un œil de plus près. Un service d’assistance réputé et une panoplie de ressources vous aideront tout au long de votre démarche.

Essayez les rapports Telerik