TsgcHTMLComponent_FormBuilder: un diseñador visual de formularios que se ejecuta en el navegador, para que los usuarios de tu aplicación diseñen sus propios formularios. Lo que publican es un TsgcHTMLComponent_Form normal, con sus reglas de validación, máscaras de entrada, campos condicionales y validación en vivo, en Delphi, C++ Builder y .NET.
Enlázalo a un TsgcHTMLComponent_Form y renderízalo. Los usuarios arrastran campos desde una caja de herramientas a un lienzo de 12 columnas, los configuran en un inspector y pulsan Guardar. OnSave te entrega la definición como JSON para almacenarla, y con AutoApply el formulario enlazado muestra el nuevo diseño al instante.
TsgcHTMLComponent_FormBuilder, que edita la definición de un TsgcHTMLComponent_Form enlazado
Una caja de herramientas, un lienzo de diseño, un inspector, una vista previa y una vista JSON, en JavaScript y CSS puros sin ninguna biblioteca externa
Delphi, C++ Builder, .NET
El diseñador edita la definición del formulario enlazado. OnSave recibe el JSON que se almacena, y la página pública lo carga en un formulario propio con LoadFromJSON. Al enviar, Validate comprueba los valores recibidos y GetValuesJSON los devuelve como un único objeto JSON tipado.
uses
sgcHTML_Component_Form, sgcHTML_Component_FormBuilder;
// En el formulario: un TsgcHTMLComponent_Form (Form1) y un
// TsgcHTMLComponent_FormBuilder (FormBuilder1) con Form = Form1
procedure TMainModule.FormBuilder1Save(Sender: TObject; const aJSON: string;
var aAccept: Boolean; var aErrorMessage: string);
begin
// aJSON es la definición normalizada, ya comprobada por el servidor
StoreDefinition('contact', aJSON); // tu propio almacén: un archivo, una tabla
end;
// La página pública: un formulario por petición, cargado desde el diseño guardado
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;
// Al enviar: validar y luego conservar los valores tipados
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: el diseñador de un formulario *@
@model FormsModel
<sgc-form-builder name="builder" form="@Model.Form"
max-fields="50" css-height="720px"
on-save="Model.SaveDefinition" />using esegece.sgcWebSockets;
// OnSave del diseñador: aJSON es la definición normalizada
public void SaveDefinition(object Sender, string aJSON, ref bool aAccept,
ref string aErrorMessage)
{
store.Save("contact", aJSON);
}
// El formulario público, 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 de los datosUn diseñador para personas que no son desarrolladores, y un formulario que se comporta exactamente como uno escrito en código.
La caja de herramientas agrupa los campos en Básicos, Selección, Avanzados y Diseño. Arrastra un campo al lienzo, o pulsa Enter para añadirlo tras la selección. El lienzo es una cuadrícula de 12 columnas con el aspecto real de los controles: define un ancho de 3, 4, 6, 8, 9 o 12 columnas, mueve un campo arrastrándolo o con Alt+Arriba y Alt+Abajo, duplícalo o elimínalo. Deshacer y Rehacer funcionan con Ctrl+Z y Ctrl+Y.
La pestaña Campo define la etiqueta, un nombre generado a partir de la etiqueta y mantenido único, el marcador de posición, el texto de ayuda, el valor por defecto, obligatorio, solo lectura, las opciones una por línea, mínimo y máximo, filas y la máscara de entrada. La pestaña Formulario define el título, la descripción, un diseño vertical u horizontal, el texto del botón de envío y el botón de restablecer.
Cada campo admite una lista de reglas: longitud, rango, patrón, email y personalizada, cada una con su propio mensaje de error. Son las reglas de TsgcHTMLComponent_Form, de modo que el formulario publicado valida en el navegador, con LiveValidation mientras el usuario escribe, y de nuevo en el servidor con Validate.
Muestra un campo solo mientras un campo anterior es igual a un valor, es distinto, lo contiene, está vacío o no vacío, o es mayor o menor que un número. El navegador y el servidor aplican las mismas reglas: un campo oculto no se envía, un campo obligatorio oculto por su condición nunca falla, y un campo que depende de un campo oculto también queda oculto.
Texto, email, contraseña, número, textarea, select, radio, checkbox, switch, fecha, hora, color, rango, archivo y oculto, además de encabezado, párrafo y separador para maquetar el formulario. FieldTypes define cuáles de ellos ofrece la caja de herramientas.
La vista previa renderiza el diseño en el servidor como un formulario real con el aspecto del enlazado, de modo que su validación, máscaras y condiciones se ejecutan, y al enviarlo nunca se envía nada. La vista JSON muestra la definición para verla, copiarla, editarla y aplicarla. ShowPreview y ShowJSON activan o desactivan las vistas.
Plantillas contiene una línea Caption=JSON por plantilla, y la barra de herramientas las ofrece para empezar un formulario nuevo. Nuevo formulario pregunta antes de descartar los cambios sin guardar, y salir de la página con cambios sin guardar también avisa.
Todas las acciones funcionan con el teclado. La caja de herramientas y el lienzo son listboxes WAI-ARIA, y una región en vivo educada anuncia los campos añadidos, eliminados, movidos y guardados, y los errores. El diseñador sigue el tema de la página (data-bs-theme), se refleja bajo dir="rtl" y respeta la reducción de movimiento.
Los miembros que más vas a usar.
Form es el TsgcHTMLComponent_Form que se diseña. Con AutoApply (activado por defecto) al guardar se carga en él la nueva definición dentro de Form.Lock, de modo que una página que renderiza el formulario al mismo tiempo nunca ve medio diseño. ReadOnly muestra el diseño y rechaza Guardar.
OnSave(Sender, aJSON, aAccept, aErrorMessage) recibe la definición normalizada: el JSON recibido cargado en un formulario temporal y vuelto a escribir. Guárdala donde conserves tus datos. Pon aAccept a False para rechazarla, con tu propio texto en aErrorMessage.
OnGetForm(Sender, aForm) devuelve el formulario del usuario que hace la petición. Se llama al renderizar y en cada petición, y el diseñador nunca libera el formulario que devuelves. El diseñador no guarda estado entre peticiones, así que un solo componente atiende a todos los usuarios.
El navegador comprueba los nombres y los límites antes de enviar, y el servidor vuelve a comprobar cada definición recibida: su tamaño frente a MaxSize (256 KB por defecto), el número de campos frente a MaxFields (100 por defecto), los tipos de campo, que los nombres sean válidos y únicos, los anchos de columna, las reglas y las condiciones. Una definición que no pasa se rechaza con el motivo, antes de que se ejecute OnSave.
SaveToJSON y LoadFromJSON del formulario escriben y leen la definición: el título, la descripción, el diseño, los botones y los campos, con sus reglas y condiciones. Delphi y .NET la escriben byte por byte igual, así que un diseño guardado por uno se carga en el otro. LoadFromJSON también lee el array de campos de LoadFieldsFromJSON.
GetJSONSchema exporta un JSON Schema 2020-12 de los datos enviados, con tipos, formatos, opciones, límites y los campos obligatorios. GetValuesJSON(aParams) devuelve los valores recibidos como un único objeto JSON en el orden de los campos: los números como números, checkbox y switch como true o false, y los campos ocultos por su condición se omiten.
El diseñador envía al endpoint de eventos de componentes del motor HTMX, o a ActionURL. Sin ninguno de los dos, sigue diseñando, y Guardar lanza el evento DOM sgc-form-builder-save sobre el diseñador con el JSON en su detalle. Con una URL, el evento también se lanza tras un guardado correcto.
En una vista Razor, el Tag Helper <sgc-form-builder> renderiza el diseñador, y sus peticiones de guardado y vista previa las atiende el middleware sgcHTML de UseSgcHtml. Los eventos son manejadores C#, y el formulario que edita es la misma clase TsgcHTMLComponent_Form.
Demos\60.HTML\01.RunTime\34.FormBuilder es sgc Forms Studio, un servidor en el puerto 8136 con cuatro formularios que además sirven de plantillas: una inscripción a un evento, una encuesta de clientes, una solicitud de empleo y una solicitud de soporte informático. Cada formulario tiene una página pública con validación en vivo y una página de respuestas con una rejilla, un gráfico, una exportación a Excel y el JSON Schema. Las versiones de tiempo de diseño, Lazarus y .NET lo replican.
| Pruébalo en líneaMíralo en la demo Constructor de formularios, funcionando en vivo en el servidor de demos de eSeGeCe. | Abrir | |
| Ayuda en líneaReferencia completa de la API y guía de uso para este componente. | Abrir | |
| Componente FormEl formulario que diseña el diseñador: campos, diseños, reglas y vinculación a datasets. | Abrir | |
| Todos los componentes de sgcHTMLExplora la matriz de características completa de más de 80 componentes. | Abrir | |
| Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML. | Abrir | |
| PreciosLicencias Single, Team y Site con todo el código fuente. | Abrir |