Zes nieuwe sgcHTML-formuliervelden: MultiSelect, ColorPicker, Slider, TimePicker, SignaturePad en Transfer

Derde post in deze reeks over de 25 nieuwe componenten van sgcHTML. Deze keer draait het om formulieren: zes velden die in bijna elk beheerscherm voorkomen dat u ooit met de hand hebt moeten bouwen — een tag-kiezer, een kleurstaal, een schuifregelaar, een tijdveld, een handtekeningopname en een dual-list roltoewijzer. Elk onderdeel is een normale Delphi/C++Builder/.NET-component: configureer hem, lees HTML, en hij wordt teruggestuurd via dezelfde request-cyclus als elk ander formulierveld.

MultiSelect — een tag-kiezer met chips

TsgcHTMLComponent_MultiSelect is een doorzoekbare dropdown waarmee een bezoeker meerdere waarden kan kiezen, weergegeven als verwijderbare chips, met een optionele MaxSelections-limiet. Voeg opties één voor één toe of koppel rechtstreeks een dataset.

uses
  sgcHTML_Component_MultiSelect;

var
  oMulti: TsgcHTMLComponent_MultiSelect;
begin
  oMulti := TsgcHTMLComponent_MultiSelect.Create(nil);
  try
    oMulti.FieldName := 'tags';
    oMulti.Placeholder := 'Select tags';
    oMulti.MaxSelections := 3;
    oMulti.Size := mssLarge;

    oMulti.AddOption('js', 'JavaScript', True);
    oMulti.AddOption('py', 'Python');
    oMulti.AddOption('pas', 'Pascal');

    WebModule.Response := oMulti.HTML;   // dropdown + chips + hidden inputs
  finally
    oMulti.Free;
  end;
end;

// Or fill it straight from a dataset:
oMulti.LoadFromDataSet(qryTags, 'Code', 'Name', 'IsSelected');

ColorPicker — native input met one-click voorinstellingen

TsgcHTMLComponent_ColorPicker verpakt de native HTML5-kleurinvoer met een optioneel hex-tekstveld en een rij one-click kleurstalen — handig voor alles van een merkkleurinstelling tot een tagkleur voor een agenda-item.

uses
  sgcHTML_Component_ColorPicker;

var
  oColor: TsgcHTMLComponent_ColorPicker;
begin
  oColor := TsgcHTMLComponent_ColorPicker.Create(nil);
  try
    oColor.FieldName := 'brand_color';
    oColor.LabelText := 'Brand color';
    oColor.Value := '#0d6efd';
    oColor.ShowValueInput := True;

    oColor.Swatches.Add('#0d6efd');
    oColor.Swatches.Add('#198754');
    oColor.Swatches.Add('#dc3545');

    WebModule.Response := oColor.HTML;   // color input + hex field + swatches
  finally
    oColor.Free;
  end;
end;

// Or the static one-liner (field name, value, label):
Result := TsgcHTMLComponent_ColorPicker.Build('brand_color', '#0d6efd', 'Brand color');

Slider — een schuifregelaar met live waardebadge

TsgcHTMLComponent_Slider is een Bootstrap-schuifregelaar met min/max-labels en een badge die de huidige waarde bijhoudt terwijl u sleept, in een kleur die bij uw thema past.

uses
  sgcHTML_Enums, sgcHTML_Component_Slider;

var
  oSlider: TsgcHTMLComponent_Slider;
begin
  oSlider := TsgcHTMLComponent_Slider.Create(nil);
  try
    oSlider.FieldName := 'volume';
    oSlider.LabelText := 'Volume';
    oSlider.Min := 0;
    oSlider.Max := 100;
    oSlider.Step := 5;
    oSlider.Value := 50;
    oSlider.ShowMinMax := True;
    oSlider.ColorStyle := hcSuccess;

    WebModule.Response := oSlider.HTML;   // form-range + live value badge
  finally
    oSlider.Free;
  end;
