Zes nieuwe sgcHTML-feedbackcomponenten: Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress en LogViewer

Vierde post in deze reeks over de 25 nieuwe sgcHTML-componenten. Deze batch draait om het laten zien wat er op dit moment gebeurt: een aantal op een belpictogram, een document dat inline wordt geopend, een rechtermuisklikmenu, en drie verschillende manieren om lopend werk te tonen — een enkele balk, een lijst met achtergrondtaken, en een scrollend logboek. Alle zes zijn server-rendered Delphi/C++Builder/.NET-componenten; geen enkele heeft een client-side grafiek- of PDF-bibliotheek nodig die je zelf moet integreren.

Badge — een label, een pil, of een meldingsstip

TsgcHTMLComponent_Badge rendert een enkele Bootstrap 5 <span class="badge">. Stel Positioned in en het wordt een absoluut gepositioneerde meldingsstip, verankerd aan het position-relative-element dat eromheen zit, het klassieke aantal-op-een-belpictogram.

uses
  sgcHTML_Enums, sgcHTML_Component_Badge;

var
  oBadge: TsgcHTMLComponent_Badge;
begin
  oBadge := TsgcHTMLComponent_Badge.Create(nil);
  try
    oBadge.Text := '3';
    oBadge.Color := bgDanger;
    oBadge.Pill := True;
    oBadge.Positioned := True;

    WebModule.Response := oBadge.HTML;   // <span class="badge bg-danger rounded-pill ...">
  finally
    oBadge.Free;
  end;
end;

// Or the one-line static helper for a simple inline badge:
WebModule.Response := TsgcHTMLComponent_Badge.Build('New', bgSuccess, True);

PDFViewer — een document in de pagina, zonder plugin

TsgcHTMLComponent_PDFViewer rendert een werkbalk en canvas op basis van pdf.js, met paginanavigatie, zoom, zoeken, downloaden en afdrukken ingebouwd. Wijs PDFURL naar een document (of embed de bytes met Base64Data), en het renderen gebeurt volledig client-side.

uses
  sgcHTML_Component_PDFViewer;

var
  oViewer: TsgcHTMLComponent_PDFViewer;
begin
  oViewer := TsgcHTMLComponent_PDFViewer.Create(nil);
  try
    oViewer.ViewerID := 'invoice';
    oViewer.PDFURL := '/invoices/INV-2026-0042.pdf';
    oViewer.Height := '700px';
    oViewer.InitialPage := 1;
    oViewer.Zoom := 'page-width';
    oViewer.Theme := pvLight;
    oViewer.DownloadFileName := 'invoice-0042.pdf';

    WebModule.Response := oViewer.HTML;   // toolbar + canvas + pdf.js init script
  finally
    oViewer.Free;
  end;
end;

ContextMenu — een rechtermuisklikmenu gebonden aan een selector

TsgcHTMLComponent_ContextMenu rendert een Bootstrap-dropdown die bij een rechtermuisklik opent, beperkt tot elementen die overeenkomen met TargetSelector. Items met een DataAction posten via hetzelfde kanaal dat je formulieren al gebruiken, en activeren een DOM-event waar je op kunt inhaken.

uses
  sgcHTML_Component_ContextMenu;

var
  oMenu: TsgcHTMLComponent_ContextMenu;
  oItem: TsgcHTMLContextMenuItem;
begin
  oMenu := TsgcHTMLComponent_ContextMenu.Create(nil);
  try
    oMenu.MenuID := 'grid_menu';
    oMenu.TargetSelector := '.grid-row';

    oItem := oMenu.Items.Add;
    oItem.Caption := 'Edit';
    oItem.Icon := 'bi bi-pencil';
    oItem.DataAction := 'row:edit';

    oItem := oMenu.Items.Add;
    oItem.Caption := 'Delete';
    oItem.Icon := 'bi bi-trash';
    oItem.DataAction := 'row:delete';

    oItem := oMenu.Items.Add;
    oItem.Divider := True;

    oItem := oMenu.Items.Add;
    oItem.Caption := 'Open in new tab';
    oItem.Href := '/grid/open';

    WebModule.Response := oMenu.HTML;   // hidden <ul> + right-click binding script
  finally
    oMenu.Free;
  end;
end;

ProgressBar — enkele balk of gestapelde segmenten

