Fermer

mai 3, 2023

Autonomiser les utilisateurs avec la visionneuse de rapports Telerik HTML5

Autonomiser les utilisateurs avec la visionneuse de rapports Telerik HTML5


Telerik HTML5 Report Viewer permettra à vos utilisateurs d’interagir avec le rapport pour obtenir les données qu’ils souhaitent, de trouver la partie du rapport qui les intéresse et de partager le rapport avec d’autres… mais uniquement si vous mettez ces options à la disposition de vos utilisateurs.

Un bon rapport convertit les données en informations. Un meilleur rapport place ces données là où elles sont les plus utiles pour vos utilisateurs : intégrées dans l’application de l’utilisateur. Un excellent rapport responsabilise ces utilisateurs en leur permettant d’interagir avec le rapport. La visionneuse de rapports Progress Telerik vous permet de créer ces excellents rapports.

En fait, Telerik fournit un suite de visualiseurs de rapports Que tu peux intégrer dans les applications. Ces visualiseurs de rapports prennent en charge les applications Web créées avec ASP.NET/ASP.NET Core (Razor Pages, MVC, Blazor et Web Forms), Angular, React, Vue et le bon vieux HTML + JavaScript + CSS. Côté bureau, il existe des visualiseurs pour WPF, WinUI et Windows Forms (en plusieurs versions pour toutes les différentes plates-formes .NET et .NET Framework). Toutes les versions fonctionnent de la même manière, alors que cette discussion se concentre sur le Visionneuse de rapports HTML5vous pourrez appliquer ces techniques aux autres environnements.

Avant de commencer : En supposant que vous utilisiez le fichier ReportTemplate.html par défaut pour contrôler la mise en page de votre rapport, la plupart des options qu’un l’utilisateur doit interagir avec votre rapport (par exemple, page avant/arrière, recherche, exportation vers d’autres formats) sont déjà activés.

Mais pour créer cet excellent rapport qui s’intègre à l’application de votre utilisateur et responsabilise pleinement vos utilisateurs, vous devez tirer parti de quatre fonctionnalités supplémentaires lors de la conception de votre rapport :

  • Paramètres
  • E-mail
  • Plans de documents
  • Données actualisées

Intégration d’un rapport dans une application

Vous pouvez faire en sorte que votre rapport s’intègre à l’état actuel de l’application dans laquelle il est intégré en ajouter des paramètres à votre rapport (vous pouvez soit ajouter des paramètres lorsque vous créez le rapport dans le Concepteur de rapports, soit ajouter des paramètres à partir du code lorsque vous affichez le rapport au moment de l’exécution). Une fois que vous avez ajouté un paramètre à votre rapport, vous pouvez définir ce paramètre pour contrôler ce qui est affiché dans le rapport (probablement en filtrer les données de votre rapport) en utilisant une valeur tirée de l’application.

Avec la visionneuse de rapports HTML5, définir la valeur d’un paramètre dans votre rapport peut être aussi simple que d’utiliser un petit jQuery dans le cadre des paramètres reportSource du rapport pour récupérer une valeur à partir d’un autre élément de la page. Ces paramètres, par exemple, définissent un paramètre appelé CategoryName en récupérant une valeur d’un élément avec son attribut id défini sur categoryNameInput:

reportSource: {
  report: "Samples/ProductsByCategory",
  parameters: { CategoryName: $('#categoryNameInput').val() }
},

Au fur et à mesure que votre utilisateur apporte des modifications à son application, vous souhaiterez que votre rapport reste synchronisé avec les données actuelles de l’application. Cela signifie que vous voudrez connecter du code à un événement dans l’interface utilisateur de l’application pour continuer à mettre à jour ce paramètre. Vous aurez besoin d’une variation sur cet exemple de code qui réinitialise le rapport CategoryName paramètre à la valeur actuelle dans le categoryNameInput élément:

function UpdateParameters() {
  var viewer = $("#reportViewer1").data("telerik_ReportViewer");
  viewer.reportSource({
    report: "Samples/ProductsByCategory",
    parameters: { CategoryName: $('#categoryNameInput').val() }
  });
}

Responsabiliser votre utilisateur

Mais voici le problème : les données que vous affichez ne sont pas toujours celles dont l’utilisateur a besoin. L’utilisateur, par exemple, peut ne pas vouloir consulter uniquement les niveaux de stock du produit affiché par l’application. Votre utilisateur peut souhaiter vérifier les niveaux de stock d’un produit lié au produit affiché. Vous pouvez aller plus loin que la simple intégration de votre rapport dans l’application en laissant votre utilisateur modifier les valeurs des paramètres au moment de l’exécution pour obtenir le rapport dont il a besoin.

En surface, permettre aux utilisateurs d’afficher et de modifier les paramètres est simple : lors de la création du paramètre, définissez simplement la propriété Visible du paramètre sur true dans le concepteur de rapports (ou définissez la propriété IsVisible du paramètre sur true lors de la création du paramètre à partir du code au moment de l’exécution) . Lorsque l’utilisateur clique sur l’icône de filtre dans la barre de menu du Report Viewer, un panneau affichant tous les paramètres marqués comme visibles s’affiche, indiquant la valeur actuelle des paramètres.

La visionneuse de rapports affichant le coin supérieur droit d'un rapport graphique/de type tableau de bord avec l'extrémité droite du menu de rapport affiché.  L'icône entonnoir/filtre est mise en surbrillance.  Sur le côté droit du rapport se trouve un panneau intitulé

