Comment intégrer des rapports dans des applications HTML5

Voici ce que vous devez faire pour récupérer des rapports à partir d'un service REST Telerik Reporting distant et les afficher dans des vues ou des pages HTML de n'importe quelle application Web.

Il est facile d'implémenter des rapports côté client dans vos applications en utilisant le Visualiseur de rapports Telerik HTML5 . Dans les scénarios les plus courants, la visionneuse de rapports HTML5 est connectée à un service REST Telerik Reporting, hébergé dans la même application. Ce service fait le gros du travail de rendu du rapport et de restitution des pages à la visionneuse de rapport. Mais comment pouvons-nous connecter la visionneuse de rapports au service REST Telerik Reporting qui fonctionne sur une instance de Report Server? Voici ce que vous devez faire pour récupérer les rapports du Telerik Report Server et les afficher dans les vues ou les pages HTML des projets ASP.NET et ASP.NET Core… ou, en fait, dans n'importe quelle application Web. [19659003] Dans cet article, je vais montrer comment utiliser la visionneuse de rapports HTML5 dans de vieilles pages HTML. Je vais également vous montrer comment utiliser le serveur de rapports Telerik, qui est plus simple que de créer votre propre service de rapport basé sur REST (ce que la solution Telerik Reporting vous permet également de faire).

Save Your Seat: Reporting In-Depth —Comment simplifier la création de rapports avec facilité

Configuration de Report Server

La première étape de l'utilisation de Report Server consiste à télécharger son package d'installation à partir de votre compte Telerik.com. Une fois le package d’installation exécuté, vous pouvez accéder au Gestionnaire de serveur de rapports soit à partir du menu Démarrer de Windows, soit en ouvrant un navigateur et en surfant sur localhost: 83. La première fois que vous accédez au gestionnaire, vous serez invité à spécifier un emplacement de stockage (je viens d'accepter l'emplacement par défaut dans le système de fichiers de mon ordinateur) et à configurer un compte administrateur avec un mot de passe et une adresse e-mail. À part le chargement de vos rapports, vous êtes prêt à commencer à servir des rapports à votre application.

L'installation par défaut du serveur de rapports contient une demi-douzaine d'exemples de rapports dans une catégorie appelée Échantillons, et vous pouvez les utiliser pour créer vos premières pages de rapports . Si vous avez déjà créé des rapports avec Telerik Report Designer, vous pouvez les télécharger sur le serveur et les organiser en catégories.

Vous pouvez également lier votre copie de Report Designer à Report Server. Dans le Concepteur de rapports, accédez au fichier | Ouvrez le menu, sélectionnez Serveurs de rapports sur la gauche, puis cliquez sur le bouton Ajouter un serveur sur la droite. Vous devrez ensuite fournir l'URL de votre installation de Report Manager (localhost: 83, encore une fois) et le nom / mot de passe d'administrateur que vous avez défini lors de l'installation de Report Server. Vous devriez maintenant être en mesure de créer des rapports dans Report Designer et de les enregistrer sur Report Server pendant que vous travaillez dessus. Pour utiliser l'un de ces rapports de Report Server, il vous suffit de cliquer sur le bouton Publier dans Report Designer et le rapport sera disponible pour tous les utilisateurs de Report Server.

Pour accéder aux rapports, vos applications devront se connecter à Report Server . Comme vous le verrez, vous pouvez simplement utiliser le nom d'utilisateur / mot de passe administrateur que vous avez configuré. Vous pouvez également, à partir de l'onglet Utilisateurs sur le côté gauche du menu du Gestionnaire de serveur de rapports, activer le compte Invité qui ne nécessite ni nom de compte ni mot de passe. Vous pouvez même vouloir créer un nouvel utilisateur avec des autorisations de création de rapports personnalisées: les utilisateurs peuvent, par exemple, être configurés avec des autorisations en lecture seule et être limités à l'accès aux rapports dans une catégorie spécifique (ou même à un rapport spécifique).

Pour cet article, j'ai utilisé un rapport que j'ai créé plus tôt dans Report Designer qui comprend une chaîne de connexion intégrée. Tout ce que j'avais à faire, une fois connecté Report Designer à Report Server, était de publier mon rapport et j'étais prêt à l'utiliser dans Report Viewer.

Prenez l'eBook: Guide rapide des outils de création de rapports experts .NET

Configuration de la page Web de la visionneuse de rapports

Si vous travaillez avec un projet ASP.NET, le moyen le plus simple d'ajouter une page ou de l'afficher prend en charge la visionneuse de rapports HTML5 consiste à utiliser Ajouter | Boîte de dialogue Nouvel élément et sélectionnez Telerik HTML5 Report Viewer Page (pour une page .html) ou HTML5 Report Viewer View (pour une vue .cshtml). L'un ou l'autre de ces choix démarre un assistant qui vous permet de sélectionner le rapport souhaité dans votre serveur de rapports. Si vous n'avez pas créé votre projet avec succès à ce stade, l'assistant vous le fera faire maintenant.

