TsgcHTMLComponent_ReportDesigner: a report designer that runs in the browser. It edits the definition of a TsgcHTMLReport, its bands, items, parameters, fonts and page setup, with a PDF preview drawn by the report engine itself. Developers build the reports of an application with it, and end users adapt a report to their needs without a desktop tool, in Delphi, C++ Builder and .NET.
Link it to a TsgcHTMLReport and render it. Every edit happens in the browser, with no request while the user designs. Save posts the definition to the server, which validates it and hands it to OnSave as JSON. With AutoApply the report changes at once, so the Report Viewer of the same report prints the new design.
TsgcHTMLComponent_ReportDesigner, which edits the definition of a linked TsgcHTMLReport
A toolbar, a toolbox, the data fields, the page with its bands, an inspector, the parameters and a PDF preview, on the Bootstrap 5.3 CSS and the Bootstrap Icons CSS
Delphi, C++ Builder, .NET
The report loads its last saved design with LoadFromJSON. The designer edits it, OnSave keeps the definition for the next start of the server, and with AutoApply every save changes the report at once.
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;A report designer in the browser, and a preview printed by the same engine that prints the report.
New, Open a .json definition from the computer of the user, Save, Undo and Redo, Zoom, Snap grid and Page setup with the page size, orientation and margins. Align (left, centres, right, top, middle, bottom, same width, same height or same size), bring to front, send to back, copy, paste, duplicate and delete, and switch between Design and Preview.
The toolbox offers Text, Image, Line, Rectangle, Chart, Rich text, Barcode, QR code and Subreport: a click adds the item to the selected band, a drag drops it at the point on any band. Data fields lists the fields of the data source, and a click or a drop adds a text item bound to the field.
The canvas shows the page with its bands at the zoom chosen, each with its caption and a handle that changes its height. The bands list adds a report header, page header, group header, detail, group footer, page footer or report footer, moves and deletes them, and sets the group field of a group band.
Click to select, Ctrl+click or Shift+click to add to the selection, or draw a rubber band on an empty part of the canvas. A drag moves the selection, onto another band too, the eight handles resize, and the band under a drag is highlighted. Every change is one undo step.
The inspector edits every published property of the report engine for the selection, the band or the report, with Insert field, Aggregates and Report values to write expressions. The Parameters tab holds what the Report Viewer asks for, and the fonts of the report can embed a .ttf, .ttc or .otf file in the definition.
Preview prints the definition being edited, not the saved one, on a scratch report that shares the data and the events of the report, so the PDF is the one the report will print. It shows in the embedded PDF viewer or in an iframe with the PDF viewer of the browser, set by PreviewMode.
Tab moves through the items of the canvas, the arrows move the selection by one grid step, Shift+arrows resize it, and Alt+Up and Alt+Down move it to the previous or next band. Ctrl+C, Ctrl+V and Ctrl+D copy, paste and duplicate, Ctrl+Z and Ctrl+Y undo and redo, and Ctrl+S saves anywhere in the designer.
While a design has changes that are not saved, the designer shows Unsaved changes and the browser asks before the page is left. A parameter or a font without a name is selected and focused before anything is posted. The designer follows data-bs-theme="dark" and dir="rtl" of the page, and a polite live region announces its messages.
The members you reach for most often.
Report is the TsgcHTMLReport being designed. With AutoApply (on by default) a save loads the definition into it inside its Lock, and a preview never changes it. ReadOnly shows the design and the preview, lets the user read the properties, and refuses Save on the server too.
OnSave(Sender, aJSON, aAccept, aErrorMessage) receives the definition after the server has loaded it into a scratch report with LoadFromJSON, so a definition that does not load never reaches your code. Store it where you keep your data, or set aAccept to False with your own text in aErrorMessage.
One designer serves every user. Set AutoApply to False, keep the definition of the user in OnSave, and return the report of the user in OnGetReport of the designer and of the Report Viewer. It fires on the thread of the request, where sgcHTMLRequestSession gives the session.
OnGetFieldNames(Sender, aFields) receives the fields of the data source, to change the list the designer shows. SubReports and Charts name the components offered for a subreport item and as chart source, every one of the Owner of the report when empty, and FontNames the font families of the font editors.
MaxSize limits the posted definition (1 MB by default), checked by the browser and again by the server, and PreviewMaxSize the preview PDF (8 MB). Nothing is stored on the server between requests. A user who designs a report can print every field of its data source, so remove the fields users must not see from the data source itself.
Double click a TsgcHTMLReport on a form, or choose Design report... in its context menu, to open the same designer in a window of the IDE, with the data fields, subreports and charts of the form. Every Save is written to the report on the form. It needs Delphi 10.4 or later on Windows and the WebView2 runtime, and Open in browser opens the same designer in the default browser.
With ActionURL and no HTMXEngine, the script posts the save, the preview and the fields requests to your URL, and your host passes them to DispatchComponentEvent. In the page, window.sgcReportDesigner offers getJSON, setJSON, isDirty, save, preview, undo and redo.
In a Razor view the <sgc-report-designer> Tag Helper renders the designer, and Save and Preview post to the component events endpoint of UseSgcHtml. report takes a long-lived TsgcHTMLReport, and the MaxRequestBodySize of Kestrel (30 MB by default) still caps a request.
Demos\60.HTML\01.RunTime\32.ReportDesigner is sgc Report Studio, a server on port 8134 that designs four reports in the browser: orders with nested subreports, a customer letter in rich text that flows over two pages, an invoice in English, Japanese, Chinese, Korean, Arabic or Russian, and a sales report with charts. Every browser keeps a design of its own, and the Preview tab prints it with the Report Viewer. The design time, Lazarus and .NET versions mirror it.
| Try It OnlineSee it in the Report Designer demo, running live on the eSeGeCe demo server. | Open | |
| Online HelpFull API reference and usage guide for this component. | Open | |
| Report Viewer and TsgcHTMLReportThe report engine the designer edits, and the viewer that prints it. | Open | |
| All sgcHTML ComponentsBrowse the full feature matrix of 80+ components. | Open | |
| Download Free TrialThe 30-day trial ships the 60.HTML demo projects. | Open | |
| PricingSingle, Team and Site licenses with full source code. | Open |