Configuration du reporting Telerik avec Angular

Dans cet article, je vais vous guider dans la création de votre première visionneuse de rapports angulaires.

Les données seront accessibles à l’aide d’un service C# .NET 8 RESTful et les requêtes seront effectuées sur Microsoft SQL Server. Permettez-moi de commencer par parler de Telerik Reporting.

À propos des rapports Telerik

Progrès Reportage Telerik est un outil qui permet la création, la visualisation et l’exportation de rapports riches, interactifs et réutilisables. Il offre un Prestation REPOS qui nous permet de générer des rapports dans divers formatsy compris PDF, Excel et HTML.

L’utilisation de REST avec Telerik Reporting pour Angular présente de nombreux avantages. REST est un protocole simple et léger qui peut être utilisé avec n’importe quel langage informatique. Cela nous permet de concevoir une architecture évolutive et adaptable facilement intégrée à d’autres systèmes. Les services RESTful sont également apatrides, ce qui signifie qu’ils ne stockent pas les informations des clients, ce qui les rend plus sécurisés et plus faciles à gérer.

Nous pouvons construire une solution de reporting robuste, facile à utiliser, évolutive et configurable en combinant REST et Telerik Reporting pour Angular. Les rapports peuvent être générés dans différents formats et intégrés à d’autres systèmes, facilitant ainsi la communication d’informations au sein de votre organisation.

Concepteurs de rapports

Telerik Reporting fournit des outils permettant aux concepteurs de créer et de configurer des rapports. Ils prennent en charge de nombreuses définitions de rapport, notamment les définitions de rapport de type, les définitions de rapport déclaratif et les définitions de rapport de code. Ils proposent également des assistants et des modèles pour les scénarios de rapports courants, notamment les rapports de bande, la facturation, les catalogues de produits, etc.

Une option pour travailler avec des rapports dans Angular consiste à intégrer le Concepteur de rapports Web dans une application angulaire.

Éléments de source de données

Ces éléments relient le rapport à des données provenant de plusieurs sources, telles que des bases de données, des services Web, des objets métier, des fichiers statiques, etc. Le modèle API Telerik.Reporting peut être utilisé pour les configurer en externe ou par programme.

Visionneuses de rapports

Ces composants d’interface nous permettent d’afficher et d’interagir avec un document de rapport dans l’interface utilisateur de l’application. Ils couvrent de nombreuses technologies, notamment Angular, React, Blazor, HTML5/JS, ASP.NET Core, WinUI, WPF, Windows Forms, etc. Ils peuvent traiter et restituer le rapport à l’aide d’un moteur de reporting distant ou intégré.

Nous pouvons utiliser la visionneuse de rapports HTML5 avec Rapports Telerik avec Angularun widget JavaScript qui peut être inséré dans n’importe quelle application en ligne. Nous pouvons également utiliser Angular Report Viewer, un composant wrapper qui fournit les fonctionnalités et les paramètres de la visionneuse de rapports HTML5.

Il y a aussi un Visionneuse de rapports angulaires natifs où la dépendance jQuery est supprimée. Vous aurez besoin d’un Interface utilisateur Kendo pour angulaire licence pour utiliser la visionneuse de rapports native, qui est incluse dans le Telerik DevCraft licence : ma recommandation personnelle pour l’expérience de développement la plus robuste.

Créer notre rapport angulaire

Nous commençons par créer notre projet Angular. J’ai utilisé le nom angularreportsolution.

npx @angular/cli@16 new angularreportsolution

Choisissez si vous aimez le routage. Il faut choisir SCSS :

Après cela, l’installation de jQuery :

npm install jquery

Ajoutez jQuery au fichier angulaire.json :

