Report Designer

TsgcHTMLComponent_ReportDesigner: tarayıcıda çalışan bir rapor tasarımcısı. Bir TsgcHTMLReport'un tanımını, yani bantlarını, öğelerini, parametrelerini, yazı tiplerini ve sayfa yapısını, rapor motorunun kendisinin çizdiği bir PDF önizlemesiyle düzenler. Geliştiriciler bununla bir uygulamanın raporlarını oluşturur, son kullanıcılar ise bir masaüstü aracı olmadan raporu ihtiyaçlarına uyarlar, Delphi, C++ Builder ve .NET ile.

TsgcHTMLComponent_ReportDesigner

Bir TsgcHTMLReport bağlayın ve oluşturun. Her düzenleme tarayıcıda gerçekleşir, kullanıcı tasarlarken istek yapılmaz. Kaydet tanımı sunucuya gönderir; sunucu onu doğrular ve OnSave olayına JSON olarak verir. AutoApply ile rapor hemen değişir, böylece aynı raporun Report Viewer bileşeni yeni tasarımı yazdırır.

Bileşen sınıfı

TsgcHTMLComponent_ReportDesigner, bağlı bir TsgcHTMLReport tanımını düzenler

İşler

Bir araç çubuğu, bir araç kutusu, veri alanları, bantlarıyla sayfa, bir denetçi, parametreler ve bir PDF önizlemesi; Bootstrap 5.3 CSS ve Bootstrap Icons CSS üzerinde

Diller

Delphi, C++ Builder, .NET

Bir rapor bağlayın, tasarımı saklayın, yazdırın

Rapor son kaydedilen tasarımını LoadFromJSON ile yükler. Tasarımcı onu düzenler, OnSave tanımı sunucunun sonraki başlatılışı için saklar ve AutoApply ile her kayıt raporu hemen değiştirir.

uses
  sgcHTML_Report, sgcHTML_Component_ReportDesigner;

// rapor
oReport := TsgcHTMLReport.Create(Self);
oReport.Name := 'OrdersReport';
oReport.Title := 'Orders';
oReport.DataSet := qryOrders;
oReport.LoadFromJSON(LoadDefinition('orders'));   // son kaydedilen tasarım

// tasarımcı
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 tanımdır ve sunucu tarafından zaten bir geçici rapora yüklenmiştir
  StoreDefinition('orders', aJSON);   // veritabanınız veya dosyanız
end;
@* Views/Reports/Design.cshtml: OrdersReport uzun ömürlü bir TsgcHTMLReport'tur *@
@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;

// rapor
var report = new TsgcHTMLReport();
report.Name = "OrdersReport";
report.Title = "Orders";
report.LoadFromJSON(LoadDefinition("orders"));

// tasarımcı, kullanıcı başına bir tasarımla
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;

Kullanıcılarınızın elde ettikleri

Tarayıcıda bir rapor tasarımcısı ve raporu yazdıran aynı motorla yazdırılan bir önizleme.

Araç çubuğu

Yeni, kullanıcının bilgisayarından bir .json tanımı Aç, Kaydet, Geri al ve Yinele, Yakınlaştırma, Kılavuza yapıştır ve sayfa boyutu, yönü ve kenar boşluklarıyla Sayfa yapısı. Hizala (sola, ortalar, sağa, üste, orta, alta, aynı genişlik, aynı yükseklik veya aynı boyut), en öne getir, en arkaya gönder, kopyala, yapıştır, çoğalt ve sil, ayrıca Tasarım ile Önizleme arasında geçiş.

Araç kutusu ve veri alanları

Araç kutusu Metin, Resim, Çizgi, Dikdörtgen, Grafik, Zengin metin, Barkod, QR kod ve Alt rapor sunar: bir tıklama öğeyi seçili banda ekler, bir sürükleme ise herhangi bir bandın üzerindeki noktaya bırakır. Veri alanları veri kaynağının alanlarını listeler ve bir tıklama ya da bırakma, alana bağlı bir metin öğesi ekler.

Sayfa ve bantlar

