Rapports riches avec le concepteur de rapports Web Telerik

Auparavant, vous avez vu comment construire le Tableau de bord cryptographique rapport dans le Rapports intégrés élégants et parfaits au pixel près avec Telerik Web Report Designer dans .NET 5 article de blog. Maintenant, nous avons préparé un nouveau chef-d’œuvre pour vous – le Rapport de conférence.

Créer des rapports au pixel près n’a jamais été aussi facile. Vous pourriez demander : « Mais comment est-ce possible ? Et ici nous avons la réponse. L’équipe Telerik Reporting travaille toujours à améliorer votre expérience tout en développant des rapports avec notre outils de conception de rapports parce que nous comprenons la valeur et l’importance que notre produit vous apporte.

Dans cet article de blog, nous utiliserons le Concepteur de rapports Web Telerik pour créer un rapport complexe que vous pourrez ensuite utiliser comme exemple pour vos futurs projets.

Intégration de Web Report Designer à une application .NET6

Le Web Report Designer peut être ajouté aux projets .NET Core en trois étapes simples à l’aide du modèle d’élément Visual Studio :

1. Créez une nouvelle application Web ASP.NET Core.
2. Faites un clic droit sur le projet -> Ajouter -> Nouvel article.
3. Sélectionnez le Telerik Web Report Designer HTML5 Page et définissez son nom sur index.html.

4. Suivez l’assistant jusqu’à ce qu’il soit terminé.

Une fois que vous avez ajouté le concepteur, exécutez l’application. Pour créer un nouveau rapport, cliquez sur Menu -> Nouveau -> tapez le nom du rapport et appuyez sur le Sauver bouton.

Construire le rapport

Le rapport que nous sommes sur le point de créer contiendra deux pages, l’une affichant le programme de la conférence et l’autre montrant les conférenciers qui présenteront. Sur la page du programme, nous ajouterons l’horaire de chaque jour – date, heure, informations sur le sujet et l’orateur. Et sur la deuxième page, nous fournirons des détails sur chaque conférencier – poste, entreprise, biographie, etc.

Ajout de la source de données

Nous commencerons par ajouter la source de données qui contiendra les données sur l’ordre du jour de la conférence et ses intervenants. Dans ce rapport, nous utiliserons Source de données JSON. Vous pouvez trouver le fichier JSON dans le Référentiel GitHub.

Pour configurer la source de données, accédez à la Composants onglet du concepteur -> Source de données JSON. Ensuite, vous pouvez soit accéder au fichier (Téléchargez le fichier JSON option), sélectionnez un fichier qui a déjà été ajouté aux actifs (Utiliser le fichier JSON existant) ou collez directement le JSON (Utiliser JSON en ligne) -> Suivant -> Finir.

Une fois que vous avez terminé d’ajouter les données, définissez le La source de données propriété du rapport comme source de données JSON.

Grouper les données

Nous voulons que le rapport contienne deux parties logiques : une affichant l’ordre du jour de la conférence et une autre fournissant des informations sur les intervenants. Pour cette raison, nous allons ajouter un groupe au rapport. Allez dans le panneau Propriétés du rapport -> étendre Données -> Groupes -> cliquer sur + -> Groupements -> définir le Expression être « =Champs.Groupe » -> Sauver.

Configuration de la section d’en-tête de groupe

1. Commencez par supprimer la section d’en-tête de page. Nous voulons utiliser uniquement l’en-tête du groupe.
2. Dans la section d’en-tête de groupe, nous ajouterons le logo de la conférence en insérant un Boîte d’image.
3. Nous souhaitons également afficher des informations pour chaque groupe. Ajoutez deux TextBoxes avec les valeurs suivantes : « = Fields.Title » et « = Fields.Subtitle ». Dans ce rapport, nous utiliserons la police Microsoft Sans Serif.
4. Met le Image de fond propriété de la section avec l’image du dossier de ressources (Référentiel GitHub).
5. Insérez l’image rectangle (également située dans le dossier de ressources) au bas de la section.
6. Étant donné que le groupe de haut-parleurs n’a pas de sous-titre, dans ce cas, nous souhaitons réduire la hauteur de la section d’en-tête de groupe et déplacer le rectangle vers le haut. Pour réduire la hauteur de l’en-tête de groupe lorsque le groupe est Haut-parleurs, ajoutez ce qui suit
   Contraignant à la section en sélectionnant la section -> Données ->
   Fixations -> +:

   Path: Height.
   Expression: = Fields.Group = "Program" ? "236px" : "176px"

