Vier nieuwe sgcHTML-componenten, vijf nieuwe live demo's

sgcWebSockets 2026.9.0 voegt vier nieuwe sgcHTML-componenten toe, en in plaats van ze afzonderlijk te tonen, hebben we er vijf complete toepassingen mee gebouwd: een magazijnbeheersysteem, een kassasysteem, een rapportage- en analyseportaal, een multi-tenant SaaS-controlecentrum en een buitendienst-dispatchapp. Alle vijf draaien vandaag live op de eSeGeCe-demoserver, naast de reeds bestaande demo's voor ERP, Admin CRUD, Live Monitor, Customer Portal en Helpdesk.

De nieuwe componenten zijn CameraScanner (live barcode- en QR-scanning via de eigen camera van de browser, zonder dat er een library aan toegevoegd hoeft te worden), NumPad (een numeriek touch-toetsenbord gebouwd voor kassasystemen), CommandPalette (het Ctrl+K-snelstartpatroon, voor uw eigen toepassing) en EmptyState (het paneel dat een grid of een zoekresultaat toont wanneer er niets te tonen is). Deze post behandelt elk van deze componenten, en vervolgens de vijf demo's die ze aan het werk zetten.

CameraScanner — barcode- en QR-scanning, zonder extra library

TsgcHTMLComponent_CameraScanner opent de camera van de browser en decodeert barcodes en QR-codes met de eigen, native BarcodeDetector-API van de browser. Er zit geen ingebouwde decoder bij en er wordt niets van een CDN opgehaald: waar BarcodeDetector niet beschikbaar is, meldt het paneel dit en blijft het werken via handmatige invoer en foto-opname, die daar sowieso nooit van afhingen. De camera wordt bij elk exitpad afgesloten (tabblad verborgen, pagina verlaten, terugknop), zodat het cameralampje altijd uitgaat.

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 — een toetsenbord dat nooit het verkeerde decimaalteken verstuurt

TsgcHTMLComponent_NumPad is een numeriek en valuta touch-toetsenbord, gebouwd voor invoer bij een kassasysteem. Het technische punt dat het vermelden waard is: elk getal dat deze component wegschrijft, zowel in de markup als in zijn eigen script, gaat door een locale-onafhankelijke formatter en nooit door een routine die rekening houdt met de regionale instellingen van de browser. Het verborgen veld dat wordt gepost, bevat altijd een getal zoals 12.50, nooit 12,50, zodat hetzelfde formulier dezelfde bytes verstuurt vanuit een Spaanse, Duitse of Engelse 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 voor uw eigen toepassing

TsgcHTMLComponent_CommandPalette is de Ctrl+K/Cmd+K overlay-launcher die bekend is van VS Code, Slack en Linear: verborgen totdat de sneltoets hem opent, gesloten met Esc of een klik op de achtergrond, gefilterd terwijl u typt met eerst een substring-doorloop en daarna een fuzzy subsequence-doorloop, zodat nu nog steeds “New User” vindt. Items worden als markup op de server gerenderd, niet als JSON naar de browser gestuurd om client-side te filteren, zodat elke caption precies één keer HTML-encoded wordt.

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 — de juiste manier om te zeggen dat er nog niets is

TsgcHTMLComponent_EmptyState is het paneel dat een grid, een lijst of een zoekresultaat toont wanneer er geen rijen zijn: een icoon of afbeelding, een titel, een beschrijving en maximaal twee knoppen. De component genereert helemaal geen script, waardoor het veilig is om hem zo vaak als een pagina nodig heeft als out-of-band fragment te versturen. Eén beveiligingspunt dat het vermelden waard is: Icon accepteert ofwel een CSS-iconklasse ofwel inline SVG-markup, en inline markup wordt na een beperkte veiligheidscontrole letterlijk uitgevoerd, dus mag deze nooit gekoppeld worden aan invoer van eindgebruikers; koppel niet-vertrouwde tekst in plaats daarvan aan Title en Description, die beide altijd HTML-encoded zijn.

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.');

Vijf nieuwe demo's, ermee gebouwd

Codevoorbeelden laten maar tot op zekere hoogte zien waar een component voor dient. Daarom hebben we, naast de vier nieuwe componenten, vijf complete toepassingen gebouwd, elk met een eigen aanmelding, een echte SQLite-database en afdrukbare rapporten, volledig met sgcHTML. Alle vijf draaien op dit moment live op de eSeGeCe-demoserver.

Magazijn (WMS) — ontvangst, orderverzameling, verpakking, verzending en cyclustellingen, plus een handheldterminal die CameraScanner gebruikt om een barcode rechtstreeks in de pluklijst te scannen. Open de live demo →

Kassasysteem — een kassa voor de detailhandel, gebouwd rond NumPad: producten, promoties, klanten, dienstafsluiting en verkooprapportages. Open de live demo →

Rapportages en analyses — dashboards voor verkoop, marge en operations, een pivotbuilder, opgeslagen weergaven en geplande exporttaken, gevuld met ongeveer 25.000 orderregels zodat de cijfers op het scherm echt zijn. Open de live demo →

Multi-tenant SaaS — tenant-onboarding, facturatie, team- en rolbeheer (gebouwd op dezelfde RolesPermissions-component, nu met een gewone formulier-submit-optie naast het WebSocket-kanaal) en een platformbeheerconsole voor abonnementen en feature flags. Open de live demo →

Buitendienst — opdrachtdispatch, een live technicuskaart, Gantt-planning, klanten, activa en onderdelen, met opnieuw CameraScanner om een onderdeel rechtstreeks aan een opdracht te koppelen door het te scannen. Open de live demo →

Probeer ze zelf

Alle tien live demo's, inclusief de vijf hierboven, zijn te vinden via de bovenste navigatie onder sgcHTML › Online Demos, en de volledige referentie van properties, methods en events voor CameraScanner, NumPad, CommandPalette en EmptyState staat in de online help.

Vragen, feedback of wilt u een specifiek demoscenario toegevoegd zien? Neem contact op — u krijgt antwoord van de mensen die de code hebben geschreven.