end;

TimePicker — tijdinvoer met grenzen

TsgcHTMLComponent_TimePicker is een native tijdinvoer met configureerbare MinTime/MaxTime-grenzen — het veld voor afsprakenboekingen, openingstijden en dienstroosters. Er is ook een statische Build-helper.

uses
  sgcHTML_Component_TimePicker;

var
  oTime: TsgcHTMLComponent_TimePicker;
begin
  oTime := TsgcHTMLComponent_TimePicker.Create(nil);
  try
    oTime.FieldName := 'appointment_time';
    oTime.LabelText := 'Appointment time';
    oTime.MinTime := '08:00';
    oTime.MaxTime := '18:00';
    oTime.Required := True;

    WebModule.Response := oTime.HTML;   // <input type="time">
  finally
    oTime.Free;
  end;
end;

// Or the static one-liner (field name, label, value):
Result := TsgcHTMLComponent_TimePicker.Build('appointment_time', 'Appointment time');

SignaturePad — handtekening vastleggen via canvas

TsgcHTMLComponent_SignaturePad rendert een canvas met pointer-events, met knoppen Clear, Undo en Save, een configureerbare penkleur en -breedte, en een UploadURL waar de vastgelegde afbeelding naartoe wordt gepost. Leveringsgoedkeuringen, contractondertekening, vrijwaringsformulieren — overal waar een natte handtekening een tik op het scherm is geworden.

uses
  sgcHTML_Component_SignaturePad;

var
  oPad: TsgcHTMLComponent_SignaturePad;
begin
  oPad := TsgcHTMLComponent_SignaturePad.Create(nil);
  try
    oPad.FieldName := 'signature';
    oPad.Width := 500;
    oPad.Height := 220;
    oPad.PenColor := '#1a1a2e';
    oPad.PenWidth := 3;
    oPad.UploadURL := '/api/signatures/upload';

    WebModule.Response := oPad.HTML;   // <canvas> + Clear/Undo/Save buttons
  finally
    oPad.Free;
  end;
end;

Transfer — de dual-list roltoewijzer

TsgcHTMLComponent_Transfer is de klassieke widget met twee panelen om items te verplaatsen tussen "beschikbaar" en "toegewezen" — rechten, rollen, groepslidmaatschap. ShowFilter voegt een zoekvak toe aan elk paneel, en FieldName zorgt ervoor dat de toegewezen kant wordt teruggestuurd als hidden inputs, zodat het formulier gewoon werkt bij het versturen.

uses
  sgcHTML_Component_Transfer;

var
  oTransfer: TsgcHTMLComponent_Transfer;
begin
  oTransfer := TsgcHTMLComponent_Transfer.Create(nil);
  try
    oTransfer.TransferID := 'roles';
    oTransfer.FieldName := 'roles';
    oTransfer.TitleSource := 'Available roles';
    oTransfer.TitleTarget := 'Assigned roles';
    oTransfer.ShowFilter := True;
    oTransfer.Height := '260px';

    oTransfer.AddItem('admin', 'Administrator');
    oTransfer.AddItem('editor', 'Editor', True);
    oTransfer.AddItem('viewer', 'Viewer');

    WebModule.Response := oTransfer.HTML;   // dual panels + buttons + script
  finally
    oTransfer.Free;
  end;
end;

// Or bind it straight to a dataset:
oTransfer.LoadFromDataSet(qryRoles, 'RoleId', 'RoleName', 'IsAssigned');

Probeer ze

Volledige documentatie, referenties van de belangrijkste eigenschappen en Delphi/C++Builder/.NET-codevoorbeelden staan op de eigen pagina van elke component: MultiSelect, ColorPicker, Slider, TimePicker, SignaturePad en Transfer. Volgende keer: badges, PDF-weergave, en de componenten die een druk scherm responsief laten aanvoelen.

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