TsgcHTMLComponent_ReportDesigner: ein Berichts-Designer, der im Browser läuft. Er bearbeitet die Definition eines TsgcHTMLReport, seine Bänder, Elemente, Parameter, Schriften und Seiteneinrichtung, mit einer PDF-Vorschau, die die Berichts-Engine selbst zeichnet. Entwickler bauen damit die Berichte einer Anwendung, und Endanwender passen einen Bericht ohne Desktop-Werkzeug an ihre Bedürfnisse an, in Delphi, C++ Builder und .NET.
Verknüpfen Sie ihn mit einem TsgcHTMLReport und rendern Sie ihn. Jede Bearbeitung geschieht im Browser, ohne Anfrage während des Entwerfens. Speichern sendet die Definition an den Server, der sie validiert und als JSON an OnSave übergibt. Mit AutoApply ändert sich der Bericht sofort, sodass der Report Viewer desselben Berichts den neuen Entwurf druckt.
TsgcHTMLComponent_ReportDesigner, der die Definition eines verknüpften TsgcHTMLReport bearbeitet
Eine Symbolleiste, eine Toolbox, die Datenfelder, die Seite mit ihren Bändern, ein Inspektor, die Parameter und eine PDF-Vorschau, auf dem Bootstrap-5.3-CSS und dem Bootstrap-Icons-CSS
Delphi, C++ Builder, .NET
Der Bericht lädt seinen zuletzt gespeicherten Entwurf mit LoadFromJSON. Der Designer bearbeitet ihn, OnSave behält die Definition für den nächsten Start des Servers, und mit AutoApply ändert jedes Speichern den Bericht sofort.
uses
sgcHTML_Report, sgcHTML_Component_ReportDesigner;
// der Bericht
oReport := TsgcHTMLReport.Create(Self);
oReport.Name := 'OrdersReport';
oReport.Title := 'Orders';
oReport.DataSet := qryOrders;
oReport.LoadFromJSON(LoadDefinition('orders')); // der zuletzt gespeicherte Entwurf
// der 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 ist die Definition, vom Server bereits in einen Arbeitsbericht geladen
StoreDefinition('orders', aJSON); // Ihre Datenbank oder Datei
end;@* Views/Reports/Design.cshtml: OrdersReport ist ein langlebiger 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;
// der Bericht
var report = new TsgcHTMLReport();
report.Name = "OrdersReport";
report.Title = "Orders";
report.LoadFromJSON(LoadDefinition("orders"));
// der Designer, mit einem Entwurf pro Benutzer
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;Ein Berichts-Designer im Browser und eine Vorschau, die dieselbe Engine druckt, die auch den Bericht druckt.
Neu, eine .json-Definition vom Computer des Benutzers öffnen, Speichern, Rückgängig und Wiederholen, Zoom, Raster einrasten und Seite einrichten mit Seitengröße, Ausrichtung und Rändern. Ausrichten (links, Mitten, rechts, oben, mittig, unten, gleiche Breite, gleiche Höhe oder gleiche Größe), in den Vordergrund, in den Hintergrund, kopieren, einfügen, duplizieren und löschen sowie zwischen Entwurf und Vorschau wechseln.
Die Toolbox bietet Text, Bild, Linie, Rechteck, Diagramm, Rich-Text, Barcode, QR-Code und Unterbericht: Ein Klick fügt das Element dem ausgewählten Band hinzu, ein Ziehen legt es an der Stelle auf einem beliebigen Band ab. Datenfelder listet die Felder der Datenquelle auf, und ein Klick oder Ablegen fügt ein an das Feld gebundenes Textelement hinzu.
Die Zeichenfläche zeigt die Seite mit ihren Bändern im gewählten Zoom, jedes mit seiner Beschriftung und einem Griff, der seine Höhe ändert. Die Bänderliste fügt Berichtskopf, Seitenkopf, Gruppenkopf, Detail, Gruppenfuß, Seitenfuß oder Berichtsfuß hinzu, verschiebt und löscht sie und legt das Gruppenfeld eines Gruppenbands fest.
Klicken zum Auswählen, Strg+Klick oder Umschalt+Klick zum Erweitern der Auswahl, oder ein Gummiband auf einem leeren Teil der Zeichenfläche ziehen. Ein Ziehen verschiebt die Auswahl, auch auf ein anderes Band, die acht Griffe ändern die Größe, und das Band unter einem Ziehvorgang wird hervorgehoben. Jede Änderung ist ein Rückgängig-Schritt.
Der Inspektor bearbeitet jede veröffentlichte Eigenschaft der Berichts-Engine für die Auswahl, das Band oder den Bericht, mit Feld einfügen, Aggregate und Berichtswerte zum Schreiben von Ausdrücken. Das Register Parameter enthält, was der Report Viewer abfragt, und die Schriften des Berichts können eine .ttf-, .ttc- oder .otf-Datei in die Definition einbetten.
Die Vorschau druckt die Definition, die gerade bearbeitet wird, nicht die gespeicherte, auf einem Arbeitsbericht, der die Daten und die Ereignisse des Berichts teilt, sodass das PDF das ist, das der Bericht drucken wird. Sie erscheint im eingebetteten PDF-Viewer oder in einem iframe mit dem PDF-Viewer des Browsers, festgelegt durch PreviewMode.
Tab wandert durch die Elemente der Zeichenfläche, die Pfeiltasten verschieben die Auswahl um einen Rasterschritt, Umschalt+Pfeiltasten ändern ihre Größe, und Alt+Auf und Alt+Ab verschieben sie in das vorherige oder nächste Band. Strg+C, Strg+V und Strg+D kopieren, fügen ein und duplizieren, Strg+Z und Strg+Y machen rückgängig und wiederholen, und Strg+S speichert an jeder Stelle im Designer.
Solange ein Entwurf nicht gespeicherte Änderungen hat, zeigt der Designer Nicht gespeicherte Änderungen, und der Browser fragt nach, bevor die Seite verlassen wird. Ein Parameter oder eine Schrift ohne Namen wird ausgewählt und fokussiert, bevor etwas gesendet wird. Der Designer folgt data-bs-theme="dark" und dir="rtl" der Seite, und ein höflicher Live-Bereich kündigt seine Meldungen an.
Die Member, zu denen Sie am häufigsten greifen.
Report ist der TsgcHTMLReport, der entworfen wird. Mit AutoApply (standardmäßig an) lädt ein Speichern die Definition innerhalb seines Lock hinein, und eine Vorschau ändert ihn nie. ReadOnly zeigt den Entwurf und die Vorschau, lässt den Benutzer die Eigenschaften lesen und lehnt Speichern auch auf dem Server ab.
OnSave(Sender, aJSON, aAccept, aErrorMessage) erhält die Definition, nachdem der Server sie mit LoadFromJSON in einen Arbeitsbericht geladen hat, sodass eine Definition, die sich nicht laden lässt, Ihren Code nie erreicht. Speichern Sie sie dort, wo Sie Ihre Daten halten, oder setzen Sie aAccept auf False mit einem eigenen Text in aErrorMessage.
Ein Designer bedient jeden Benutzer. Setzen Sie AutoApply auf False, behalten Sie die Definition des Benutzers in OnSave und geben Sie den Bericht des Benutzers in OnGetReport des Designers und des Report Viewers zurück. Es wird im Thread der Anfrage ausgelöst, wo sgcHTMLRequestSession die Sitzung liefert.
OnGetFieldNames(Sender, aFields) erhält die Felder der Datenquelle, um die Liste zu ändern, die der Designer zeigt. SubReports und Charts benennen die Komponenten, die für ein Unterbericht-Element und als Diagrammquelle angeboten werden, bei leerer Liste jede des Owners des Berichts, und FontNames die Schriftfamilien der Schrift-Editoren.
MaxSize begrenzt die gesendete Definition (standardmäßig 1 MB), vom Browser und erneut vom Server geprüft, und PreviewMaxSize das Vorschau-PDF (8 MB). Zwischen Anfragen wird nichts auf dem Server gespeichert. Ein Benutzer, der einen Bericht entwirft, kann jedes Feld seiner Datenquelle drucken, entfernen Sie also die Felder, die Benutzer nicht sehen dürfen, aus der Datenquelle selbst.
Doppelklicken Sie auf einen TsgcHTMLReport in einem Formular oder wählen Sie Bericht entwerfen... in seinem Kontextmenü, um denselben Designer in einem Fenster der IDE zu öffnen, mit den Datenfeldern, Unterberichten und Diagrammen des Formulars. Jedes Speichern wird in den Bericht im Formular geschrieben. Es braucht Delphi 10.4 oder neuer unter Windows und die WebView2-Runtime, und Im Browser öffnen öffnet denselben Designer im Standardbrowser.
Mit ActionURL und ohne HTMXEngine sendet das Skript die Anfragen zum Speichern, zur Vorschau und zu den Feldern an Ihre URL, und Ihr Host reicht sie an DispatchComponentEvent weiter. In der Seite bietet window.sgcReportDesigner die Funktionen getJSON, setJSON, isDirty, save, preview, undo und redo.
In einer Razor-View rendert der Tag Helper <sgc-report-designer> den Designer, und Speichern und Vorschau senden an den Komponenten-Ereignis-Endpunkt von UseSgcHtml. report nimmt einen langlebigen TsgcHTMLReport, und die MaxRequestBodySize von Kestrel (standardmäßig 30 MB) begrenzt eine Anfrage weiterhin.
Demos\60.HTML\01.RunTime\32.ReportDesigner ist sgc Report Studio, ein Server auf Port 8134, der vier Berichte im Browser entwirft: Bestellungen mit verschachtelten Unterberichten, einen Kundenbrief in Rich-Text, der über zwei Seiten fließt, eine Rechnung auf Englisch, Japanisch, Chinesisch, Koreanisch, Arabisch oder Russisch und einen Verkaufsbericht mit Diagrammen. Jeder Browser behält einen eigenen Entwurf, und das Register Vorschau druckt ihn mit dem Report Viewer. Die Designtime-, Lazarus- und .NET-Versionen spiegeln sie.
| Online ausprobierenSehen Sie es in der Demo Berichtsdesigner, live auf dem eSeGeCe-Demoserver. | Öffnen | |
| Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente. | Öffnen | |
| Report Viewer und TsgcHTMLReportDie Berichts-Engine, die der Designer bearbeitet, und der Viewer, der sie druckt. | Öffnen | |
| Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten. | Öffnen | |
| Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte. | Öffnen | |
| PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode. | Öffnen |