Au fur et à mesure que vous travaillerez dans l'assistant, vous devrez fournir l'URL de Report Server et le nom d'utilisateur / mot de passe pour le compte que vous souhaitez utiliser (si vous avez activé le compte Invité ou créé un nouveau compte, vous pouvez les utiliser). Si vous avez limité le compte à la seule lecture des rapports, vous devrez alors taper le nom du rapport et sa catégorie car l'utilisateur ne sera pas autorisé à lister les rapports et les catégories.

L'assistant ne sera pas seulement ajoutez une page (ou une vue) avec le support HTML et JavaScript requis par votre visualiseur de rapports, mais vous garantira également que votre projet dispose de toutes les références nécessaires. Cela dit, les projets ASP.NET MVC utilisant .NET 4.7 et les projets ASP.NET Core ne nécessitent aucune référence supplémentaire.

Si vous travaillez dans un projet ASP.NET Core (ou souhaitez ajouter la visionneuse de rapports à une page / vue existante dans un projet ASP.NET), vous pouvez configurer la page vous-même. Pour ce faire, tout d'abord, dans l'élément head de votre page, ajoutez ces deux balises de script (si vous avez déjà la balise jQuery, assurez-vous que la balise de script pour le telerikReportViewer la suit):

Vous devrez également les ajouter deux balises de lien pour obtenir les feuilles de style dont vous aurez besoin:

Enfin, vous devrez créer un style pour l'élément div qui affiche votre visionneuse de rapports (cet exemple utilise un style local dans l'élément head et suppose l'élément div a son attribut id défini sur reportViewer1):

Dans les projets ASP.NET Core, vous devez vous assurer que vous avez cette ligne dans la méthode Configure de votre fichier Startup.cs:

 app.UseStaticFiles ();

Cependant, les valeurs par défaut de la plupart des projets ASP.NET Care incluront automatiquement cette ligne.

Affichage du rapport

Pour afficher votre page, dans l'élément body de votre page, vous avez besoin d'un élément div pour contenir la visionneuse de rapports . Cet exemple d'élément fournit à la fois un message à afficher pendant la récupération du rapport et définit l'attribut id de l'élément (qui compte à la fois pour le style appliqué à l'élément et pour certains JavaScript à venir).

    Veuillez patienter, votre rapport est en cours de chargement

Vous avez maintenant besoin de JavaScript pour charger votre rapport dans l'élément div lorsque la page est prête. Le cœur de ce code est le littéral d'objet que vous passez à la méthode telerik_ReportViewer. Dans les paramètres de cette méthode, vous devrez spécifier l'URL de votre serveur de rapports (toujours localhost: 83) ainsi que le nom et la catégorie du rapport que vous souhaitez afficher.

Une implémentation minimale pour un affichage acceptable ressemble à ceci:

Vous pouvez consulter la documentation de Report Viewer pour plus d'options.

Cet exemple de code JavaScript ne fonctionnera cependant que si vous avez activé le compte Invité dans le compte Invité de Report Server. Si vous avez configuré et souhaitez utiliser d'autres comptes, vous devez inclure le nom et le mot de passe du compte dans le paramètre ReportServer. Cet exemple utilise un compte appelé PeterVogel avec un mot de passe «password»:

 reportServer: {
url: "http: // localhost: 83",
    nom d'utilisateur: "PeterVogel",
    mot de passe: "mot de passe"
}

Si vous rencontrez des problèmes lors du test de votre application, consultez la section de dépannage à la fin de cette page . Mais, si votre expérience est comme la mienne, vous n'appuierez probablement que sur F5 et, quelques secondes plus tard, vous vous retrouverez à regarder votre rapport.

Vous avez essayé Telerik DevCraft?

Vous pouvez choisir Telerik Reporting et Telerik Report Server en tant que produits individuels ou profitez-en dans le cadre des offres groupées Telerik DevCraft.

Essayez Telerik DevCraft

Telerik DevCraft est la meilleure collection d'outils de développement logiciel parmi les technologies .NET et JavaScript, qui comprend des composants d'interface utilisateur modernes, riches en fonctionnalités et conçus par des professionnels pour les applications Web, de bureau et mobiles, des solutions de gestion de rapports et de rapports, des bibliothèques de traitement de documents, des tests automatisés et des simulations outils des suites Telerik et Kendo UI. DevCraft vous fournira tout ce dont vous avez besoin pour fournir des applications exceptionnelles en moins de temps et avec moins d'efforts. Avec le soutien de notre équipe de support légendaire, qui se compose des développeurs qui créent les produits, et une tonne de ressources et de formations, vous pouvez être assuré que vous avez un partenaire stable sur lequel compter pour vos défis quotidiens tout au long de votre parcours de développement logiciel. [19659037]