Four New sgcHTML Components, Five New Live Demos

sgcWebSockets 2026.9.0 adds four new sgcHTML components, and rather than show them in isolation, we built five complete applications with them: a warehouse management system, a point of sale till, a reporting and analytics portal, a multi-tenant SaaS control plane and a field service dispatch app. All five run live on the eSeGeCe demo server today, alongside the ERP, Admin CRUD, Live Monitor, Customer Portal and Helpdesk demos that were already there.

The new components are CameraScanner (live barcode and QR scanning through the browser's own camera, no library to add), NumPad (a touch numeric keypad built for point of sale), CommandPalette (the Ctrl+K quick launcher pattern, for your own application) and EmptyState (the panel a grid or a search result shows when there is nothing to display). This post walks through each one, then the five demos that put them to work.

CameraScanner — barcode and QR scanning, no library to add

TsgcHTMLComponent_CameraScanner opens the browser's camera and decodes barcodes and QR codes using the browser's own native BarcodeDetector API. There is no bundled decoder and nothing pulled from a CDN: where BarcodeDetector is not available, the panel says so and keeps working through manual entry and photo capture, which never depended on it in the first place. The camera is torn down on every exit path (tab hidden, page navigated away, back button) so the camera indicator light always goes out.

uses
  sgcHTML_Component_CameraScanner;

var
  oScanner: TsgcHTMLComponent_CameraScanner;
begin
  oScanner := TsgcHTMLComponent_CameraScanner.Create(nil);
  try
    oScanner.ScannerID := 'receiving_scan';
    oScanner.Mode := smBoth;               // scan barcodes AND capture a photo
    oScanner.Formats := 'qr_code,ean_13,code_128';
    oScanner.FieldName := 'sku';
    oScanner.ContinuousScan := True;
    oScanner.BeepOnScan := True;

    WebModule.Response := oScanner.HTML;   // camera panel + hidden fields + inline script
  finally
    oScanner.Free;
  end;
end;

NumPad — a keypad that never sends the wrong decimal separator

TsgcHTMLComponent_NumPad is a touch numeric and currency keypad built for point of sale entry. The engineering point worth calling out: every number this component writes, into the markup and into its own script, goes through a locale-independent formatter, never through a routine that honours the browser's regional settings. The hidden field it posts always carries a number like 12.50, never 12,50, so the same form submits the same bytes from a Spanish, German or English browser.

uses
  sgcHTML_Component_NumPad;

var
  oPad: TsgcHTMLComponent_NumPad;
begin
  oPad := TsgcHTMLComponent_NumPad.Create(nil);
  try
    oPad.PadID := 'till_amount';
    oPad.FieldName := 'amount';
    oPad.Mode := npCurrency;
    oPad.CurrencySymbol := '$';
    oPad.DecimalPlaces := 2;
    oPad.QuickAmounts.CommaText := '5,10,20,50';   // tender shortcut buttons

    WebModule.Response := oPad.HTML;   // display + calculator-style keys + quick amounts
  finally
    oPad.Free;
  end;
end;

CommandPalette — Ctrl+K for your own application

TsgcHTMLComponent_CommandPalette is the Ctrl+K / Cmd+K overlay launcher familiar from VS Code, Slack and Linear: hidden until the hotkey opens it, closed by Esc or a click on the backdrop, filtered as you type with a substring pass followed by a fuzzy subsequence pass, so nu still finds “New User”. Entries are rendered as markup on the server, not shipped to the browser as JSON to filter client-side, so every caption is HTML-encoded exactly once.

uses
  sgcHTML_Component_CommandPalette;

var
  oPalette: TsgcHTMLComponent_CommandPalette;
begin
  oPalette := TsgcHTMLComponent_CommandPalette.Create(nil);
  try
    oPalette.PaletteID := 'app_commands';

    oPalette.AddItem('New Invoice', '/invoices/new', 'invoice:new', 'Create', 'Ctrl+N');
    oPalette.AddItem('Customer Search', '/customers', '', 'Navigate');
    with oPalette.Items.Add do
    begin
      Caption := 'Export Report';
      Icon := 'bi bi-download';
      DataAction := 'report:export';
      Category := 'Actions';
    end;

    WebModule.Response := oPalette.HTML;   // hidden overlay + inline script
  finally
    oPalette.Free;
  end;
end;

EmptyState — the right way to say there is nothing here yet

TsgcHTMLComponent_EmptyState is the panel a grid, a list or a search result shows when it has no rows: an icon or a picture, a title, a description and up to two buttons. It emits no script at all, which makes it safe to push as an out-of-band fragment as many times as a page needs. One security note worth carrying over: Icon accepts either a CSS icon class or inline SVG markup, and inline markup is emitted verbatim after a narrow safety check, so it should never be bound to end-user input; bind untrusted text to Title and Description instead, both of which are always HTML-encoded.

uses
  sgcHTML_Enums, sgcHTML_Component_EmptyState;

var
  oEmpty: TsgcHTMLComponent_EmptyState;
begin
  oEmpty := TsgcHTMLComponent_EmptyState.Create(nil);
  try
    oEmpty.Icon := 'bi bi-inbox';
    oEmpty.Title := 'No results';
    oEmpty.Description := 'Try a different search, or clear your filters.';
    oEmpty.ActionCaption := 'Clear filters';
    oEmpty.ActionHref := '/orders';
    oEmpty.ActionStyle := bsPrimary;

    WebModule.Response := oEmpty.HTML;
  finally
    oEmpty.Free;
  end;
end;

// Or the one-line static helper for the simple case:
WebModule.Response := TsgcHTMLComponent_EmptyState.Build('No results', 'Try a different search.');

Five New Demos, Built With Them

Code samples only go so far to show what a component is for. So alongside the four new components, we built five complete applications, each with its own sign-in, a real SQLite database and printable reports, entirely with sgcHTML. All five run live on the eSeGeCe demo server right now.

Warehouse (WMS) — receiving, picking, packing, shipping and cycle counts, plus a handheld terminal that uses CameraScanner to scan a barcode straight into the pick list. Open the live demo →

Point of Sale — a retail till built around NumPad: products, promotions, customers, shift close-out and sales reporting. Open the live demo →

Reports & Analytics — sales, margin and operations dashboards, a pivot builder, saved views and scheduled export jobs, seeded with around 25,000 order lines so the numbers on screen are real. Open the live demo →

Multi-Tenant SaaS — tenant onboarding, billing, team and role management (built on the same RolesPermissions component, now with a plain-form-submit option alongside its WebSocket channel) and a platform admin console for plans and feature flags. Open the live demo →

Field Service — job dispatch, a live technician map, Gantt scheduling, customers, assets and parts, with CameraScanner again for scanning a part straight onto a job. Open the live demo →

Try them

All ten live demos, including the five above, are linked from the top navigation under sgcHTML › Online Demos, and full property, method and event references for CameraScanner, NumPad, CommandPalette and EmptyState are in the online help.

Questions, feedback or want a specific demo scenario added? Get in touch — you will get a reply from the people who wrote the code.