TsgcHTMLComponent_ReportDesigner: un diseñador de informes que se ejecuta en el navegador. Edita la definición de un TsgcHTMLReport, sus bandas, elementos, parámetros, fuentes y configuración de página, con una vista previa en PDF dibujada por el propio motor de informes. Los desarrolladores construyen con él los informes de una aplicación, y los usuarios finales adaptan un informe a sus necesidades sin una herramienta de escritorio, en Delphi, C++ Builder y .NET.
Enlázalo a un TsgcHTMLReport y renderízalo. Cada edición ocurre en el navegador, sin peticiones mientras el usuario diseña. Guardar envía la definición al servidor, que la valida y se la entrega a OnSave como JSON. Con AutoApply el informe cambia al instante, de modo que el Report Viewer del mismo informe imprime el nuevo diseño.
TsgcHTMLComponent_ReportDesigner, que edita la definición de un TsgcHTMLReport enlazado
Una barra de herramientas, un cuadro de herramientas, los campos de datos, la página con sus bandas, un inspector, los parámetros y una vista previa en PDF, sobre el CSS de Bootstrap 5.3 y el CSS de Bootstrap Icons
Delphi, C++ Builder, .NET
El informe carga su último diseño guardado con LoadFromJSON. El diseñador lo edita, OnSave conserva la definición para el próximo arranque del servidor y, con AutoApply, cada guardado cambia el informe al instante.
uses
sgcHTML_Report, sgcHTML_Component_ReportDesigner;
// el informe
oReport := TsgcHTMLReport.Create(Self);
oReport.Name := 'OrdersReport';
oReport.Title := 'Orders';
oReport.DataSet := qryOrders;
oReport.LoadFromJSON(LoadDefinition('orders')); // el último diseño guardado
// el diseñador
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 es la definición, ya cargada por el servidor en un informe temporal
StoreDefinition('orders', aJSON); // tu base de datos o archivo
end;@* Views/Reports/Design.cshtml: OrdersReport es un TsgcHTMLReport de larga vida *@
@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;
// el informe
var report = new TsgcHTMLReport();
report.Name = "OrdersReport";
report.Title = "Orders";
report.LoadFromJSON(LoadDefinition("orders"));
// el diseñador, con un diseño por usuario
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 diseñador de informes en el navegador, y una vista previa impresa por el mismo motor que imprime el informe.
Nuevo, Abrir una definición .json desde el equipo del usuario, Guardar, Deshacer y Rehacer, Zoom, Ajustar a la cuadrícula y Configurar página con el tamaño de página, la orientación y los márgenes. Alinear (izquierda, centros, derecha, arriba, medio, abajo, mismo ancho, misma altura o mismo tamaño), traer al frente, enviar al fondo, copiar, pegar, duplicar y eliminar, y alternar entre Diseño y Vista previa.
El cuadro de herramientas ofrece Texto, Imagen, Línea, Rectángulo, Gráfico, Texto enriquecido, Código de barras, Código QR y Subinforme: un clic añade el elemento a la banda seleccionada, un arrastre lo suelta en el punto de cualquier banda. Campos de datos lista los campos del origen de datos, y un clic o un arrastre añade un elemento de texto enlazado al campo.
El lienzo muestra la página con sus bandas al zoom elegido, cada una con su título y un tirador que cambia su altura. La lista de bandas añade un encabezado de informe, encabezado de página, encabezado de grupo, detalle, pie de grupo, pie de página o pie de informe, las mueve y las elimina, y define el campo de grupo de una banda de grupo.
Clic para seleccionar, Ctrl+clic o Mayús+clic para añadir a la selección, o dibuja un rectángulo de selección en una parte vacía del lienzo. Un arrastre mueve la selección, también a otra banda, los ocho tiradores cambian el tamaño y la banda bajo un arrastre se resalta. Cada cambio es un paso de deshacer.
El inspector edita cada propiedad publicada del motor de informes para la selección, la banda o el informe, con Insertar campo, Agregados y Valores del informe para escribir expresiones. La pestaña Parámetros contiene lo que pide el Report Viewer, y las fuentes del informe pueden incrustar un archivo .ttf, .ttc u .otf en la definición.
La vista previa imprime la definición que se está editando, no la guardada, sobre un informe temporal que comparte los datos y los eventos del informe, así que el PDF es el que imprimirá el informe. Se muestra en el visor de PDF incrustado o en un iframe con el visor de PDF del navegador, según PreviewMode.
Tab recorre los elementos del lienzo, las flechas mueven la selección un paso de cuadrícula, Mayús+flechas cambian su tamaño, y Alt+Arriba y Alt+Abajo la mueven a la banda anterior o siguiente. Ctrl+C, Ctrl+V y Ctrl+D copian, pegan y duplican, Ctrl+Z y Ctrl+Y deshacen y rehacen, y Ctrl+S guarda desde cualquier punto del diseñador.
Mientras un diseño tiene cambios sin guardar, el diseñador muestra Cambios sin guardar y el navegador pregunta antes de abandonar la página. Un parámetro o una fuente sin nombre se selecciona y recibe el foco antes de enviar nada. El diseñador sigue el data-bs-theme="dark" y el dir="rtl" de la página, y una región live cortés anuncia sus mensajes.
Los miembros que más vas a usar.
Report es el TsgcHTMLReport que se diseña. Con AutoApply (activado por defecto) un guardado carga la definición en él dentro de su Lock, y una vista previa nunca lo cambia. ReadOnly muestra el diseño y la vista previa, deja que el usuario lea las propiedades y rechaza Guardar también en el servidor.
OnSave(Sender, aJSON, aAccept, aErrorMessage) recibe la definición después de que el servidor la haya cargado en un informe temporal con LoadFromJSON, de modo que una definición que no se carga nunca llega a tu código. Guárdala donde conservas tus datos, o define aAccept como False con tu propio texto en aErrorMessage.
Un diseñador atiende a todos los usuarios. Define AutoApply como False, guarda la definición del usuario en OnSave y devuelve el informe del usuario en OnGetReport del diseñador y del Report Viewer. Se dispara en el hilo de la petición, donde sgcHTMLRequestSession da la sesión.
OnGetFieldNames(Sender, aFields) recibe los campos del origen de datos, para cambiar la lista que muestra el diseñador. SubReports y Charts nombran los componentes ofrecidos para un elemento de subinforme y como origen de gráfico, todos los del Owner del informe cuando están vacíos, y FontNames las familias de fuentes de los editores de fuentes.
MaxSize limita la definición enviada (1 MB por defecto), comprobada por el navegador y de nuevo por el servidor, y PreviewMaxSize el PDF de la vista previa (8 MB). No se guarda nada en el servidor entre peticiones. Un usuario que diseña un informe puede imprimir cada campo de su origen de datos, así que quita del propio origen de datos los campos que los usuarios no deben ver.
Haz doble clic en un TsgcHTMLReport de un formulario, o elige Diseñar informe... en su menú contextual, para abrir el mismo diseñador en una ventana del IDE, con los campos de datos, subinformes y gráficos del formulario. Cada Guardar se escribe en el informe del formulario. Necesita Delphi 10.4 o posterior en Windows y el runtime de WebView2, y Abrir en el navegador abre el mismo diseñador en el navegador predeterminado.
Con ActionURL y sin HTMXEngine, el script envía las peticiones de guardar, vista previa y campos a tu URL, y tu host las pasa a DispatchComponentEvent. En la página, window.sgcReportDesigner ofrece getJSON, setJSON, isDirty, save, preview, undo y redo.
En una vista Razor el Tag Helper <sgc-report-designer> renderiza el diseñador, y Guardar y Vista previa envían al endpoint de eventos de componentes de UseSgcHtml. report acepta un TsgcHTMLReport de larga vida, y el MaxRequestBodySize de Kestrel (30 MB por defecto) sigue limitando una petición.
Demos\60.HTML\01.RunTime\32.ReportDesigner es sgc Report Studio, un servidor en el puerto 8134 que diseña cuatro informes en el navegador: pedidos con subinformes anidados, una carta a clientes en texto enriquecido que fluye por dos páginas, una factura en inglés, japonés, chino, coreano, árabe o ruso, y un informe de ventas con gráficos. Cada navegador conserva un diseño propio, y la pestaña Vista previa lo imprime con el Report Viewer. Las versiones de tiempo de diseño, Lazarus y .NET lo replican.
| Pruébalo en líneaMíralo en la demo Diseñador de informes, funcionando en vivo en el servidor de demos de eSeGeCe. | Abrir | |
| Ayuda en líneaReferencia completa de la API y guía de uso para este componente. | Abrir | |
| Report Viewer y TsgcHTMLReportEl motor de informes que edita el diseñador, y el visor que lo imprime. | Abrir | |
| Todos los componentes de sgcHTMLExplora la matriz de características completa de más de 80 componentes. | Abrir | |
| Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML. | Abrir | |
| PreciosLicencias Single, Team y Site con todo el código fuente. | Abrir |