Six nouveaux champs de formulaire sgcHTML : MultiSelect, ColorPicker, Slider, TimePicker, SignaturePad et Transfer

Troisième article de notre tour d'horizon des 25 composants que sgcHTML vient de gagner. Cette fois, ce sont les formulaires : six champs qui apparaissent dans presque tous les écrans d'administration que vous avez dû construire à la main — un sélecteur de tags, un nuancier de couleur, un curseur de plage, un champ horaire, une capture de signature et un assignateur de rôles à double liste. Chacun est un composant Delphi/C++Builder/.NET ordinaire : vous le configurez, vous lisez HTML, et il revient via le même cycle de requête que n'importe quel autre champ de formulaire.

MultiSelect — un sélecteur de tags avec puces

TsgcHTMLComponent_MultiSelect est une liste déroulante avec recherche qui permet à un visiteur de choisir plusieurs valeurs, affichées sous forme de puces amovibles, avec une limite MaxSelections optionnelle. Ajoutez les options une par une ou liez directement un 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 — champ natif plus préréglages en un clic

TsgcHTMLComponent_ColorPicker encapsule le champ de couleur HTML5 natif avec un champ texte hexadécimal optionnel et une rangée de nuances préréglées en un clic — utile aussi bien pour un réglage de couleur de marque que pour la couleur d'étiquette d'un événement de calendrier.

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 — un curseur de plage avec badge de valeur en direct

TsgcHTMLComponent_Slider est un curseur de plage Bootstrap avec des étiquettes min/max et un badge qui suit la valeur actuelle pendant le glissement, coloré pour s'accorder à votre thème.

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 — saisie d'heure bornée

TsgcHTMLComponent_TimePicker est un champ horaire natif avec des bornes MinTime/MaxTime configurables — le champ pour la prise de rendez-vous, les horaires d'ouverture, la planification des équipes. Il dispose aussi d'un helper statique Build.

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 — capture de signature sur canvas

TsgcHTMLComponent_SignaturePad restitue un canvas à événements pointeur avec des boutons Clear, Undo et Save, une couleur et une épaisseur de stylet configurables, et une UploadURL vers laquelle l'image capturée est envoyée. Validations de livraison, signature de contrat, formulaires de décharge — partout où une signature manuscrite est devenue un simple geste à l'écran.

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 — l'assignateur de rôles à double liste

TsgcHTMLComponent_Transfer est le widget classique à deux panneaux pour déplacer des éléments entre "disponible" et "assigné" — permissions, rôles, appartenance à un groupe. ShowFilter ajoute une zone de recherche à chaque panneau, et FieldName fait que le panneau assigné est renvoyé sous forme de champs cachés, de sorte que la soumission du formulaire fonctionne directement.

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

Essayez-les

La documentation complète, les références des propriétés clés et des exemples de code Delphi/C++Builder/.NET se trouvent sur la page propre à chaque composant : MultiSelect, ColorPicker, Slider, TimePicker, SignaturePad et Transfer. Prochain épisode : des badges, la visualisation de PDF, et les composants qui rendent un écran chargé réactif.

Des questions, un retour ou besoin d'aide pour une migration ? Contactez-nous — vous recevrez une réponse des personnes qui ont écrit le code.