TsgcHTMLComponent_FormBuilder : un concepteur visuel de formulaires qui s'exécute dans le navigateur, afin que les utilisateurs de votre application conçoivent leurs propres formulaires. Ce qu'ils publient est un TsgcHTMLComponent_Form ordinaire, avec ses règles de validation, ses masques de saisie, ses champs conditionnels et sa validation en direct, en Delphi, C++ Builder et .NET.
Liez-le à un TsgcHTMLComponent_Form et rendez-le. Les utilisateurs glissent des champs depuis une boîte à outils vers un canevas de 12 colonnes, les configurent dans un inspecteur et appuient sur Enregistrer. OnSave vous remet la définition en JSON à stocker, et avec AutoApply le formulaire lié affiche aussitôt le nouveau design.
TsgcHTMLComponent_FormBuilder, qui modifie la définition d'un TsgcHTMLComponent_Form lié
Une boîte à outils, un canevas de conception, un inspecteur, un aperçu et une vue JSON, en JavaScript et CSS purs, sans bibliothèque externe
Delphi, C++ Builder, .NET
Le builder modifie la définition du formulaire lié. OnSave reçoit le JSON à stocker, et la page publique le charge dans son propre formulaire avec LoadFromJSON. À l'envoi, Validate vérifie les valeurs postées et GetValuesJSON les renvoie sous la forme d'un seul objet JSON typé.
uses
sgcHTML_Component_Form, sgcHTML_Component_FormBuilder;
// Sur la fiche : un TsgcHTMLComponent_Form (Form1) et un
// TsgcHTMLComponent_FormBuilder (FormBuilder1) avec Form = Form1
procedure TMainModule.FormBuilder1Save(Sender: TObject; const aJSON: string;
var aAccept: Boolean; var aErrorMessage: string);
begin
// aJSON est la définition normalisée, déjà vérifiée par le serveur
StoreDefinition('contact', aJSON); // votre propre stockage : un fichier, une table
end;
// La page publique : un formulaire par requête, chargé depuis le design stocké
function TMainModule.ContactPage: string;
var
oForm: TsgcHTMLComponent_Form;
begin
oForm := TsgcHTMLComponent_Form.Create(nil);
try
oForm.Action := '/f/contact';
oForm.LoadFromJSON(ReadDefinition('contact'));
Result := oForm.HTML;
finally
oForm.Free;
end;
end;
// À l'envoi : valider, puis conserver les valeurs typées
function TMainModule.ContactPost(const aParams: TStrings): string;
var
oForm: TsgcHTMLComponent_Form;
oErrors: TStringList;
begin
oForm := TsgcHTMLComponent_Form.Create(nil);
oErrors := TStringList.Create;
try
oForm.LoadFromJSON(ReadDefinition('contact'));
if oForm.Validate(aParams, oErrors) then
begin
StoreResponse('contact', oForm.GetValuesJSON(aParams));
Result := ThankYouPage;
end
else
Result := oForm.GetValidationResponse(oErrors);
finally
oErrors.Free;
oForm.Free;
end;
end;@* Views/Forms/Builder.cshtml : le concepteur d'un formulaire *@
@model FormsModel
<sgc-form-builder name="builder" form="@Model.Form"
max-fields="50" css-height="720px"
on-save="Model.SaveDefinition" />using esegece.sgcWebSockets;
// OnSave du builder : aJSON est la définition normalisée
public void SaveDefinition(object Sender, string aJSON, ref bool aAccept,
ref string aErrorMessage)
{
store.Save("contact", aJSON);
}
// Le formulaire public, POST /f/contact
var form = new TsgcHTMLComponent_Form();
form.Action = "/f/contact";
form.LoadFromJSON(store.Load("contact"));
var fields = Request.Form.Select(f => f.Key + "=" + f.Value).ToList();
var errors = new List<string>();
if (form.Validate(fields, errors))
responses.Add("contact", form.GetValuesJSON(fields));
string schema = form.GetJSONSchema(); // JSON Schema 2020-12 des donnéesUn concepteur pour des personnes qui ne sont pas développeurs, et un formulaire qui se comporte exactement comme un formulaire écrit en code.
La boîte à outils regroupe les champs en De base, Choix, Avancés et Mise en page. Glissez un champ sur le canevas, ou appuyez sur Entrée pour l'ajouter après la sélection. Le canevas est une grille de 12 colonnes qui reproduit l'aspect réel des contrôles : définissez une largeur de 3, 4, 6, 8, 9 ou 12 colonnes, déplacez un champ en le faisant glisser ou avec Alt+Haut et Alt+Bas, dupliquez-le ou supprimez-le. Annuler et Rétablir fonctionnent avec Ctrl+Z et Ctrl+Y.
L'onglet Champ définit le libellé, un nom généré à partir du libellé et gardé unique, le texte indicatif, le texte d'aide, la valeur par défaut, obligatoire, lecture seule, les options à raison d'une par ligne, min et max, lignes et le masque de saisie. L'onglet Formulaire définit le titre, la description, une mise en page verticale ou horizontale, le texte d'envoi et le bouton de réinitialisation.
Chaque champ accepte une liste de règles : longueur, plage, motif, e-mail et personnalisée, chacune avec son propre message d'erreur. Ce sont les règles de TsgcHTMLComponent_Form, de sorte que le formulaire publié valide dans le navigateur, avec LiveValidation pendant la saisie, puis de nouveau sur le serveur avec Validate.
Affichez un champ uniquement tant qu'un champ précédent est égal à une valeur, en est différent, la contient, est vide ou non vide, ou est supérieur ou inférieur à un nombre. Le navigateur et le serveur appliquent les mêmes règles : un champ masqué n'est pas posté, un champ obligatoire masqué par sa condition n'échoue jamais, et un champ qui dépend d'un champ masqué est lui aussi masqué.
Texte, e-mail, mot de passe, nombre, textarea, select, radio, case à cocher, interrupteur, date, heure, couleur, plage, fichier et masqué, plus titre, paragraphe et séparateur pour structurer le formulaire. FieldTypes définit lesquels la boîte à outils propose.
L'aperçu rend le design sur le serveur comme un vrai formulaire, avec l'aspect du formulaire lié, de sorte que sa validation, ses masques et ses conditions s'exécutent, et que son envoi ne poste jamais rien. La vue JSON affiche la définition pour la consulter, la copier, la modifier et l'appliquer. ShowPreview et ShowJSON activent ou désactivent les vues.
Modèles contient une ligne Caption=JSON par modèle, et la barre d'outils les propose pour démarrer un nouveau formulaire. Nouveau formulaire demande confirmation avant d'abandonner les modifications non enregistrées, et quitter la page avec des modifications non enregistrées avertit aussi.
Toutes les actions fonctionnent au clavier. La boîte à outils et le canevas sont des listboxes WAI-ARIA, et une région live polie annonce les champs ajoutés, supprimés, déplacés et enregistrés, ainsi que les erreurs. Le builder suit le thème de la page (data-bs-theme), se met en miroir sous dir="rtl" et respecte la réduction des animations.
Les membres que vous utiliserez le plus souvent.
Form est le TsgcHTMLComponent_Form en cours de conception. Avec AutoApply (activé par défaut), un enregistrement y charge la nouvelle définition dans Form.Lock, si bien qu'une page qui rend le formulaire en même temps ne voit jamais la moitié d'un design. ReadOnly affiche le design et refuse Enregistrer.
OnSave(Sender, aJSON, aAccept, aErrorMessage) reçoit la définition normalisée : le JSON posté chargé dans un formulaire temporaire puis réécrit. Stockez-la là où vous conservez vos données. Mettez aAccept à False pour la refuser, avec votre propre texte dans aErrorMessage.
OnGetForm(Sender, aForm) renvoie le formulaire de l'utilisateur à l'origine de la requête. Il est appelé au moment du rendu et à chaque requête, et le builder ne libère jamais le formulaire que vous renvoyez. Le builder ne conserve aucun état entre les requêtes, donc un seul composant sert tous les utilisateurs.
Le navigateur vérifie les noms et les limites avant d'envoyer, et le serveur revérifie chaque définition postée : sa taille par rapport à MaxSize (256 Ko par défaut), le nombre de champs par rapport à MaxFields (100 par défaut), les types de champ, des noms valides et uniques, les largeurs de colonne, les règles et les conditions. Une définition qui échoue est refusée avec le motif, avant l'exécution de OnSave.
SaveToJSON et LoadFromJSON du formulaire écrivent et lisent la définition : le titre, la description, la mise en page, les boutons et les champs, avec leurs règles et conditions. Delphi et .NET l'écrivent octet pour octet à l'identique, si bien qu'un design enregistré par l'un se charge dans l'autre. LoadFromJSON lit aussi le tableau de champs de LoadFieldsFromJSON.
GetJSONSchema exporte un JSON Schema 2020-12 des données soumises, avec les types, formats, options, limites et les champs obligatoires. GetValuesJSON(aParams) renvoie les valeurs postées sous la forme d'un seul objet JSON dans l'ordre des champs : les nombres comme nombres, case à cocher et interrupteur comme true ou false, et les champs masqués par leur condition sont omis.
Le builder poste vers le point d'entrée des événements de composants du moteur HTMX, ou vers ActionURL. Sans l'un ni l'autre, il conçoit quand même, et Enregistrer déclenche l'événement DOM sgc-form-builder-save sur le builder avec le JSON dans son detail. Avec une URL, l'événement suit aussi un enregistrement réussi.
Dans une vue Razor, le Tag Helper <sgc-form-builder> rend le builder, et ses requêtes d'enregistrement et d'aperçu sont traitées par le middleware sgcHTML de UseSgcHtml. Les événements sont des gestionnaires C#, et le formulaire qu'il modifie est la même classe TsgcHTMLComponent_Form.
Demos\60.HTML\01.RunTime\34.FormBuilder est sgc Forms Studio, un serveur sur le port 8136 avec quatre formulaires qui servent aussi de modèles : une inscription à un événement, une enquête client, une candidature et une demande de support informatique. Chaque formulaire a une page publique avec validation en direct et une page de réponses avec une grille, un graphique, un export Excel et le JSON Schema. Les versions en mode conception, Lazarus et .NET le reproduisent.
| Essayer en ligneVoyez-le dans la démo Générateur de formulaires, en fonctionnement direct sur le serveur de démos d'eSeGeCe. | Ouvrir | |
| Aide en ligneRéférence API complète et guide d'utilisation pour ce composant. | Ouvrir | |
| Composant FormLe formulaire que conçoit le builder : champs, mises en page, règles et liaison aux jeux de données. | Ouvrir | |
| Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 80 composants. | Ouvrir | |
| Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML. | Ouvrir | |
| TarifsLicences Single, Team et Site avec code source complet. | Ouvrir |