TsgcHTMLComponent_ReportDesigner: um designer de relatórios que roda no navegador. Ele edita a definição de um TsgcHTMLReport, suas bandas, itens, parâmetros, fontes e configuração de página, com uma visualização em PDF desenhada pelo próprio motor de relatórios. Os desenvolvedores constroem com ele os relatórios de uma aplicação, e os usuários finais adaptam um relatório às suas necessidades sem uma ferramenta de desktop, em Delphi, C++ Builder e .NET.
Vincule-o a um TsgcHTMLReport e renderize. Toda edição acontece no navegador, sem requisição enquanto o usuário projeta. Salvar envia a definição ao servidor, que a valida e a entrega a OnSave como JSON. Com AutoApply o relatório muda na hora, de modo que o Report Viewer do mesmo relatório imprime o novo design.
TsgcHTMLComponent_ReportDesigner, que edita a definição de um TsgcHTMLReport vinculado
Uma barra de ferramentas, uma caixa de ferramentas, os campos de dados, a página com suas bandas, um inspetor, os parâmetros e uma visualização em PDF, sobre o CSS do Bootstrap 5.3 e o CSS do Bootstrap Icons
Delphi, C++ Builder, .NET
O relatório carrega o seu último design salvo com LoadFromJSON. O designer o edita, OnSave guarda a definição para a próxima inicialização do servidor, e com AutoApply cada salvamento altera o relatório na hora.
uses
sgcHTML_Report, sgcHTML_Component_ReportDesigner;
// the report
oReport := TsgcHTMLReport.Create(Self);
oReport.Name := 'OrdersReport';
oReport.Title := 'Orders';
oReport.DataSet := qryOrders;
oReport.LoadFromJSON(LoadDefinition('orders')); // the last saved design
// the 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 the definition, already loaded into a scratch report by the server
StoreDefinition('orders', aJSON); // your database or file
end;@* Views/Reports/Design.cshtml: OrdersReport is a long-lived 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;
// the report
var report = new TsgcHTMLReport();
report.Name = "OrdersReport";
report.Title = "Orders";
report.LoadFromJSON(LoadDefinition("orders"));
// the designer, with a design per user
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;Um designer de relatórios no navegador, e uma visualização impressa pelo mesmo motor que imprime o relatório.
Novo, Abrir uma definição .json do computador do usuário, Salvar, Desfazer e Refazer, Zoom, Ajustar à grade e Configurar página com o tamanho da página, a orientação e as margens. Alinhar (esquerda, centros, direita, topo, meio, base, mesma largura, mesma altura ou mesmo tamanho), trazer para frente, enviar para trás, copiar, colar, duplicar e excluir, e alternar entre Design e Visualização.
A caixa de ferramentas oferece Texto, Imagem, Linha, Retângulo, Gráfico, Texto rico, Código de barras, Código QR e Subrelatório: um clique adiciona o item à banda selecionada, um arrastar o solta no ponto desejado em qualquer banda. Campos de dados lista os campos da fonte de dados, e um clique ou um soltar adiciona um item de texto vinculado ao campo.
A tela mostra a página com suas bandas no zoom escolhido, cada uma com a sua legenda e uma alça que altera a sua altura. A lista de bandas adiciona um cabeçalho de relatório, cabeçalho de página, cabeçalho de grupo, detalhe, rodapé de grupo, rodapé de página ou rodapé de relatório, move e exclui as bandas, e define o campo de grupo de uma banda de grupo.
Clique para selecionar, Ctrl+clique ou Shift+clique para adicionar à seleção, ou desenhe um retângulo de seleção em uma parte vazia da tela. Um arrastar move a seleção, também para outra banda, as oito alças redimensionam, e a banda sob um arrastar é destacada. Cada alteração é um passo de desfazer.
O inspetor edita cada propriedade publicada do motor de relatórios para a seleção, a banda ou o relatório, com Inserir campo, Agregados e Valores do relatório para escrever expressões. A aba Parâmetros contém o que o Report Viewer pede, e as fontes do relatório podem embutir um arquivo .ttf, .ttc ou .otf na definição.
Visualização imprime a definição que está sendo editada, não a salva, em um relatório temporário que compartilha os dados e os eventos do relatório, de modo que o PDF é o que o relatório vai imprimir. Ela aparece no visualizador de PDF embutido ou em um iframe com o visualizador de PDF do navegador, definido por PreviewMode.
Tab percorre os itens da tela, as setas movem a seleção em um passo de grade, Shift+setas a redimensionam, e Alt+Cima e Alt+Baixo a movem para a banda anterior ou seguinte. Ctrl+C, Ctrl+V e Ctrl+D copiam, colam e duplicam, Ctrl+Z e Ctrl+Y desfazem e refazem, e Ctrl+S salva de qualquer lugar do designer.
Enquanto um design tem alterações não salvas, o designer mostra Alterações não salvas e o navegador pergunta antes de a página ser deixada. Um parâmetro ou uma fonte sem nome é selecionado e recebe o foco antes de qualquer envio. O designer segue data-bs-theme="dark" e dir="rtl" da página, e uma região live educada anuncia as suas mensagens.
Os membros que você mais usa.
Report é o TsgcHTMLReport que está sendo projetado. Com AutoApply (ligado por padrão) um salvamento carrega a definição nele dentro do seu Lock, e uma visualização nunca o altera. ReadOnly mostra o design e a visualização, deixa o usuário ler as propriedades, e recusa Salvar também no servidor.
OnSave(Sender, aJSON, aAccept, aErrorMessage) recebe a definição depois que o servidor a carregou em um relatório temporário com LoadFromJSON, de modo que uma definição que não carrega nunca chega ao seu código. Guarde-a onde você mantém os seus dados, ou defina aAccept como False com o seu próprio texto em aErrorMessage.
Um designer atende todos os usuários. Defina AutoApply como False, guarde a definição do usuário em OnSave, e devolva o relatório do usuário em OnGetReport do designer e do Report Viewer. Ele dispara na thread da requisição, onde sgcHTMLRequestSession fornece a sessão.
OnGetFieldNames(Sender, aFields) recebe os campos da fonte de dados, para alterar a lista que o designer mostra. SubReports e Charts nomeiam os componentes oferecidos para um item de subrelatório e como fonte de gráfico, todos os do Owner do relatório quando vazios, e FontNames as famílias de fontes dos editores de fonte.
MaxSize limita a definição enviada (1 MB por padrão), verificada pelo navegador e de novo pelo servidor, e PreviewMaxSize o PDF de visualização (8 MB). Nada é guardado no servidor entre requisições. Um usuário que projeta um relatório pode imprimir todos os campos da sua fonte de dados, então remova da própria fonte de dados os campos que os usuários não devem ver.
Clique duas vezes em um TsgcHTMLReport em um formulário, ou escolha Design report... no seu menu de contexto, para abrir o mesmo designer em uma janela da IDE, com os campos de dados, subrelatórios e gráficos do formulário. Cada Salvar é gravado no relatório do formulário. Exige o Delphi 10.4 ou posterior no Windows e o runtime do WebView2, e Open in browser abre o mesmo designer no navegador padrão.
Com ActionURL e sem HTMXEngine, o script envia as requisições de salvar, de visualização e de campos para a sua URL, e o seu host as repassa a DispatchComponentEvent. Na página, window.sgcReportDesigner oferece getJSON, setJSON, isDirty, save, preview, undo e redo.
Em uma view Razor o Tag Helper <sgc-report-designer> renderiza o designer, e Salvar e Visualização enviam ao endpoint de eventos de componentes de UseSgcHtml. report aceita um TsgcHTMLReport de longa duração, e o MaxRequestBodySize do Kestrel (30 MB por padrão) ainda limita uma requisição.
Demos\60.HTML\01.RunTime\32.ReportDesigner é o sgc Report Studio, um servidor na porta 8134 que projeta quatro relatórios no navegador: pedidos com subrelatórios aninhados, uma carta ao cliente em texto rico que flui por duas páginas, uma fatura em inglês, japonês, chinês, coreano, árabe ou russo, e um relatório de vendas com gráficos. Cada navegador mantém um design próprio, e a aba Visualização o imprime com o Report Viewer. As versões em design time, Lazarus e .NET a espelham.
| Experimente onlineVeja na demo Designer de relatórios, rodando ao vivo no servidor de demos da eSeGeCe. | Abrir | |
| Ajuda onlineReferência completa da API e guia de uso para este componente. | Abrir | |
| Report Viewer e TsgcHTMLReportO motor de relatórios que o designer edita, e o visualizador que o imprime. | Abrir | |
| Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 80 componentes. | Abrir | |
| Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML. | Abrir | |
| PreçosLicenças Single, Team e Site com código-fonte completo. | Abrir |