TsgcHTMLComponent_ReportDesigner: een rapportontwerper die in de browser draait. Hij bewerkt de definitie van een TsgcHTMLReport, zijn banden, items, parameters, lettertypen en pagina-instelling, met een PDF-voorbeeld getekend door de rapportengine zelf. Ontwikkelaars bouwen er de rapporten van een toepassing mee, en eindgebruikers passen een rapport aan hun behoeften aan zonder desktophulpmiddel, in Delphi, C++ Builder en .NET.
Koppel hem aan een TsgcHTMLReport en render hem. Elke bewerking gebeurt in de browser, zonder verzoek terwijl de gebruiker ontwerpt. Opslaan verstuurt de definitie naar de server, die haar valideert en als JSON aan OnSave geeft. Met AutoApply verandert het rapport meteen, zodat de Report Viewer van hetzelfde rapport het nieuwe ontwerp afdrukt.
TsgcHTMLComponent_ReportDesigner, die de definitie van een gekoppelde TsgcHTMLReport bewerkt
Een werkbalk, een werkset, de gegevensvelden, de pagina met haar banden, een inspecteur, de parameters en een PDF-voorbeeld, op de Bootstrap 5.3-CSS en de Bootstrap Icons-CSS
Delphi, C++ Builder, .NET
Het rapport laadt zijn laatst opgeslagen ontwerp met LoadFromJSON. De designer bewerkt het, OnSave bewaart de definitie voor de volgende start van de server, en met AutoApply verandert elke opslag het rapport meteen.
uses
sgcHTML_Report, sgcHTML_Component_ReportDesigner;
// het rapport
oReport := TsgcHTMLReport.Create(Self);
oReport.Name := 'OrdersReport';
oReport.Title := 'Orders';
oReport.DataSet := qryOrders;
oReport.LoadFromJSON(LoadDefinition('orders')); // het laatst opgeslagen ontwerp
// de 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 de definitie, al door de server in een kladrapport geladen
StoreDefinition('orders', aJSON); // je database of bestand
end;@* Views/Reports/Design.cshtml: OrdersReport is een langlevende 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;
// het rapport
var report = new TsgcHTMLReport();
report.Name = "OrdersReport";
report.Title = "Orders";
report.LoadFromJSON(LoadDefinition("orders"));
// de designer, met een ontwerp per gebruiker
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;Een rapportontwerper in de browser, en een voorbeeld afgedrukt door dezelfde engine die het rapport afdrukt.
Nieuw, een .json-definitie openen vanaf de computer van de gebruiker, Opslaan, Ongedaan maken en Opnieuw, Zoom, Raster magnetisch en Pagina-instelling met paginaformaat, afdrukstand en marges. Uitlijnen (links, midden, rechts, boven, middelste, onder, gelijke breedte, gelijke hoogte of gelijk formaat), naar voren, naar achteren, kopiëren, plakken, dupliceren en verwijderen, en wisselen tussen Ontwerp en Voorbeeld.
De werkset biedt Tekst, Afbeelding, Lijn, Rechthoek, Grafiek, Rich text, Barcode, QR-code en Subrapport: een klik voegt het item toe aan de geselecteerde band, slepen zet het neer op het punt op elke band. Gegevensvelden somt de velden van de gegevensbron op, en een klik of neerzetten voegt een tekstitem toe dat aan het veld is gebonden.
Het canvas toont de pagina met haar banden op de gekozen zoom, elk met zijn bijschrift en een greep die zijn hoogte wijzigt. De bandenlijst voegt een rapportkop, paginakop, groepskop, detail, groepsvoet, paginavoet of rapportvoet toe, verplaatst en verwijdert ze, en stelt het groepsveld van een groepsband in.
Klik om te selecteren, Ctrl+klik of Shift+klik om aan de selectie toe te voegen, of teken een selectiekader op een leeg deel van het canvas. Slepen verplaatst de selectie, ook naar een andere band, de acht grepen wijzigen het formaat, en de band onder een sleepactie wordt gemarkeerd. Elke wijziging is één stap om ongedaan te maken.
De inspecteur bewerkt elke gepubliceerde eigenschap van de rapportengine voor de selectie, de band of het rapport, met Veld invoegen, Aggregaten en Rapportwaarden om expressies te schrijven. Het tabblad Parameters bevat wat de Report Viewer vraagt, en de lettertypen van het rapport kunnen een .ttf-, .ttc- of .otf-bestand in de definitie insluiten.
Het voorbeeld drukt de definitie af die wordt bewerkt, niet de opgeslagen, op een kladrapport dat de gegevens en de events van het rapport deelt, zodat de PDF degene is die het rapport zal afdrukken. Het verschijnt in de ingebedde PDF-viewer of in een iframe met de PDF-viewer van de browser, bepaald door PreviewMode.
Tab loopt door de items van het canvas, de pijltoetsen verplaatsen de selectie met één rasterstap, Shift+pijltoetsen wijzigen het formaat, en Alt+Omhoog en Alt+Omlaag verplaatsen haar naar de vorige of volgende band. Ctrl+C, Ctrl+V en Ctrl+D kopiëren, plakken en dupliceren, Ctrl+Z en Ctrl+Y maken ongedaan en voeren opnieuw uit, en Ctrl+S slaat overal in de designer op.
Zolang een ontwerp niet-opgeslagen wijzigingen heeft, toont de designer Niet-opgeslagen wijzigingen en vraagt de browser om bevestiging voordat de pagina wordt verlaten. Een parameter of een lettertype zonder naam wordt geselecteerd en gefocust voordat er iets wordt verzonden. De designer volgt data-bs-theme="dark" en dir="rtl" van de pagina, en een beleefd live-gebied kondigt zijn meldingen aan.
De leden die je het vaakst gebruikt.
Report is de TsgcHTMLReport die wordt ontworpen. Met AutoApply (standaard aan) laadt een opslag de definitie erin binnen zijn Lock, en een voorbeeld wijzigt hem nooit. ReadOnly toont het ontwerp en het voorbeeld, laat de gebruiker de eigenschappen lezen en weigert Opslaan ook op de server.
OnSave(Sender, aJSON, aAccept, aErrorMessage) ontvangt de definitie nadat de server haar met LoadFromJSON in een kladrapport heeft geladen, zodat een definitie die niet laadt je code nooit bereikt. Bewaar haar waar je je gegevens bewaart, of zet aAccept op False met een eigen tekst in aErrorMessage.
Eén designer bedient elke gebruiker. Zet AutoApply op False, bewaar de definitie van de gebruiker in OnSave en geef het rapport van de gebruiker terug in OnGetReport van de designer en van de Report Viewer. Het wordt geactiveerd op de thread van het verzoek, waar sgcHTMLRequestSession de sessie geeft.
OnGetFieldNames(Sender, aFields) ontvangt de velden van de gegevensbron, om de lijst te wijzigen die de designer toont. SubReports en Charts noemen de componenten die worden aangeboden voor een subrapportitem en als grafiekbron, bij een lege lijst elk van de Owner van het rapport, en FontNames de lettertypefamilies van de lettertype-editors.
MaxSize begrenst de verzonden definitie (standaard 1 MB), gecontroleerd door de browser en opnieuw door de server, en PreviewMaxSize de voorbeeld-PDF (8 MB). Tussen verzoeken wordt niets op de server opgeslagen. Een gebruiker die een rapport ontwerpt kan elk veld van de gegevensbron afdrukken, verwijder dus de velden die gebruikers niet mogen zien uit de gegevensbron zelf.
Dubbelklik op een TsgcHTMLReport op een formulier, of kies Rapport ontwerpen... in zijn contextmenu, om dezelfde designer in een venster van de IDE te openen, met de gegevensvelden, subrapporten en grafieken van het formulier. Elke opslag wordt naar het rapport op het formulier geschreven. Het vereist Delphi 10.4 of nieuwer onder Windows en de WebView2-runtime, en In browser openen opent dezelfde designer in de standaardbrowser.
Met ActionURL en zonder HTMXEngine verstuurt het script de verzoeken voor opslaan, voorbeeld en velden naar je URL, en je host geeft ze door aan DispatchComponentEvent. In de pagina biedt window.sgcReportDesigner de functies getJSON, setJSON, isDirty, save, preview, undo en redo.
In een Razor-view rendert de Tag Helper <sgc-report-designer> de designer, en Opslaan en Voorbeeld posten naar het componenteventeindpunt van UseSgcHtml. report neemt een langlevende TsgcHTMLReport, en de MaxRequestBodySize van Kestrel (standaard 30 MB) begrenst een verzoek nog steeds.
Demos\60.HTML\01.RunTime\32.ReportDesigner is sgc Report Studio, een server op poort 8134 die vier rapporten in de browser ontwerpt: orders met geneste subrapporten, een klantbrief in rich text die over twee pagina's loopt, een factuur in het Engels, Japans, Chinees, Koreaans, Arabisch of Russisch, en een verkooprapport met grafieken. Elke browser houdt een eigen ontwerp bij, en het tabblad Voorbeeld drukt het af met de Report Viewer. De designtime-, Lazarus- en .NET-versies spiegelen het.
| Online proberenBekijk het in de demo Rapportontwerper, live draaiend op de eSeGeCe-demoserver. | Openen | |
| Online helpVolledige API-referentie en gebruikshandleiding voor dit component. | Openen | |
| Report Viewer en TsgcHTMLReportDe rapportengine die de designer bewerkt, en de viewer die haar afdrukt. | Openen | |
| Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten. | Openen | |
| Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten. | Openen | |
| PrijzenSingle-, Team- en Site-licenties met volledige broncode. | Openen |