1.	...
2.	 “architect”: {
3.	        “build”: {
4.	          "builder": "@angular-devkit/build-angular:browser",
5.	          “options”: {
6.	            “outputPath”: “dist/angularreportsolution”,
7.	            “index”: “src/index.html”,
8.	            “main”: “src/main.ts”,
9.	            “polyfills”: [
10.	              “zone.js”
11.	            ],
12.	            "tsConfig": "tsconfig.app.json",
13.	            “inlineStyleLanguage”: “scss”,
14.	            “assets”: [
15.	              “src/favicon.ico”,
16.	              “src/assets”
17.	            ],
18.	            “styles”: [
19.	              “src/styles.scss”
20.	            ],
21.	            “scripts”: []
22.	          },
23.	
24.	...

Vous allez maintenant ajouter (si vous avez un projet existant) ou remplacer "scripts": [] avec:

"scripts": ["./node_modules/jquery/dist/jquery.js"]

Installation de la visionneuse de rapports Telerik

Vous pouvez recevoir une erreur 403 Forbidden, vous devez donc vous inscrire et vous connecter à npmjs.com avant d’effectuer cette étape.

npm login --registry=https://registry.npmjs.org --scope=@progress

Et maintenant, nous exécutons la commande pour installer la visionneuse :

npm install @progress/telerik-angular-report-viewer

Configuration du projet

Dans Angular Index.html, ajoutez le thème dans l’en-tête. Vous pouvez choisir un autre thème. Voici une liste de thèmes.

1.	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.2/classic/classic-main.css" />  

Ajoutez le module de reporting Telerik au niveau du app.module.ts fichier angulaire :

Insérez l’importation en haut, Ligne 1 dans l’exemple ci-dessous, et Module de reporting Telerik dans le tableau d’importations, ligne 10 dans l’exemple ci-dessous.

Échantillon app.module.ts:

1.	import { TelerikReportingModule } from '@progress/telerik-angular-report-viewer';
2.	
3.	@NgModule({
4.	  declarations: [
5.	    AppComponent
6.	  ],
7.	  imports: [
8.	    BrowserModule,
9.	    AppRoutingModule,
10.	    TelerikReportingModule
11.	  ],
12.	  providers: [],
13.	  bootstrap: [AppComponent]
14.	})
15.	export class AppModule { }

Au app.component.tsajoutez le viewerContainerStyle:

1.	import { Component } from '@angular/core';
2.	
3.	@Component({
4.	  selector: ‘app-root’,
5.	  templateUrl: './app.component.html',
6.	  styleUrls: ['./app.component.scss']
7.	})
8.	export class AppComponent {
9.	  title = 'Angular Report Solution';
10.	
11.	  viewerContainerStyle = {
12.	    position: ‘relative’,
13.	    width: ‘1000px’,
14.	    height: ‘800px’,
15.	    [‘font-family’]: ‘ms sans serif’
16.	};
17.	
18.	}

Ajoutez le HTML codez dans le fichier app.component.html :

1.	<tr-viewer
2.	    [containerStyle]="viewerContainerStyle"
3.	    [serviceUrl]="'https://angularnet8report.jsmotta.com.br/api/reports'"
4.	    [reportSource]="{
5.	        report: ‘Dashboard.trdp’,  
6.	        parameters: {}
7.	    }”
8.	    [viewMode]="'INTERACTIVE'"
9.	    [scaleMode]="'SPECIFIC'"
10.	    [scale]="1.0">
11.	</tr-viewer>

Dans la ligne 3, nous saisissons notre service REST. J’utilise un service qui fonctionne déjà avec la base de données AdventureWorks.

[serviceUrl]="'https://angularnet8report.jsmotta.com.br/api/reports'"

À ce stade, vous pouvez exécuter et ouvrir l’exemple de travail en ligne :

ng serve

Ouvrez le navigateur sur le port localhost 4200 :

http://localhost:4200/

L’image ci-dessous montre le résultat auquel vous pouvez vous attendre si tout va bien :

Configuration sur le back-end

Nous pouvons partir du modèle dans le dossier d’installation Progress.

Dans le backend, vous définirez la chaîne de connexion sur appsettings.json.

Conseil: Vous pouvez choisir n’importe quel nom pour la chaîne de connexion.

1.	 "AllowedHosts": "*",
2.	 "ConnectionStrings": {
3.	   "AdventureWorksConnectionString": {
4.	     "connectionString": "Data Source=(local);Initial Catalog=AdventureWorks;Integrated Security=SSPI",
5.	     "providerName": "System.Data.SqlClient"
6.	   }
7.	 }

Dans ce cas, nous avons spécifié que le rapport à rendre par Angular Report Viewer était Dashboard.trdp.

1.	<reporting-angular-viewer
2.	    #viewer
3.	    height="100vh"
4.	    [reportSource]="{
5.	        report: 'Dashboard.trdp', 
6.	        parameters: { ReportYear: 2004 }
7.	    }"
8.	    [serviceUrl]="'http://localhost:59657/api/reports/'"
9.	    viewMode="interactive"
10.	    [keepClientAlive]="true"
11.	    (reportLoadComplete)="reportLoadComplete($event)" >
12.	</reporting-angular-viewer>

Conseil: Il existe d’autres modèles à explorer :

Ouvrez Telerik Report Designer en double-cliquant sur le fichier :

Sélectionnez la source de données et définissez la propriété ConnectionString que vous avez précédemment définie sur appsettings.json. Conseil: Le nom doit être exactement le même dans les paramètres.

Conseil: Faites-le dans les deux sources de données.

Voici le résultat :

Ne manquez rien

Vérifiez le port à utiliser sur localhost :

1.	[serviceUrl]="'http://localhost:59657/api/reports/'"

Vérifiez le reportsPath pour indiquer le chemin souhaité vers les modèles/définitions de rapport (fichiers TRDP, TRDX et TRBP) :

1.	var reportsPath = builder.Environment.WebRootPath;
2.	 
3.	
4.	builder.Services.TryAddSingleton<IReportServiceConfiguration>(sp =>
5.	    new ReportServiceConfiguration
6.	    {
7.	        
8.	        ReportingEngineConfiguration = sp.GetService<IConfiguration>(),
9.	 
10.	        
11.	        
12.	        HostAppId = "Net8RestServiceWithCors",
13.	        Storage = new FileStorage(),
14.	        ReportSourceResolver = new TypeReportSourceResolver()
15.	                                .AddFallbackResolver(
16.	                                    new UriReportSourceResolver(reportsPath))
17.	    });

Pour mettre à jour votre visionneuse de rapports telerik-angular-native-native, exécutez la commande :

1.	npm i @progress/telerik-angular-native-report-viewer

Conclusion

J’ai donné un guide essentiel pour utiliser Angular pour ouvrir les modèles Telerik Reporting. Les processus de connexion et de routage doivent également être pris en compte pour le déploiement dans un environnement de production. La configuration des paramètres de Microsoft SQL Server est accessible, comme on peut le voir.

N’oubliez pas d’appeler l’équipe d’assistance chaque fois que vous avez besoin d’aide, même pendant la période d’évaluation.

Si vous avez des questions sur cet article, veuillez me contacter via LinkedIn. Je suis disponible pour vous aider de développeur à développeur. Je parle le portugais brésilien et l’anglais.

Essayez-le par vous-même

Je recommande fortement la suite complète d’outils Telerik et Kendo UI de Progress. Essayez le pack maintenant, gratuitement pendant 30 jours :

Essayez Telerik DevCraft

Références