TsgcHTMLComponent_FormBuilder: een visuele formulierontwerper die in de browser draait, zodat de gebruikers van je applicatie hun eigen formulieren ontwerpen. Wat ze publiceren is een gewone TsgcHTMLComponent_Form, met zijn validatieregels, invoermaskers, voorwaardelijke velden en live validatie, in Delphi, C++ Builder en .NET.
Koppel hem aan een TsgcHTMLComponent_Form en render hem. Gebruikers slepen velden uit een gereedschapskist naar een canvas van 12 kolommen, stellen ze in met een inspecteur en klikken op Opslaan. OnSave geeft je de definitie als JSON om op te slaan, en met AutoApply toont het gekoppelde formulier meteen het nieuwe ontwerp.
TsgcHTMLComponent_FormBuilder, die de definitie van een gekoppelde TsgcHTMLComponent_Form bewerkt
Een gereedschapskist, een ontwerpcanvas, een inspecteur, een voorbeeld en een JSON-weergave, in puur JavaScript en CSS zonder externe bibliotheek
Delphi, C++ Builder, .NET
De builder bewerkt de definitie van het gekoppelde formulier. OnSave ontvangt de JSON om op te slaan, en de openbare pagina laadt die met LoadFromJSON in een eigen formulier. Bij het verzenden controleert Validate de verzonden waarden en GetValuesJSON geeft ze terug als één getypeerd JSON-object.
uses
sgcHTML_Component_Form, sgcHTML_Component_FormBuilder;
// Op het formulier: een TsgcHTMLComponent_Form (Form1) en een
// TsgcHTMLComponent_FormBuilder (FormBuilder1) met Form = Form1
procedure TMainModule.FormBuilder1Save(Sender: TObject; const aJSON: string;
var aAccept: Boolean; var aErrorMessage: string);
begin
// aJSON is de genormaliseerde definitie, al gecontroleerd door de server
StoreDefinition('contact', aJSON); // je eigen opslag: een bestand, een tabel
end;
// De openbare pagina: een formulier per verzoek, geladen uit het opgeslagen ontwerp
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;
// Bij het verzenden: valideren en daarna de getypeerde waarden bewaren
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: de ontwerper van één formulier *@
@model FormsModel
<sgc-form-builder name="builder" form="@Model.Form"
max-fields="50" css-height="720px"
on-save="Model.SaveDefinition" />using esegece.sgcWebSockets;
// OnSave van de builder: aJSON is de genormaliseerde definitie
public void SaveDefinition(object Sender, string aJSON, ref bool aAccept,
ref string aErrorMessage)
{
store.Save("contact", aJSON);
}
// Het openbare formulier, 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 van de gegevensEen ontwerper voor mensen die geen ontwikkelaar zijn, en een formulier dat zich precies gedraagt als een formulier dat je in code hebt geschreven.
De gereedschapskist groepeert de velden in Basis, Keuzes, Geavanceerd en Indeling. Sleep een veld naar het canvas, of druk op Enter om het na de selectie toe te voegen. Het canvas is een raster van 12 kolommen met de echte weergave van de besturingselementen: stel een breedte van 3, 4, 6, 8, 9 of 12 kolommen in, verplaats een veld door te slepen of met Alt+Omhoog en Alt+Omlaag, dupliceer of verwijder het. Ongedaan maken en Opnieuw werken met Ctrl+Z en Ctrl+Y.
Het tabblad Veld stelt het label in, een uit het label gegenereerde en unieke naam, tijdelijke aanduiding, helptekst, standaardwaarde, verplicht, alleen-lezen, de opties één per regel, min en max, rijen en het invoermasker. Het tabblad Formulier stelt de titel, de beschrijving, een verticale of horizontale indeling, de verzendtekst en de resetknop in.
Elk veld krijgt een lijst met regels: lengte, bereik, patroon, e-mail en aangepast, elk met een eigen foutmelding. Het zijn de regels van TsgcHTMLComponent_Form, dus het gepubliceerde formulier valideert in de browser, met LiveValidation terwijl de gebruiker typt, en opnieuw op de server met Validate.
Toon een veld alleen zolang een eerder veld gelijk is aan een waarde, er niet aan gelijk is, de waarde bevat, leeg of niet leeg is, of groter of kleiner is dan een getal. De browser en de server passen dezelfde regels toe: een verborgen veld wordt niet verzonden, een verplicht veld dat door zijn voorwaarde is verborgen mislukt nooit, en een veld dat afhangt van een verborgen veld is ook verborgen.
Tekst, e-mail, wachtwoord, getal, textarea, select, radio, checkbox, switch, datum, tijd, kleur, bereik, bestand en verborgen, plus kop, alinea en scheidingslijn om het formulier op te maken. FieldTypes bepaalt welke de gereedschapskist aanbiedt.
Voorbeeld rendert het ontwerp op de server als een echt formulier met de uitstraling van het gekoppelde formulier, zodat validatie, maskers en voorwaarden werken en verzenden nooit iets verstuurt. De JSON-weergave toont de definitie om te bekijken, kopiëren, bewerken en toepassen. ShowPreview en ShowJSON schakelen de weergaven in of uit.
Sjablonen bevat per sjabloon één regel Caption=JSON, en de werkbalk biedt ze aan om een nieuw formulier mee te beginnen. Nieuw formulier vraagt om bevestiging voordat niet-opgeslagen wijzigingen worden weggegooid, en ook het verlaten van de pagina met niet-opgeslagen wijzigingen geeft een waarschuwing.
Elke actie werkt met het toetsenbord. De gereedschapskist en het canvas zijn WAI-ARIA-listboxen, en een beleefd live-gebied kondigt toegevoegde, verwijderde, verplaatste en opgeslagen velden en fouten aan. De builder volgt het paginathema (data-bs-theme), spiegelt zichzelf onder dir="rtl" en respecteert verminderde beweging.
De leden die je het vaakst gebruikt.
Form is de TsgcHTMLComponent_Form die wordt ontworpen. Met AutoApply (standaard aan) laadt een opslag de nieuwe definitie erin binnen Form.Lock, zodat een pagina die het formulier tegelijk rendert nooit een half ontwerp ziet. ReadOnly toont het ontwerp en weigert Opslaan.
OnSave(Sender, aJSON, aAccept, aErrorMessage) ontvangt de genormaliseerde definitie: de verzonden JSON, geladen in een tijdelijk formulier en teruggeschreven. Sla hem op waar je je gegevens bewaart. Zet aAccept op False om hem te weigeren, met je eigen tekst in aErrorMessage.
OnGetForm(Sender, aForm) geeft het formulier van de gebruiker achter het verzoek terug. Het wordt aangeroepen bij het renderen en bij elk verzoek, en de builder geeft het formulier dat je teruggeeft nooit vrij. De builder bewaart geen status tussen verzoeken, dus één component bedient elke gebruiker.
De browser controleert de namen en de limieten voordat hij verzendt, en de server controleert elke verzonden definitie opnieuw: de grootte tegen MaxSize (standaard 256 KB), het aantal velden tegen MaxFields (standaard 100), de veldtypen, geldige en unieke namen, de kolombreedtes, de regels en de voorwaarden. Een definitie die faalt wordt met de reden geweigerd, voordat OnSave draait.
SaveToJSON en LoadFromJSON van het formulier schrijven en lezen de definitie: de titel, beschrijving, indeling, knoppen en velden, met hun regels en voorwaarden. Delphi en .NET schrijven hem byte voor byte hetzelfde, dus een ontwerp dat door de een is opgeslagen laadt in de ander. LoadFromJSON leest ook de veldarray van LoadFieldsFromJSON.
GetJSONSchema exporteert een JSON Schema 2020-12 van de verzonden gegevens, met typen, formaten, opties, limieten en de verplichte velden. GetValuesJSON(aParams) geeft de verzonden waarden terug als één JSON-object in veldvolgorde: getallen als getallen, checkbox en switch als true of false, en de door hun voorwaarde verborgen velden weggelaten.
De builder verzendt naar het componentgebeurtenissen-endpoint van de HTMX-engine, of naar ActionURL. Zonder een van beide ontwerpt hij nog steeds, en Opslaan verstuurt de DOM-gebeurtenis sgc-form-builder-save op de builder met de JSON in zijn detail. Met een URL volgt de gebeurtenis ook op een geslaagde opslag.
In een Razor-view rendert de Tag Helper <sgc-form-builder> de builder, en zijn opslag- en voorbeeldverzoeken worden beantwoord door de sgcHTML-middleware van UseSgcHtml. De gebeurtenissen zijn C#-handlers, en het formulier dat hij bewerkt is dezelfde klasse TsgcHTMLComponent_Form.
Demos\60.HTML\01.RunTime\34.FormBuilder is sgc Forms Studio, een server op poort 8136 met vier formulieren die ook als sjablonen dienen: een evenementregistratie, een klantenenquête, een sollicitatie en een IT-supportaanvraag. Elk formulier heeft een openbare pagina met live validatie en een antwoordenpagina met een grid, een grafiek, een Excel-export en het JSON Schema. De designtime-, Lazarus- en .NET-versies spiegelen het.
| Online proberenBekijk het in de demo Formulierbouwer, live draaiend op de eSeGeCe-demoserver. | Openen | |
| Online helpVolledige API-referentie en gebruikshandleiding voor dit component. | Openen | |
| Form-componentHet formulier dat de builder ontwerpt: velden, indelingen, regels en dataset-koppeling. | Openen | |
| Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten. | Openen | |
| Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten. | Openen | |
| PrijzenSingle-, Team- en Site-licenties met volledige broncode. | Openen |