Tuval, sayfayı seçilen yakınlaştırmada bantlarıyla gösterir; her bantta başlığı ve yüksekliğini değiştiren bir tutamaç vardır. Bant listesi bir rapor üst bilgisi, sayfa üst bilgisi, grup üst bilgisi, ayrıntı, grup alt bilgisi, sayfa alt bilgisi veya rapor alt bilgisi ekler, onları taşır ve siler ve bir grup bandının grup alanını ayarlar.

Fareyle düzenleme

Seçmek için tıklayın, seçime eklemek için Ctrl+tıklama veya Shift+tıklama yapın ya da tuvalin boş bir yerinde bir seçim çerçevesi çizin. Bir sürükleme seçimi, başka bir banda da, taşır, sekiz tutamaç yeniden boyutlandırır ve sürüklemenin altındaki bant vurgulanır. Her değişiklik bir geri alma adımıdır.

Denetçi, parametreler ve yazı tipleri

Denetçi, seçim, bant veya rapor için rapor motorunun yayımlanan her özelliğini düzenler; ifade yazmak için Alan ekle, Toplamlar ve Rapor değerleri kullanılır. Parametreler sekmesi Report Viewer'ın sorduklarını tutar ve raporun yazı tipleri tanıma bir .ttf, .ttc veya .otf dosyası gömebilir.

Önizleme

Önizleme, kaydedilmiş olanı değil, düzenlenmekte olan tanımı, raporun verilerini ve olaylarını paylaşan geçici bir raporda yazdırır, böylece PDF raporun yazdıracağı PDF'tir. Gömülü PDF görüntüleyicide ya da tarayıcının PDF görüntüleyicisiyle bir iframe içinde görünür; bunu PreviewMode belirler.

Klavye

Tab tuvalin öğeleri arasında gezinir, oklar seçimi bir kılavuz adımı kadar kaydırır, Shift+oklar yeniden boyutlandırır ve Alt+Yukarı ile Alt+Aşağı onu önceki veya sonraki banda taşır. Ctrl+C, Ctrl+V ve Ctrl+D kopyalar, yapıştırır ve çoğaltır, Ctrl+Z ve Ctrl+Y geri alır ve yineler, Ctrl+S tasarımcının her yerinde kaydeder.

Güvenli düzenlemeler

Bir tasarımda kaydedilmemiş değişiklikler olduğunda tasarımcı Kaydedilmemiş değişiklikler iletisini gösterir ve tarayıcı sayfadan ayrılmadan önce sorar. Adı olmayan bir parametre veya yazı tipi, herhangi bir şey gönderilmeden önce seçilir ve odaklanır. Tasarımcı sayfanın data-bs-theme="dark" ve dir="rtl" değerlerini izler ve kibar bir canlı bölge iletilerini duyurur.

Temel özellikler, yöntemler & olaylar

En sık başvuracağınız üyeler.

Report ve AutoApply

Report tasarlanmakta olan TsgcHTMLReport bileşenidir. AutoApply ile (varsayılan olarak açık) bir kayıt tanımı Lock içinde ona yükler ve bir önizleme onu asla değiştirmez. ReadOnly tasarımı ve önizlemeyi gösterir, kullanıcının özellikleri okumasına izin verir ve Kaydet işlemini sunucuda da reddeder.

OnSave

OnSave(Sender, aJSON, aAccept, aErrorMessage), sunucu tanımı LoadFromJSON ile bir geçici rapora yükledikten sonra onu alır, böylece yüklenmeyen bir tanım kodunuza asla ulaşmaz. Verilerinizi tuttuğunuz yerde saklayın ya da aAccept değerini False yapıp aErrorMessage içine kendi metninizi yazın.

Kullanıcı başına tasarımlar

Bir tasarımcı her kullanıcıya hizmet verir. AutoApply değerini False yapın, kullanıcının tanımını OnSave içinde tutun ve kullanıcının raporunu tasarımcının ve Report Viewer'ın OnGetReport olayında döndürün. İsteğin iş parçacığında tetiklenir; orada sgcHTMLRequestSession oturumu verir.