7. Pour déplacer le rectangle, encore une fois, nous allons ajouter un nouveau Contraignant pour le Emplacement:

   Path: Location
   Expression: = Fields.Group = "Program" ? "0px, 224px" : "0px, 161px"

   Changer l’emplacement et la taille des éléments de rapport avec des liaisons n’est pas le meilleur moyen de modifier la mise en page lors de l’exécution. Nous vous recommandons généralement d’utiliser un élément de conteneur avec CanShrink défini sur true et de contrôler la visibilité de ses éléments enfants via les liaisons. Cependant, dans ce cas particulier, nous savons comment les limites des éléments de rapport doivent être modifiées, et nous voulons également le garder aussi simple que possible, donc la première approche est une option acceptable.

8. Enfin, réglez le Saut de page propriété de la section d’en-tête sur Avant. Nous faisons cela afin d’afficher chaque groupe sur une nouvelle page.

Affichage de l’ordre du jour de la conférence

1. Insérez un Lister du Composants onglet à la section des détails afin d’afficher les détails de chaque jour de la conférence. Il contiendra des informations sur la date et l’heure de la conférence, le sujet qui sera abordé et une description de celui-ci.
2. Met le Couleur de l’arrière plan propriété du panneau à : #0a36f5.
3. Étant donné que les champs sont imbriqués, nous devons définir la source de données de la liste en définissant les éléments suivants Contraignant:

   Path: DataSource
   Expression: =Fields.Data

4. Ajoutez les TextBoxes qui afficheront les données.
5. Met le Couleur de l’arrière plan propriété de la section de détail à : #260ea9.

Affichage des intervenants de la conférence

En général, nous répéterons ici les mêmes étapes que dans la section précédente : ajoutez une liste, définissez son DataSource via la liaison, insérez des zones de texte pour afficher les champs de données et un PictureBox pour afficher une photo de l’orateur.

Maintenant, nous voulons afficher une liste spécifique en fonction du groupe actuel. Par exemple, si le groupe actuel est « programme », nous souhaitons afficher la liste avec l’agenda et masquer la liste avec les intervenants.

Nous couvrirons cette exigence en utilisant Mise en forme conditionnelle pour la visibilité de la liste. Depuis les propriétés de la liste :

1. Sélectionnez la liste avec agenda et dans le menu Propriétés, sélectionnez Mise en forme conditionnelle.
2. Cliquer sur + pour créer une nouvelle règle et la définir comme suit :

   Expression: = Fields.Group
   Operator: =
   Value: ="Speakers"

3. Cliquez sur D’ACCORD et aller au Style section -> décocher Visible -> Sauver.

Répétez la même chose pour la liste des orateurs. Dans ce cas, la valeur de la règle sera ="Program".

Affichage du groupe actuel en bas de la page

Nous sommes presque en finale. Ajoutez un panneau au bas de la section de détail. Ajoutez-y deux zones de texte avec les valeurs suivantes : =ToUpper("Devreach") et =ToUpper(Fields.Group). Définissez la propriété Binding du panneau afin qu’il soit situé dans la position appropriée en fonction du groupe :

Path: Location
Expression: = Fields.Group = "Program" ? "0.1in, 1in" : "0.1in, 2.4in"

Look final et projet

Et nous avons tous terminé ! Cliquez sur le bouton Aperçu pour vérifier le résultat final.

Vous pouvez également consulter le rapport dans nos démos en ligne—Démo du rapport de conférence. Le projet complet est à retrouver dans notre Référentiel GitHub avec des exemples de projets.

Vous voulez essayer Telerik Reporting ?

Si vous ne l’avez toujours pas fait, commencez votre essai gratuit de Rapports Telerik aujourd’hui et partagez vos réflexions dans nos Portails de commentairesou directement dans les commentaires ci-dessous.

Rapports Telerik est un outil de reporting intégré .NET complet, facile à utiliser et puissant pour les applications Web et de bureau prenant en charge : Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET AJAX, HTML5/JS, Angular, React, Vue , WPF, WinForms et UWP.

Également disponible dans le cadre de notre
Offres groupées Telerik DevCraft, Reporting vous permet de créer, de styliser, d’afficher et d’exporter des rapports riches, interactifs et réutilisables pour présenter de manière attrayante des données analytiques et des données commerciales. Ajoutez des rapports à n’importe quelle application métier via les contrôles de la visionneuse de rapports. Exportez les rapports prêts dans plus de 15 formats.