TsgcHTMLComponent_ReportDesigner: projektant raportów działający w przeglądarce. Edytuje definicję TsgcHTMLReport, jego sekcje, elementy, parametry, czcionki i ustawienia strony, z podglądem PDF rysowanym przez sam silnik raportów. Deweloperzy budują nim raporty aplikacji, a użytkownicy końcowi dostosowują raport do swoich potrzeb bez narzędzia pulpitowego, w Delphi, C++ Builder i .NET.
Połącz go z TsgcHTMLReport i wyrenderuj. Każda edycja odbywa się w przeglądarce, bez żądań podczas projektowania. Zapisz wysyła definicję na serwer, który ją waliduje i przekazuje do OnSave jako JSON. Z AutoApply raport zmienia się od razu, więc Report Viewer tego samego raportu drukuje nowy projekt.
TsgcHTMLComponent_ReportDesigner, który edytuje definicję połączonego TsgcHTMLReport
Pasek narzędzi, przybornik, pola danych, strona z sekcjami, inspektor, parametry i podgląd PDF, na CSS Bootstrap 5.3 i CSS Bootstrap Icons
Delphi, C++ Builder, .NET
Raport wczytuje swój ostatnio zapisany projekt przez LoadFromJSON. Projektant go edytuje, OnSave zachowuje definicję do następnego startu serwera, a z AutoApply każdy zapis od razu zmienia raport.
uses
sgcHTML_Report, sgcHTML_Component_ReportDesigner;
// raport
oReport := TsgcHTMLReport.Create(Self);
oReport.Name := 'OrdersReport';
oReport.Title := 'Orders';
oReport.DataSet := qryOrders;
oReport.LoadFromJSON(LoadDefinition('orders')); // ostatnio zapisany projekt
// projektant
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 to definicja, już wczytana na serwerze do raportu roboczego
StoreDefinition('orders', aJSON); // Twoja baza danych lub plik
end;@* Views/Reports/Design.cshtml: OrdersReport to długo żyjący 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;
// raport
var report = new TsgcHTMLReport();
report.Name = "OrdersReport";
report.Title = "Orders";
report.LoadFromJSON(LoadDefinition("orders"));
// projektant, z projektem na użytkownika
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;Projektant raportów w przeglądarce i podgląd drukowany przez ten sam silnik, który drukuje raport.
Nowy, Otwórz definicję .json z komputera użytkownika, Zapisz, Cofnij i Ponów, Powiększenie, Przyciągaj do siatki i Ustawienia strony z rozmiarem, orientacją i marginesami. Wyrównaj (do lewej, do środka, do prawej, do góry, w pionie, do dołu, ta sama szerokość, ta sama wysokość lub ten sam rozmiar), przenieś na wierzch, przenieś na spód, kopiuj, wklej, duplikuj i usuń oraz przełączanie między Projekt i Podgląd.
Przybornik oferuje Tekst, Obraz, Linię, Prostokąt, Wykres, Tekst sformatowany, Kod kreskowy, Kod QR i Podraport: kliknięcie dodaje element do wybranej sekcji, przeciągnięcie upuszcza go w punkcie na dowolnej sekcji. Pola danych wymieniają pola źródła danych, a kliknięcie lub upuszczenie dodaje element tekstowy powiązany z polem.
Kanwa pokazuje stronę z sekcjami w wybranym powiększeniu, każdą z podpisem i uchwytem zmieniającym jej wysokość. Lista sekcji dodaje nagłówek raportu, nagłówek strony, nagłówek grupy, szczegóły, stopkę grupy, stopkę strony lub stopkę raportu, przenosi je i usuwa oraz ustawia pole grupy sekcji grupy.
Kliknij, aby zaznaczyć, Ctrl+kliknięcie lub Shift+kliknięcie, aby dodać do zaznaczenia, albo narysuj ramkę zaznaczenia na pustej części kanwy. Przeciągnięcie przenosi zaznaczenie, także na inną sekcję, osiem uchwytów zmienia rozmiar, a sekcja pod przeciąganiem jest podświetlona. Każda zmiana to jeden krok cofania.
Inspektor edytuje każdą publikowaną właściwość silnika raportów dla zaznaczenia, sekcji lub raportu, z Wstaw pole, Agregaty i Wartości raportu do pisania wyrażeń. Karta Parametry zawiera to, o co pyta Report Viewer, a czcionki raportu mogą osadzać plik .ttf, .ttc lub .otf w definicji.
Podgląd drukuje edytowaną definicję, nie zapisaną, na raporcie roboczym, który współdzieli dane i zdarzenia raportu, więc PDF jest tym, który raport wydrukuje. Pokazuje się we wbudowanej przeglądarce PDF albo w iframe z przeglądarką PDF przeglądarki, według PreviewMode.
Tab przechodzi po elementach kanwy, strzałki przesuwają zaznaczenie o jeden krok siatki, Shift+strzałki zmieniają jego rozmiar, a Alt+Góra i Alt+Dół przenoszą je do poprzedniej lub następnej sekcji. Ctrl+C, Ctrl+V i Ctrl+D kopiują, wklejają i duplikują, Ctrl+Z i Ctrl+Y cofają i ponawiają, a Ctrl+S zapisuje w dowolnym miejscu projektanta.
Gdy projekt ma niezapisane zmiany, projektant pokazuje Niezapisane zmiany, a przeglądarka pyta przed opuszczeniem strony. Parametr lub czcionka bez nazwy jest zaznaczany i otrzymuje fokus, zanim cokolwiek zostanie wysłane. Projektant podąża za data-bs-theme="dark" i dir="rtl" strony, a uprzejmy region na żywo ogłasza jego komunikaty.
Składowe, po które sięgasz najczęściej.
Report to projektowany TsgcHTMLReport. Z AutoApply (domyślnie włączone) zapis wczytuje definicję do niego w jego Lock, a podgląd nigdy go nie zmienia. ReadOnly pokazuje projekt i podgląd, pozwala czytać właściwości i odrzuca Zapisz także na serwerze.
OnSave(Sender, aJSON, aAccept, aErrorMessage) otrzymuje definicję po wczytaniu jej przez serwer do raportu roboczego przez LoadFromJSON, więc definicja, która się nie wczytuje, nigdy nie dociera do Twojego kodu. Zapisz ją tam, gdzie trzymasz dane, albo ustaw aAccept na False z własnym tekstem w aErrorMessage.
Jeden projektant obsługuje każdego użytkownika. Ustaw AutoApply na False, zachowaj definicję użytkownika w OnSave i zwróć raport użytkownika w OnGetReport projektanta i Report Viewer. Uruchamia się w wątku żądania, gdzie sgcHTMLRequestSession daje sesję.
OnGetFieldNames(Sender, aFields) otrzymuje pola źródła danych, aby zmienić listę pokazywaną przez projektanta. SubReports i Charts nazywają komponenty oferowane dla elementu podraportu i jako źródło wykresu, a gdy puste, każdy z Owner raportu, natomiast FontNames to rodziny czcionek edytorów czcionek.
MaxSize ogranicza wysyłaną definicję (domyślnie 1 MB), sprawdzaną przez przeglądarkę i ponownie przez serwer, a PreviewMaxSize ogranicza PDF podglądu (8 MB). Między żądaniami nic nie jest przechowywane na serwerze. Użytkownik, który projektuje raport, może wydrukować każde pole swojego źródła danych, więc usuń z samego źródła danych pola, których użytkownicy nie mogą widzieć.
Kliknij dwukrotnie TsgcHTMLReport na formularzu albo wybierz Design report... w jego menu kontekstowym, aby otworzyć ten sam projektant w oknie IDE, z polami danych, podraportami i wykresami formularza. Każdy Zapisz jest zapisywany w raporcie na formularzu. Wymaga Delphi 10.4 lub nowszego w Windows i środowiska WebView2, a Open in browser otwiera ten sam projektant w domyślnej przeglądarce.
Z ActionURL i bez HTMXEngine skrypt wysyła żądania zapisu, podglądu i pól na Twój adres URL, a Twój host przekazuje je do DispatchComponentEvent. Na stronie window.sgcReportDesigner oferuje getJSON, setJSON, isDirty, save, preview, undo i redo.
W widoku Razor Tag Helper <sgc-report-designer> renderuje projektant, a Zapisz i Podgląd wysyłają do punktu końcowego zdarzeń komponentów z UseSgcHtml. report przyjmuje długo żyjący TsgcHTMLReport, a MaxRequestBodySize w Kestrel (domyślnie 30 MB) nadal ogranicza żądanie.
Demos\60.HTML\01.RunTime\32.ReportDesigner to sgc Report Studio, serwer na porcie 8134, który projektuje cztery raporty w przeglądarce: zamówienia z zagnieżdżonymi podraportami, list do klienta w tekście sformatowanym płynący przez dwie strony, fakturę po angielsku, japońsku, chińsku, koreańsku, arabsku lub rosyjsku oraz raport sprzedaży z wykresami. Każda przeglądarka zachowuje własny projekt, a karta Podgląd drukuje go w Report Viewer. Wersje design time, Lazarus i .NET są jego odpowiednikami.
| Wypróbuj onlineZobacz to w demie Projektant raportów, działającym na żywo na serwerze demo eSeGeCe. | Otwórz | |
| Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu. | Otwórz | |
| Report Viewer i TsgcHTMLReportSilnik raportów, który edytuje projektant, oraz przeglądarka, która go drukuje. | Otwórz | |
| Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 80+ komponentów. | Otwórz | |
| Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML. | Otwórz | |
| CennikLicencje Single, Team i Site z pełnym kodem źródłowym. | Otwórz |