Fourth post in this series on sgcHTML's 25 new components. This batch is about telling a visitor what's happening right now: a count on a bell icon, a document open inline, a right-click menu, and three different ways to show work in progress — a single bar, a list of background jobs, and a scrolling log. All six are server-rendered Delphi/C++Builder/.NET components; none of them need a client-side charting or PDF library you have to wire up yourself.
Badge — a label, a pill, or a notification dot
TsgcHTMLComponent_Badge renders a single Bootstrap 5 <span class="badge">. Set Positioned and it turns into an absolutely-positioned notification dot anchored to whatever position-relative element wraps it, the classic count-on-a-bell-icon.
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 — an in-page document, no plugin
TsgcHTMLComponent_PDFViewer renders a toolbar and canvas backed by pdf.js, with page navigation, zoom, search, download and print built in. Point PDFURL at a document (or embed the bytes with Base64Data), and the rendering happens entirely 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 — a right-click menu scoped to a selector
TsgcHTMLComponent_ContextMenu renders a Bootstrap dropdown that opens on right-click, restricted to elements matching TargetSelector. Entries with a DataAction post through the same channel your forms already use and fire a DOM event you can hook into.
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 — single bar or stacked segments
TsgcHTMLComponent_ProgressBar covers both the simple case, one Value/Max, striped and animated, and the stacked case: add entries to Bars and they replace the single bar with a multi-segment one, each segment its own colour and 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 — a live list of background jobs
TsgcHTMLComponent_JobProgress is what a ProgressBar grows into once you're tracking more than one thing at a time: a card listing every background job, each with its own status badge and progress bar. AddJob registers a job, UpdateJob moves it along, and GetJobFragmentHTML pushes just that one row to connected clients instead of re-rendering the whole list.
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 — a streaming terminal, level filter included
TsgcHTMLComponent_LogViewer renders a dark or light terminal-style panel with a search box and a level filter, backed by a capped ring buffer (MaxLines) so it never grows unbounded. AddLine appends a timestamped, colour-coded entry; GetLastLineFragmentHTML streams new lines to every open client without a full 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);Try them
Full documentation, key-property references and Delphi/C++Builder/.NET code samples live on each component's own page: Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress and LogViewer. Last post in this series: presence, roles and user management.
Questions, feedback or migration help? Get in touch — you will get a reply from the people who wrote the code.