TsgcHTMLComponent_ReportDesigner: un designer di report che gira nel browser. Modifica la definizione di un TsgcHTMLReport, le sue bande, elementi, parametri, font e impostazione della pagina, con un'anteprima PDF disegnata dallo stesso motore di report. Gli sviluppatori costruiscono con esso i report di un'applicazione, e gli utenti finali adattano un report alle proprie esigenze senza uno strumento desktop, in Delphi, C++ Builder e .NET.
Collegalo a un TsgcHTMLReport e visualizzalo. Ogni modifica avviene nel browser, senza richieste mentre l'utente progetta. Salva invia la definizione al server, che la valida e la consegna a OnSave come JSON. Con AutoApply il report cambia subito, così il Report Viewer dello stesso report stampa il nuovo progetto.
TsgcHTMLComponent_ReportDesigner, che modifica la definizione di un TsgcHTMLReport collegato
Una barra degli strumenti, una casella degli strumenti, i campi dati, la pagina con le sue bande, un ispettore, i parametri e un'anteprima PDF, sul CSS di Bootstrap 5.3 e sul CSS di Bootstrap Icons
Delphi, C++ Builder, .NET
Il report carica l'ultimo progetto salvato con LoadFromJSON. Il designer lo modifica, OnSave conserva la definizione per il prossimo avvio del server e, con AutoApply, ogni salvataggio cambia subito il report.
uses
sgcHTML_Report, sgcHTML_Component_ReportDesigner;
// il report
oReport := TsgcHTMLReport.Create(Self);
oReport.Name := 'OrdersReport';
oReport.Title := 'Orders';
oReport.DataSet := qryOrders;
oReport.LoadFromJSON(LoadDefinition('orders')); // l'ultimo progetto salvato
// il 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 è la definizione, già caricata dal server in un report temporaneo
StoreDefinition('orders', aJSON); // il tuo database o file
end;@* Views/Reports/Design.cshtml: OrdersReport è un TsgcHTMLReport di lunga durata *@
@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;
// il report
var report = new TsgcHTMLReport();
report.Name = "OrdersReport";
report.Title = "Orders";
report.LoadFromJSON(LoadDefinition("orders"));
// il designer, con un progetto per utente
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 designer di report nel browser, e un'anteprima stampata dallo stesso motore che stampa il report.
Nuovo, Apri una definizione .json dal computer dell'utente, Salva, Annulla e Ripristina, Zoom, Aggancia alla griglia e Imposta pagina con formato, orientamento e margini. Allinea (sinistra, centri, destra, alto, centro, basso, stessa larghezza, stessa altezza o stessa dimensione), porta in primo piano, porta in secondo piano, copia, incolla, duplica ed elimina, e passa tra Progettazione e Anteprima.
La casella degli strumenti offre Testo, Immagine, Linea, Rettangolo, Grafico, Testo formattato, Codice a barre, Codice QR e Sottoreport: un clic aggiunge l'elemento alla banda selezionata, un trascinamento lo rilascia nel punto di una qualsiasi banda. Campi dati elenca i campi dell'origine dati, e un clic o un rilascio aggiunge un elemento di testo collegato al campo.
La tela mostra la pagina con le sue bande allo zoom scelto, ciascuna con la propria didascalia e una maniglia che ne cambia l'altezza. L'elenco delle bande aggiunge un'intestazione del report, un'intestazione di pagina, un'intestazione di gruppo, un dettaglio, un piè di gruppo, un piè di pagina o un piè del report, le sposta ed elimina, e imposta il campo di gruppo di una banda di gruppo.
Clic per selezionare, Ctrl+clic o Maiusc+clic per aggiungere alla selezione, oppure disegna un rettangolo di selezione su una parte vuota della tela. Un trascinamento sposta la selezione, anche su un'altra banda, le otto maniglie ridimensionano e la banda sotto un trascinamento viene evidenziata. Ogni modifica è un passo di annullamento.
L'ispettore modifica ogni proprietà pubblicata del motore di report per la selezione, la banda o il report, con Inserisci campo, Aggregati e Valori del report per scrivere espressioni. La scheda Parametri contiene ciò che chiede il Report Viewer, e i font del report possono incorporare un file .ttf, .ttc o .otf nella definizione.
L'anteprima stampa la definizione in corso di modifica, non quella salvata, su un report temporaneo che condivide i dati e gli eventi del report, quindi il PDF è quello che il report stamperà. Viene mostrata nel visualizzatore PDF incorporato o in un iframe con il visualizzatore PDF del browser, in base a PreviewMode.
Tab scorre gli elementi della tela, le frecce spostano la selezione di un passo di griglia, Maiusc+frecce la ridimensionano, e Alt+Su e Alt+Giù la spostano alla banda precedente o successiva. Ctrl+C, Ctrl+V e Ctrl+D copiano, incollano e duplicano, Ctrl+Z e Ctrl+Y annullano e ripetono, e Ctrl+S salva da qualsiasi punto del designer.
Finché un progetto ha modifiche non salvate, il designer mostra Modifiche non salvate e il browser chiede conferma prima di lasciare la pagina. Un parametro o un font senza nome viene selezionato e riceve il focus prima che venga inviato qualcosa. Il designer segue data-bs-theme="dark" e dir="rtl" della pagina, e una regione live cortese annuncia i suoi messaggi.
I membri che usi più spesso.
Report è il TsgcHTMLReport in fase di progettazione. Con AutoApply (attivo di default) un salvataggio carica in esso la definizione dentro il suo Lock, e un'anteprima non lo modifica mai. ReadOnly mostra il progetto e l'anteprima, permette all'utente di leggere le proprietà e rifiuta Salva anche sul server.
OnSave(Sender, aJSON, aAccept, aErrorMessage) riceve la definizione dopo che il server l'ha caricata in un report temporaneo con LoadFromJSON, quindi una definizione che non si carica non arriva mai al tuo codice. Memorizzala dove conservi i tuoi dati, oppure imposta aAccept su False con il tuo testo in aErrorMessage.
Un solo designer serve ogni utente. Imposta AutoApply su False, conserva la definizione dell'utente in OnSave e restituisci il report dell'utente in OnGetReport del designer e del Report Viewer. Scatta sul thread della richiesta, dove sgcHTMLRequestSession fornisce la sessione.
OnGetFieldNames(Sender, aFields) riceve i campi dell'origine dati, per modificare l'elenco che il designer mostra. SubReports e Charts nominano i componenti offerti per un elemento sottoreport e come origine del grafico, tutti quelli dell'Owner del report quando vuoti, e FontNames le famiglie di font degli editor di font.
MaxSize limita la definizione inviata (1 MB di default), controllata dal browser e di nuovo dal server, e PreviewMaxSize il PDF dell'anteprima (8 MB). Sul server non viene conservato nulla tra le richieste. Un utente che progetta un report può stampare ogni campo della sua origine dati, quindi rimuovi dall'origine dati stessa i campi che gli utenti non devono vedere.
Fai doppio clic su un TsgcHTMLReport in un form, o scegli Progetta report... nel suo menu contestuale, per aprire lo stesso designer in una finestra dell'IDE, con i campi dati, i sottoreport e i grafici del form. Ogni Salva viene scritto nel report sul form. Richiede Delphi 10.4 o successivo su Windows e il runtime WebView2, e Apri nel browser apre lo stesso designer nel browser predefinito.
Con ActionURL e senza HTMXEngine, lo script invia le richieste di salvataggio, anteprima e campi al tuo URL, e il tuo host le passa a DispatchComponentEvent. Nella pagina, window.sgcReportDesigner offre getJSON, setJSON, isDirty, save, preview, undo e redo.
In una vista Razor il Tag Helper <sgc-report-designer> renderizza il designer, e Salva e Anteprima inviano all'endpoint degli eventi dei componenti di UseSgcHtml. report accetta un TsgcHTMLReport di lunga durata, e il MaxRequestBodySize di Kestrel (30 MB di default) limita comunque una richiesta.
Demos\60.HTML\01.RunTime\32.ReportDesigner è sgc Report Studio, un server sulla porta 8134 che progetta quattro report nel browser: ordini con sottoreport annidati, una lettera ai clienti in testo formattato che scorre su due pagine, una fattura in inglese, giapponese, cinese, coreano, arabo o russo, e un report vendite con grafici. Ogni browser conserva un progetto proprio, e la scheda Anteprima lo stampa con il Report Viewer. Le versioni design time, Lazarus e .NET lo replicano.
| Provalo onlineGuardalo nella demo Designer di report, in esecuzione dal vivo sul server demo di eSeGeCe. | Apri | |
| Guida in lineaRiferimento API completo e guida all'uso di questo componente. | Apri | |
| Report Viewer e TsgcHTMLReportIl motore di report che il designer modifica, e il viewer che lo stampa. | Apri | |
| Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 80 componenti. | Apri | |
| Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML. | Apri | |
| PrezziLicenze Single, Team e Site con codice sorgente completo. | Apri |