Dans cet article, je vais vous montrer comment utiliser Telerik Reporting en mode conception dans une application Blazor WebAssembly. J’utiliserai Telerik UI pour Blazor pour vous guider tout au long du processus.
Commencez par en savoir plus sur Progress Telerik Reporting et Telerik UI pour Blazor et leurs avantages.
Qu’est-ce que le reporting Telerik ?
Reportage Telerik est un outil de reporting intégré .NET tout-en-un, léger et facile à utiliser. Il a été conçu pour les applications Web et de bureau. Cet outil solide permet de transformer facilement les données en rapports commerciaux pratiques, attrayants et réutilisables.
L’outil est pratique pour les développeurs et les responsables de développement car il accélère le processus de création de rapports en permettant aux utilisateurs professionnels de rédiger et de modifier des rapports de manière indépendante, encourageant ainsi la rapidité, la flexibilité et l’indépendance.
Telerik Reporting facilite l’intégration en travaillant avec de nombreux frameworks et technologies, tels que ASP.NET Core, Blazor, ASP.NET MVC, ASP.NET AJAX, HTML5, Angular, React, Vue, WPF et WinForms. Il fonctionne également bien avec de nombreuses sources de données, notamment les cubes OLAP, les bases de données, les fichiers Excel et XML et les objets métier. Il aide le processus de reporting à rester sécurisé, évolutif et à fonctionner de manière optimale.
Le logiciel de reporting de Telerik est un excellent outil pour les utilisateurs professionnels car il leur permet de créer, modifier et visualiser des rapports à leur propre rythme. Cela rend les flux de travail commerciaux plus flexibles. Cette flexibilité est essentielle pour prendre de meilleures décisions et créer un environnement de travail adaptable. Grâce à des paramètres simples de visualisation de rapports, les utilisateurs peuvent facilement ajouter des rapports à n’importe quelle application professionnelle Web ou de bureau. Lorsque les rapports sont prêts, ils peuvent être exportés dans plus de 15 formats différents (Word, Excel, PDF, PPT, image, CSV, etc.) pour répondre aux différents besoins de l’entreprise. Dans l’ensemble, Telerik Reporting est un outil qui permet de gagner du temps et permet aux utilisateurs professionnels de voir plus facilement comment les données sont utilisées.
Qu’est-ce que l’interface utilisateur Telerik pour Blazor ?
Telerik UI pour Blazor propose une suite professionnelle de Composants de l’interface utilisateur Blazor pour faciliter le développement d’applications modernes riches en fonctionnalités. Bénéficiant de plus de 100 composants intégrés, il simplifie le développement front-end en fournissant des éléments d’interface utilisateur préconstruits pour une utilisation immédiate. Ces composants sont des composants Blazor natifs, pas de simples wrappers pour les widgets jQuery, et sont compatibles avec les applications Blazor exécutées par le serveur et le client (WebAssembly).
Pour les développeurs travaillant sur des applications Web d’une seule page utilisant Blazor WebAssembly (WASM), Telerik UI pour Blazor s’avère inestimable. Blazor WASM, un segment du framework .NET Core, utilise C# pour créer du contenu dynamique, améliorant l’expérience client grâce à des éléments riches et interactifs. Bien que les applications Blazor WebAssembly soient initialement téléchargées sur le navigateur du client, ce qui peut entraîner des téléchargements plus importants que Blazor Server, tout le traitement s’effectue sur le matériel client pour des temps de réponse rapides. Cette suite de composants d’interface utilisateur natifs permet ainsi aux développeurs de créer des expériences utilisateur attrayantes et riches en fonctionnalités avec un minimum d’effort.
Qu’allons nous faire?
Je vais reproduire les étapes pour éditer le rapport nommé SampleReport.tdp hébergé dans notre solution et vous guider pour éviter les pièges.
Telerik Reporting nous permet de laisser les utilisateurs finaux éditer leurs rapports, dans ce cas, dans un projet Blazor WebAssembly. Blazor WebAssembly n’a pas de backend, nous avons donc besoin d’une API pour héberger Telerik Reporting. Dans notre cas, nous utiliserons le modèle de projet Telerik Reporting REST.
Mettons-nous au travail!
- Commencez à créer un nouveau projet de service Telerik Reporting REST à partir de Visual Studio :
- Choisissez la version de votre framework cible. J’ai laissé les autres valeurs par défaut.
- Voici à quoi ressembleront les fichiers du projet.
Notez l’emplacement du dossier Rapports. Il doit être hébergé sur le dossier wwwroot pour y accéder. Cette erreur sera générée lors de l’exécution de Blazor WebAssembly s’il est manquant dans wwwroot :
Et le journal renverra une erreur 404. Il ne s’agit pas d’un problème de stratégie multi-origine mais d’un échec de configuration de l’application.
Alors, changez l’emplacement des rapports de root à wwwroot :
- Dans le fichier Setup.cs, ajoutez le
IReportServiceConfigurationetIReportDesignerServiceConfigurationaprèsservices.AddServerSideBlazor();.
1. services.AddServerSideBlazor();
2.
3. services.TryAddSingleton<IReportServiceConfiguration>(sp => new ReportServiceConfiguration
4. {
5. ReportingEngineConfiguration = sp.GetService<IConfiguration>(),
6. HostAppId = "BlazorWebReportDesignerDemo",
7. Storage = new FileStorage(),
8. ReportSourceResolver = new UriReportSourceResolver(Path.Combine(sp.GetService<IWebHostEnvironment>().WebRootPath, "Reports"))
9. });
10.
11. services.TryAddSingleton<IReportDesignerServiceConfiguration>(sp => new ReportDesignerServiceConfiguration
12. {
13. DefinitionStorage = new FileDefinitionStorage(Path.Combine(sp.GetService<IWebHostEnvironment>().WebRootPath, "Reports")),
14. SettingsStorage = new FileSettingsStorage(Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "Telerik Reporting")),
15. ResourceStorage = new ResourceStorage(Path.Combine(sp.GetService<IWebHostEnvironment>().WebRootPath, "Resources")),
16. SharedDataSourceStorage = new FileSharedDataSourceStorage(Path.Combine(sp.GetService<IWebHostEnvironment>().WebRootPath, "Reports", "Shared Data Sources")),
17. });
Dans IReportDesignerServiceConfigurationle nom du dossier « Rapports » peut être personnalisé, en modifiant la propriété DefinitionStorage. De plus, vous disposez d’autres options à personnaliser SettingsStorage, ResourcesStorage et le SharedDataSourceStorage.
- Créez le projet Blazor WebAssembly à l’aide du modèle Visual Studio et ajoutez-le à la solution :
- Ajoutez l’interface utilisateur Telerik pour Blazor. Vous devez télécharger et configurer ce package à l’aide de l’application Progress Control Panel. Cela vous permettra d’utiliser Telerik UI pour Blazor dans l’application Web Assembly. Vous devrez peut-être configurer manuellement Telerik Blazor NuGet. Apprenez à faire cela sur https://docs.telerik.com/blazor-ui/installation/nuget.
- Inscrivez-vous au service Telerik sur le fichier Program.cs :
1.
2. builder.Services.AddTelerikBlazor();
3.
- Ajoutez Telerik au fichier _Imports.razor.
1. @using Telerik.Blazor
2. @using Telerik.Blazor.Components
3. @using Telerik.FontIcons
- Ajoutez les scripts à index.html :
1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2. <script src="https://kendo.cdn.telerik.com/2023.2.829/js/kendo.all.min.js"></script>
3. <script src="./scripts/js/kendo-ui-license.js"></script>
4. <script src="http://localhost:59655/api/reportdesigner/resources/js/telerikReportViewer"></script>
5. <script src="http://localhost:59655/api/reportdesigner/designerresources/js/webReportDesigner/"></script>
6. <script src="_content/Telerik.WebReportDesigner.Blazor/telerikWebReportDesignerInterop.js" defer></script>
Conseils et pièges auxquels vous pourriez être confronté :
- Ajoutez le Telerik Web Report Designer pour Blazor à partir du référentiel Telerik NuGet. Découvrez comment configurer NuGet privé Telerik : https://docs.telerik.com/reporting/getting-started/installation/adding-private-nuget-feed.
Astuce : notez la version. Vous en aurez bientôt besoin.
- Sur la page Index.razor ou votre rasoir cible, ajoutez ces lignes de code :
En utilisant:
1. @using Telerik.WebReportDesigner.Blazor
CSS :
1. <style>
2. #wrd1 { position: relative; width: 1300px; height: 880px; padding-right: 50px; }
3. </style>
Ajoutez le WebReportDesignerWidget :
1. <WebReportDesigner DesignerId="wrd1"
2. ServiceUrl="http://localhost:59655/api/reportdesigner"
3. Report="SampleReport.trdp"
4. ReportViewerOptions="@(new ReportViewerOptions() {
5. templateUrl = "http://localhost:59655/api/reportdesigner/resources/templates/telerikReportViewerTemplate-17.1.23.718.html",
6. scaleMode = ScaleMode.Specific,
7. scale = 1.0,
8. pageMode = PageMode.ContinuousScroll,
9. viewMode = ViewMode.Interactive
10. })"
11. ToolboxArea="new ToolboxAreaOptions() { Layout = ToolboxAreaLayout.List }"
12. PropertiesArea="new PropertiesAreaOptions() { Layout = PropertiesAreaLayout.Categorized }" />
Observez le chemin d’accès à votre service Telerik Reporting : http://localhost:59655à ServiceUrl et templateUrl.
Pour le templateUrl propriété, nous avons la version du fichier 17.1.23.718. Vous obtenez le numéro de version du package WebReportDesigener NuGet.
- Configurez des projets à exécuter ensemble au démarrage :
Sélectionnez « Plusieurs projets de démarrage » et définissez Action sur Démarrer dans les projets.
- Appuyez sur F5 sur Visual Studio, et voilà, si tout est à sa place, vous obtiendrez cette page sur le navigateur :
Conclusion
Profitez des fonctionnalités puissantes de Telerik Reporting pour changer la façon dont vous visualisez et rapportez les données ! Avec son intégration facile, ses contrôles centrés sur l’utilisateur et son large éventail de choix de reporting, Telerik Reporting est un excellent outil pour tous vos projets de données que vous souhaitez réussir et efficaces. Telerik Reporting peut vous aider à accélérer la création de rapports, à faciliter le partage de rapports fonctionnels et esthétiques ou à améliorer la prise de décision basée sur les données.
Commencez un voyage qui changera votre vie où les données seront transformées en informations claires et utilisables qui vous aideront à prendre des décisions intelligentes et à planifier votre avenir. Découvrez cette solution dynamique sur mon GitHub. Et obtenez votre essai gratuit dès aujourd’hui sur le site officiel de Progress Telerik https://www.telerik.com/try/devcraft-ultimate pour commencer à créer des solutions de données qui valent la peine d’être utilisées. De plus, bénéficiez du support imbattable de la célèbre équipe Progress Telerik, même pendant votre période d’essai.
Les références
Source link