Alanlar, alt raporlar ve grafikler

OnGetFieldNames(Sender, aFields) tasarımcının gösterdiği listeyi değiştirmek için veri kaynağının alanlarını alır. SubReports ve Charts, bir alt rapor öğesi için ve grafik kaynağı olarak sunulan bileşenleri adlandırır; boşsa raporun Owner bileşeninin her biri sunulur, FontNames ise yazı tipi düzenleyicilerinin yazı tipi ailelerini belirler.

Güvenlik ve sınırlar

MaxSize gönderilen tanımı sınırlar (varsayılan 1 MB), tarayıcı ve sunucu tarafından yeniden denetlenir, PreviewMaxSize ise önizleme PDF'sini sınırlar (8 MB). İstekler arasında sunucuda hiçbir şey saklanmaz. Bir rapor tasarlayan kullanıcı veri kaynağının her alanını yazdırabilir, bu yüzden kullanıcıların görmemesi gereken alanları veri kaynağının kendisinden kaldırın.

Delphi IDE içinde tasarlama

Aynı tasarımcıyı, formun veri alanları, alt raporları ve grafikleriyle IDE'nin bir penceresinde açmak için formdaki bir TsgcHTMLReport bileşenine çift tıklayın ya da bağlam menüsünden Design report... seçin. Her Kaydet, formdaki rapora yazılır. Windows üzerinde Delphi 10.4 veya üstünü ve WebView2 çalışma zamanını gerektirir; Open in browser aynı tasarımcıyı varsayılan tarayıcıda açar.

Motor olmadan

ActionURL ile ve HTMXEngine olmadan betik kaydet, önizleme ve alan isteklerini URL'nize gönderir ve ana bilgisayarınız bunları DispatchComponentEvent işlevine iletir. Sayfada window.sgcReportDesigner şunları sunar: getJSON, setJSON, isDirty, save, preview, undo ve redo.

ASP.NET Core

Bir Razor görünümünde <sgc-report-designer> Tag Helper'ı tasarımcıyı oluşturur ve Kaydet ile Önizleme, UseSgcHtml bileşen olayları uç noktasına gönderir. report uzun ömürlü bir TsgcHTMLReport alır ve Kestrel'in MaxRequestBodySize değeri (varsayılan 30 MB) bir isteği yine de sınırlar.

Demo

Demos\60.HTML\01.RunTime\32.ReportDesigner, 8134 numaralı bağlantı noktasında tarayıcıda dört raporu tasarlayan bir sunucu olan sgc Report Studio'dur: iç içe alt raporlu siparişler, iki sayfaya akan zengin metinli bir müşteri mektubu, İngilizce, Japonca, Çince, Korece, Arapça veya Rusça bir fatura ve grafikli bir satış raporu. Her tarayıcı kendi tasarımını tutar ve Önizleme sekmesi onu Report Viewer ile yazdırır. Tasarım zamanı, Lazarus ve .NET sürümleri bunu yansıtır.

Keşfetmeye devam edin

Online DeneyinRapor Tasarımcısı demosunda görün, eSeGeCe demo sunucusunda canlı çalışıyor.
Çevrimiçi yardımBu bileşenin tam API başvurusu ve kullanım kılavuzu.
Report Viewer ve TsgcHTMLReportTasarımcının düzenlediği rapor motoru ve onu yazdıran görüntüleyici.
Tüm sgcHTML Bileşenleri80'den fazla bileşenin tüm özellik matrisine göz atın.
Ücretsiz Deneme Sürümünü İndirin30 günlük deneme sürümü 60.HTML demo projelerini içerir.
FiyatlandırmaTam kaynak kodlu Single, Team ve Site lisansları.
En avantajlı seçenek: All-AccessTüm eSeGeCe ürünleri, Premium Destek dahil, yılda €1,059'dan itibaren.
All-Access fiyatlarına bakın

Başlamaya Hazır mısınız?

Ücretsiz deneme sürümünü indirin ve Delphi, C++ Builder ve .NET'te web arayüzleri oluşturmaya başlayın.