Cependant, vous souhaiterez également vous assurer que l’utilisateur reçoit toujours un rapport en exerçant un certain contrôle sur ce que l’utilisateur entre comme valeur de paramètre. Obtenir ce contrôle peut également être facile simplement en définir les propriétés d’un paramètre dans le concepteur de rapports : vous pouvez fournir une valeur par défaut pour le paramètre, fournir une liste de valeurs que l’utilisateur peut sélectionner (codées en dur ou tirées de la base de données) et empêcher l’utilisateur d’entrer des entrées vides ou NULL.

Vous pouvez également faire en sorte que le rapport s’actualise automatiquement lorsque l’utilisateur modifie une valeur dans le panneau des paramètres du rapport (et, si vous n’activez pas l’option d’actualisation automatique, la visionneuse de rapports affiche un bouton d’aperçu sur lequel l’utilisateur peut cliquer pour voir le rapport révisé après avoir apporté leurs modifications).

Cependant, si ces options ne vous donnent pas assez de contrôle, vous pouvez créer un composant d’édition personnalisé pour n’importe quel paramètre.

Activation du courrier électronique

L’information n’est souvent utile que si elle est partagée. Par défaut, les utilisateurs peuvent exporter leurs données dans une variété de formats… mais, avec votre aide, ils peuvent également envoyer un rapport par e-mail en pièce jointe dans l’un de ces formats si vous activez l’assistance par e-mail.

Si vous utilisez Serveur de rapportsl’activation de la messagerie électronique est un processus en deux étapes :

  1. Accédez à l’instance de votre serveur du serveur de rapports Telerik (probablement au port 83 sur votre serveur) et entrez les informations pour connecter le serveur de rapports à votre serveur SMTP. Cela vous permet de centraliser les paramètres de votre serveur de messagerie en un seul endroit.

  2. Dans votre rapport, dans le sendEmail , définissez sa propriété enabled sur true. Désormais, lorsque l’utilisateur clique sur l’icône E-mail dans la barre de menus de la visionneuse de rapports, un formulaire s’ouvre et permet à l’utilisateur de créer un e-mail avec le rapport en pièce jointe (l’utilisateur peut choisir le format d’exportation du rapport).

sendEmail: { enabled: true },

Le formulaire d'envoi d'e-mail de la visionneuse de rapports.  Il existe des zones de texte permettant à l'utilisateur de fournir les adresses À, De et CC.  D'autres zones de texte permettent à l'utilisateur de fournir un sujet et un message (plusieurs options de formatage sont affichées).  Une liste déroulante intitulée

En plus de définir la propriété enabled de sendEmail, vous pouvez précharger le formulaire de courrier électronique en définissant des propriétés supplémentaires (par exemple, à, de, objet, etc.) sur sendEmail. Cet exemple définit un objet par défaut pour tout e-mail que l’utilisateur choisit d’envoyer :

sendEmail: {
  enabled: true,
  subject: "Product by Category Report"
},

Vous pouvez également ignorer la configuration de vos paramètres SMTP dans Report Server (ou remplacer ces paramètres rapport par rapport) en connectant votre propre code côté serveur au Report Viewer. Événement SendMailMessage.

Deux autres choses

Vous pouvez également aider l’utilisateur à trouver les données qu’il souhaite en générant un explorateur de documents qui permet aux utilisateurs de naviguer jusqu’à la section (ou même la ligne) de leur choix. Tout ce que vous avez à faire est de régler le TocText propriété dans n’importe quel composant de votre rapport à une expression. Par exemple, régler le TocText propriété d’un en-tête de groupe à un nom de champ de la source de données du rapport (par exemple, = Fields.CategoryName) crée un explorateur de documents que les utilisateurs peuvent utiliser pour trouver la catégorie de produits qu’ils souhaitent.

La visionneuse de rapport affichant la barre de menus et une partie du rapport.  Sur le côté gauche du rapport, un panneau s'affiche avec l'en-tête Produits par catégorie.  L'en-tête a une flèche vers le bas à sa gauche indiquant que la liste est développée.  La liste affiche une liste d'entrées qui correspondent aux en-têtes du rapport (par exemple, Boissons, Condiments, Produits).  L'entrée Condiments de la liste est mise en surbrillance et le rapport affiche la page Condiments.  Dans la barre de menus, l'icône du plan de document (une pile de papier) est mise en surbrillance.

Vos utilisateurs peuvent également souhaiter obtenir la dernière version des données de votre rapport. Vous pouvez activer l’icône d’actualisation de Report Viewer en définissant simplement la propriété ready dans les paramètres de votre rapport avec une fonction JavaScript avec une seule ligne de code :

ready: function () {
  this.refreshReport();
},

Un excellent rapport permet à vos utilisateurs de prendre de meilleures décisions en faisant deux choses : s’intégrer aux applications où les utilisateurs ont besoin d’informations, puis fournir les outils dont les utilisateurs ont besoin pour travailler avec ces informations. Avec le concepteur de rapports Telerik et les visualiseurs de rapports, vous pouvez fournir tout cela.

Prêt à profiter de Rapports intégrés?

Progrès 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 la possibilité pour vos utilisateurs d’exporter les résultats dans plus de 15 formats, soit pour les distribuer, soit pour les intégrer à autres outils d’analyse). Telerik Reporting vous permet ensuite d’aller plus loin et de donner à vos utilisateurs 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 tirer parti de ces outils faciles à utiliser dans toutes les applications Web et de bureau : Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET AJAX, WinForms, WPF, Angular, HTML5/JS, React, Vue.

Si vous ne l’avez toujours pas essayé, vous pouvez commencer un essai gratuit pour regarder de plus près. Un service d’assistance renommé et une panoplie de ressources vous aideront tout au long du chemin. L’assistance est gratuite pendant votre période d’essai. Telerik Reporting est également disponible en Ensembles DevCraft.




Source link