TsgcHTMLComponent_ProgressBar dekt zowel het eenvoudige geval, één Value/Max, gestreept en geanimeerd, als het gestapelde geval: voeg items toe aan Bars en die vervangen de enkele balk door een balk met meerdere segmenten, elk segment met een eigen kleur en label.

uses
  sgcHTML_Enums, sgcHTML_Component_ProgressBar;

var
  oBar: TsgcHTMLComponent_ProgressBar;
begin
  oBar := TsgcHTMLComponent_ProgressBar.Create(nil);
  try
    oBar.ProgressBarID := 'upload';
    oBar.Value := 72;
    oBar.Max := 100;
    oBar.ColorStyle := hcSuccess;
    oBar.Striped := True;
    oBar.Animated := True;
    oBar.ShowLabel := True;
    oBar.LabelFormat := '%d%% complete';

    WebModule.Response := oBar.HTML;   // Bootstrap progress bar
  finally
    oBar.Free;
  end;
end;

// Or a stacked, multi-segment bar:
with oBar.Bars.Add do
begin
  Value := 40;
  ColorStyle := hcPrimary;
  Label_ := 'Done';
end;
with oBar.Bars.Add do
begin
  Value := 20;
  ColorStyle := hcWarning;
  Label_ := 'In progress';
end;

JobProgress — een live lijst met achtergrondtaken

TsgcHTMLComponent_JobProgress is wat een ProgressBar wordt zodra je meer dan één ding tegelijk volgt: een kaart met een lijst van elke achtergrondtaak, elk met een eigen statusbadge en voortgangsbalk. AddJob registreert een taak, UpdateJob laat hem vorderen, en GetJobFragmentHTML stuurt alleen die ene rij naar verbonden clients in plaats van de hele lijst opnieuw te renderen.

uses
  sgcHTML_Enums, sgcHTML_Component_JobProgress;

var
  oJobs: TsgcHTMLComponent_JobProgress;
begin
  oJobs := TsgcHTMLComponent_JobProgress.Create(nil);
  try
    oJobs.JobsID := 'exports';
    oJobs.Title := 'Background Exports';
    oJobs.ShowCompleted := False;

    oJobs.AddJob('exp-42', 'Export customers.csv', 'Generating CSV export');

    WebModule.Response := oJobs.HTML;   // card + progress rows + cancel-form script
  finally
    oJobs.Free;
  end;
end;

// On a later progress tick, push just that row over the WebSocket:
oJobs.UpdateJob('exp-42', 65, jsRunning);
Engine.BroadcastFragment(oJobs.GetJobFragmentHTML('exp-42'));

LogViewer — een streamende terminal, inclusief niveaufilter

TsgcHTMLComponent_LogViewer rendert een donker of licht paneel in terminalstijl met een zoekvak en een niveaufilter, ondersteund door een begrensde ringbuffer (MaxLines) zodat hij nooit onbeperkt groeit. AddLine voegt een item met tijdstempel en kleurcodering toe; GetLastLineFragmentHTML streamt nieuwe regels naar elke open client zonder volledige re-render.

uses
  sgcHTML_Component_LogViewer;

var
  oLog: TsgcHTMLComponent_LogViewer;
begin
  oLog := TsgcHTMLComponent_LogViewer.Create(nil);
  try
    oLog.LogID := 'applog';
    oLog.Theme := ltDark;
    oLog.MaxLines := 500;
    oLog.Height := '400px';

    oLog.AddLine(llInfo, 'Service started', 'app');
    oLog.AddLine(llWarning, 'Low disk space', 'monitor');
    oLog.AddLine(llError, 'Connection refused', 'db');

    WebModule.Response := oLog.HTML;   // toolbar + log body + inline script
  finally
    oLog.Free;
  end;
end;

// Push one more line to every connected client, no full re-render:
oLog.AddLine(llInfo, 'New order received', 'orders');
TsgcHTMX_Engine_Server.BroadcastFragment(oLog.GetLastLineFragmentHTML);

Probeer ze uit

Volledige documentatie, referenties van de belangrijkste properties en Delphi/C++Builder/.NET-codevoorbeelden staan op de eigen pagina van elk component: Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress en LogViewer. Vorige post in deze reeks: aanwezigheid, rollen en gebruikersbeheer.

Vragen, feedback of hulp bij migratie? Neem contact op — je krijgt antwoord van de mensen die de code hebben geschreven.