TsgcHTMLComponent_ReportDesigner : un concepteur de rapports qui s'exécute dans le navigateur. Il modifie la définition d'un TsgcHTMLReport, ses bandes, éléments, paramètres, polices et mise en page, avec un aperçu PDF dessiné par le moteur de rapports lui-même. Les développeurs y construisent les rapports d'une application, et les utilisateurs finaux adaptent un rapport à leurs besoins sans outil de bureau, en Delphi, C++ Builder et .NET.
Liez-le à un TsgcHTMLReport et rendez-le. Chaque modification se fait dans le navigateur, sans requête pendant que l'utilisateur conçoit. Enregistrer envoie la définition au serveur, qui la valide et la remet à OnSave en JSON. Avec AutoApply, le rapport change aussitôt, de sorte que le Report Viewer du même rapport imprime le nouveau design.
TsgcHTMLComponent_ReportDesigner, qui modifie la définition d'un TsgcHTMLReport lié
Une barre d'outils, une boîte à outils, les champs de données, la page avec ses bandes, un inspecteur, les paramètres et un aperçu PDF, sur le CSS Bootstrap 5.3 et le CSS Bootstrap Icons
Delphi, C++ Builder, .NET
Le rapport charge son dernier design enregistré avec LoadFromJSON. Le concepteur le modifie, OnSave conserve la définition pour le prochain démarrage du serveur, et avec AutoApply chaque enregistrement change le rapport aussitôt.
uses
sgcHTML_Report, sgcHTML_Component_ReportDesigner;
// the report
oReport := TsgcHTMLReport.Create(Self);
oReport.Name := 'OrdersReport';
oReport.Title := 'Orders';
oReport.DataSet := qryOrders;
oReport.LoadFromJSON(LoadDefinition('orders')); // the last saved design
// the designer
oDesigner := TsgcHTMLComponent_ReportDesigner.Create(Self);
oDesigner.Name := 'OrdersDesigner';
oDesigner.HTMXEngine := sgcHTMXEngine1;
oDesigner.Report := oReport;
oDesigner.OnSave := DesignerSave;
oTemplate.BodyContent := oDesigner.HTML;
procedure TForm1.DesignerSave(Sender: TObject; const aJSON: string;
var aAccept: Boolean; var aErrorMessage: string);
begin
// aJSON is the definition, already loaded into a scratch report by the server
StoreDefinition('orders', aJSON); // your database or file
end;@* Views/Reports/Design.cshtml: OrdersReport is a long-lived TsgcHTMLReport *@
@model ReportsModel
<sgc-report-designer name="orders" report="@Model.OrdersReport"
auto-apply="false" css-height="760px" sub-reports="LinesReport"
on-get-report="Model.GetReport" on-save="Model.SaveReport" />using esegece.sgcWebSockets;
// the report
var report = new TsgcHTMLReport();
report.Name = "OrdersReport";
report.Title = "Orders";
report.LoadFromJSON(LoadDefinition("orders"));
// the designer, with a design per user
var designer = new TsgcHTMLComponent_ReportDesigner();
designer.Name = "OrdersDesigner";
designer.HTMXEngine = engine;
designer.Report = report;
designer.AutoApply = false;
designer.OnSave += (object sender, string json, ref bool accept, ref string error) =>
accept = SaveUserReport(CurrentUserID(), json, ref error);
designer.OnGetReport += (object sender, ref TsgcHTMLReport? report) =>
report = GetUserReport(CurrentUserID()) ?? report;
template.BodyContent = designer.HTML;Un concepteur de rapports dans le navigateur, et un aperçu imprimé par le même moteur qui imprime le rapport.
Nouveau, Ouvrir une définition .json depuis l'ordinateur de l'utilisateur, Enregistrer, Annuler et Rétablir, Zoom, Grille magnétique et Mise en page avec le format de page, l'orientation et les marges. Aligner (à gauche, centres, à droite, en haut, au milieu, en bas, même largeur, même hauteur ou même taille), premier plan, arrière-plan, copier, coller, dupliquer et supprimer, et basculer entre Conception et Aperçu.
La boîte à outils propose Texte, Image, Ligne, Rectangle, Graphique, Texte enrichi, Code-barres, Code QR et Sous-rapport : un clic ajoute l'élément à la bande sélectionnée, un glisser-déposer le place au point voulu sur n'importe quelle bande. Les champs de données listent les champs de la source de données, et un clic ou un dépôt ajoute un élément texte lié au champ.
Le canevas affiche la page avec ses bandes au zoom choisi, chacune avec son intitulé et une poignée qui modifie sa hauteur. La liste des bandes ajoute un en-tête de rapport, un en-tête de page, un en-tête de groupe, un détail, un pied de groupe, un pied de page ou un pied de rapport, les déplace et les supprime, et définit le champ de groupe d'une bande de groupe.
Cliquez pour sélectionner, Ctrl+clic ou Maj+clic pour ajouter à la sélection, ou tracez un rectangle de sélection sur une partie vide du canevas. Un glisser déplace la sélection, vers une autre bande aussi, les huit poignées redimensionnent, et la bande sous un glisser est mise en évidence. Chaque modification est une étape d'annulation.
L'inspecteur modifie chaque propriété publiée du moteur de rapports pour la sélection, la bande ou le rapport, avec Insérer un champ, Agrégats et Valeurs du rapport pour écrire des expressions. L'onglet Paramètres contient ce que demande le Report Viewer, et les polices du rapport peuvent intégrer un fichier .ttf, .ttc ou .otf dans la définition.
Aperçu imprime la définition en cours de modification, pas celle qui est enregistrée, sur un rapport temporaire qui partage les données et les événements du rapport, de sorte que le PDF est celui que le rapport imprimera. Il s'affiche dans le visualiseur PDF intégré ou dans un iframe avec le visualiseur PDF du navigateur, selon PreviewMode.
Tab parcourt les éléments du canevas, les flèches déplacent la sélection d'un pas de grille, Maj+flèches la redimensionnent, et Alt+Haut et Alt+Bas la déplacent vers la bande précédente ou suivante. Ctrl+C, Ctrl+V et Ctrl+D copient, collent et dupliquent, Ctrl+Z et Ctrl+Y annulent et rétablissent, et Ctrl+S enregistre depuis n'importe où dans le concepteur.
Tant qu'un design a des modifications non enregistrées, le concepteur affiche Modifications non enregistrées et le navigateur demande confirmation avant de quitter la page. Un paramètre ou une police sans nom est sélectionné et reçoit le focus avant tout envoi. Le concepteur suit data-bs-theme="dark" et dir="rtl" de la page, et une région live polie annonce ses messages.
Les membres que vous utiliserez le plus souvent.
Report est le TsgcHTMLReport en cours de conception. Avec AutoApply (activé par défaut), un enregistrement y charge la définition dans son Lock, et un aperçu ne le modifie jamais. ReadOnly affiche le design et l'aperçu, laisse l'utilisateur lire les propriétés, et refuse aussi Enregistrer sur le serveur.
OnSave(Sender, aJSON, aAccept, aErrorMessage) reçoit la définition après que le serveur l'a chargée dans un rapport temporaire avec LoadFromJSON, de sorte qu'une définition qui ne se charge pas n'atteint jamais votre code. Stockez-la là où vous conservez vos données, ou définissez aAccept à False avec votre propre texte dans aErrorMessage.
Un concepteur sert tous les utilisateurs. Définissez AutoApply à False, conservez la définition de l'utilisateur dans OnSave, et renvoyez le rapport de l'utilisateur dans OnGetReport du concepteur et du Report Viewer. Il se déclenche sur le thread de la requête, où sgcHTMLRequestSession donne la session.
OnGetFieldNames(Sender, aFields) reçoit les champs de la source de données, pour modifier la liste que le concepteur affiche. SubReports et Charts nomment les composants proposés pour un élément sous-rapport et comme source de graphique, tous ceux de l'Owner du rapport lorsqu'ils sont vides, et FontNames les familles de polices des éditeurs de police.
MaxSize limite la définition envoyée (1 Mo par défaut), vérifiée par le navigateur puis de nouveau par le serveur, et PreviewMaxSize le PDF d'aperçu (8 Mo). Rien n'est stocké sur le serveur entre les requêtes. Un utilisateur qui conçoit un rapport peut imprimer chaque champ de sa source de données : retirez donc de la source de données elle-même les champs que les utilisateurs ne doivent pas voir.
Faites un double-clic sur un TsgcHTMLReport dans une fiche, ou choisissez Design report... dans son menu contextuel, pour ouvrir le même concepteur dans une fenêtre de l'IDE, avec les champs de données, les sous-rapports et les graphiques de la fiche. Chaque Enregistrer est écrit dans le rapport de la fiche. Il faut Delphi 10.4 ou ultérieur sur Windows et le runtime WebView2, et Open in browser ouvre le même concepteur dans le navigateur par défaut.
Avec ActionURL et sans HTMXEngine, le script envoie les requêtes d'enregistrement, d'aperçu et de champs à votre URL, et votre hôte les transmet à DispatchComponentEvent. Dans la page, window.sgcReportDesigner propose getJSON, setJSON, isDirty, save, preview, undo et redo.
Dans une vue Razor, le Tag Helper <sgc-report-designer> rend le concepteur, et Enregistrer et Aperçu envoient vers le point de terminaison des événements de composants de UseSgcHtml. report accepte un TsgcHTMLReport de longue durée de vie, et le MaxRequestBodySize de Kestrel (30 Mo par défaut) plafonne toujours une requête.
Demos\60.HTML\01.RunTime\32.ReportDesigner est sgc Report Studio, un serveur sur le port 8134 qui conçoit quatre rapports dans le navigateur : des commandes avec des sous-rapports imbriqués, un courrier client en texte enrichi qui s'étend sur deux pages, une facture en anglais, japonais, chinois, coréen, arabe ou russe, et un rapport de ventes avec des graphiques. Chaque navigateur conserve son propre design, et l'onglet Aperçu l'imprime avec le Report Viewer. Les versions design time, Lazarus et .NET en sont le miroir.
| Essayer en ligneVoyez-le dans la démo Concepteur de rapports, en fonctionnement direct sur le serveur de démos d'eSeGeCe. | Ouvrir | |
| Aide en ligneRéférence API complète et guide d'utilisation pour ce composant. | Ouvrir | |
| Report Viewer et TsgcHTMLReportLe moteur de rapports que le concepteur modifie, et le visualiseur qui l'imprime. | Ouvrir | |
| Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 80 composants. | Ouvrir | |
| Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML. | Ouvrir | |
| TarifsLicences Single, Team et Site avec code source complet. | Ouvrir |