Form Builder

TsgcHTMLComponent_FormBuilder: um designer visual de formulários que roda no navegador, para que os usuários da sua aplicação projetem seus próprios formulários. O que eles publicam é um TsgcHTMLComponent_Form comum, com suas regras de validação, máscaras de entrada, campos condicionais e validação em tempo real, em Delphi, C++ Builder e .NET.

TsgcHTMLComponent_FormBuilder

Vincule-o a um TsgcHTMLComponent_Form e renderize-o. Os usuários arrastam campos de uma caixa de ferramentas para uma tela de 12 colunas, configuram-nos em um inspetor e clicam em Salvar. OnSave entrega a definição como JSON para armazenar e, com AutoApply, o formulário vinculado mostra o novo design imediatamente.

Classe do componente

TsgcHTMLComponent_FormBuilder, que edita a definição de um TsgcHTMLComponent_Form vinculado

Renderiza

Uma caixa de ferramentas, uma tela de design, um inspetor, uma visualização e uma exibição JSON, em JavaScript e CSS puros, sem biblioteca externa

Linguagens

Delphi, C++ Builder, .NET

Vincule um formulário, armazene o design, publique-o

O builder edita a definição do formulário vinculado. OnSave recebe o JSON a armazenar, e a página pública o carrega em um formulário próprio com LoadFromJSON. No envio, Validate verifica os valores enviados e GetValuesJSON os devolve como um único objeto JSON tipado.

uses
  sgcHTML_Component_Form, sgcHTML_Component_FormBuilder;

// No formulário: um TsgcHTMLComponent_Form (Form1) e um
// TsgcHTMLComponent_FormBuilder (FormBuilder1) com Form = Form1

procedure TMainModule.FormBuilder1Save(Sender: TObject; const aJSON: string;
  var aAccept: Boolean; var aErrorMessage: string);
begin
  // aJSON é a definição normalizada, já verificada pelo servidor
  StoreDefinition('contact', aJSON);   // seu próprio armazenamento: um arquivo, uma tabela
end;

// A página pública: um formulário por requisição, carregado do design armazenado
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;

// No envio: validar e depois guardar os 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: o designer de um formulário *@
@model FormsModel

<sgc-form-builder name="builder" form="@Model.Form"
                  max-fields="50" css-height="720px"
                  on-save="Model.SaveDefinition" />
using esegece.sgcWebSockets;

// OnSave do builder: aJSON é a definição normalizada
public void SaveDefinition(object Sender, string aJSON, ref bool aAccept,
    ref string aErrorMessage)
{
    store.Save("contact", aJSON);
}

// O formulário 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 dos dados

O que seus usuários recebem

Um designer para pessoas que não são desenvolvedoras e um formulário que se comporta exatamente como um escrito em código.

Caixa de ferramentas e tela

A caixa de ferramentas agrupa os campos em Básicos, Escolhas, Avançados e Layout. Arraste um campo para a tela, ou pressione Enter para adicioná-lo após a seleção. A tela é uma grade de 12 colunas com a aparência real dos controles: defina uma largura de 3, 4, 6, 8, 9 ou 12 colunas, mova um campo arrastando-o ou com Alt+Seta para cima e Alt+Seta para baixo, duplique-o ou exclua-o. Desfazer e Refazer funcionam com Ctrl+Z e Ctrl+Y.

Inspetor

A guia Campo define o rótulo, um nome gerado a partir do rótulo e mantido único, o texto de exemplo, o texto de ajuda, o valor padrão, obrigatório, somente leitura, as opções uma por linha, mínimo e máximo, linhas e a máscara de entrada. A guia Formulário define o título, a descrição, um layout vertical ou horizontal, o texto de envio e o botão de redefinir.

Regras de validação

Cada campo aceita uma lista de regras: tamanho, intervalo, padrão, e-mail e personalizada, cada uma com sua própria mensagem de erro. São as regras de TsgcHTMLComponent_Form, portanto o formulário publicado valida no navegador, com LiveValidation enquanto o usuário digita, e novamente no servidor com Validate.

Campos condicionais

Mostre um campo somente enquanto um campo anterior for igual a um valor, for diferente, o contiver, estiver vazio ou não vazio, ou for maior ou menor que um número. O navegador e o servidor aplicam as mesmas regras: um campo oculto não é enviado, um campo obrigatório oculto por sua condição nunca falha, e um campo que depende de um campo oculto também fica oculto.

18 tipos de campo

Texto, e-mail, senha, número, textarea, select, radio, checkbox, switch, data, hora, cor, intervalo, arquivo e oculto, além de título, parágrafo e divisor para organizar o formulário. FieldTypes define quais deles a caixa de ferramentas oferece.

Visualização e JSON

Visualização renderiza o design no servidor como um formulário real com a aparência do vinculado, de modo que sua validação, máscaras e condições funcionam, e o envio nunca posta nada. A exibição JSON mostra a definição para ver, copiar, editar e aplicar. ShowPreview e ShowJSON ativam ou desativam as exibições.

Modelos

Modelos contém uma linha Caption=JSON por modelo, e a barra de ferramentas os oferece para iniciar um novo formulário. Novo formulário pergunta antes de descartar as alterações não salvas, e sair da página com alterações não salvas também avisa.

Acessibilidade

Todas as ações funcionam pelo teclado. A caixa de ferramentas e a tela são listboxes WAI-ARIA, e uma região live educada anuncia os campos adicionados, excluídos, movidos e salvos, e os erros. O builder segue o tema da página (data-bs-theme), espelha-se sob dir="rtl" e respeita a redução de movimento.

Principais propriedades, métodos & eventos

Os membros que você mais usa.

Form e AutoApply

Form é o TsgcHTMLComponent_Form que está sendo projetado. Com AutoApply (ativo por padrão) um salvamento carrega nele a nova definição dentro de Form.Lock, de modo que uma página que renderiza o formulário ao mesmo tempo nunca vê metade de um design. ReadOnly mostra o design e recusa Salvar.

OnSave

OnSave(Sender, aJSON, aAccept, aErrorMessage) recebe a definição normalizada: o JSON enviado carregado em um formulário temporário e escrito de volta. Armazene-a onde você guarda seus dados. Defina aAccept como False para recusá-la, com seu próprio texto em aErrorMessage.

Designs por usuário

OnGetForm(Sender, aForm) devolve o formulário do usuário por trás da requisição. É chamado na hora de renderizar e a cada requisição, e o builder nunca libera o formulário que você devolve. O builder não guarda estado entre requisições, então um único componente atende todos os usuários.

Segurança

O navegador verifica os nomes e os limites antes de enviar, e o servidor verifica novamente cada definição enviada: o tamanho em relação a MaxSize (256 KB por padrão), o número de campos em relação a MaxFields (100 por padrão), os tipos de campo, nomes válidos e únicos, as larguras de coluna, as regras e as condições. Uma definição que falha é recusada com o motivo, antes de OnSave ser executado.

O JSON da definição

SaveToJSON e LoadFromJSON do formulário escrevem e leem a definição: o título, a descrição, o layout, os botões e os campos, com suas regras e condições. Delphi e .NET a escrevem byte a byte igual, de modo que um design salvo por um carrega no outro. LoadFromJSON também lê o array de campos de LoadFieldsFromJSON.

JSON Schema e valores tipados

GetJSONSchema exporta um JSON Schema 2020-12 dos dados enviados, com tipos, formatos, opções, limites e os campos obrigatórios. GetValuesJSON(aParams) devolve os valores enviados como um único objeto JSON na ordem dos campos: números como números, checkbox e switch como true ou false, e os campos ocultos por sua condição são omitidos.

Sem evento de servidor

O builder envia para o endpoint de eventos de componentes do motor HTMX, ou para ActionURL. Sem nenhum dos dois, ele ainda projeta, e Salvar dispara o evento DOM sgc-form-builder-save no builder com o JSON em seu detail. Com uma URL, o evento também segue um salvamento bem-sucedido.

ASP.NET Core

Em uma view Razor, o Tag Helper <sgc-form-builder> renderiza o builder, e suas requisições de salvamento e visualização são atendidas pelo middleware sgcHTML de UseSgcHtml. Os eventos são manipuladores C#, e o formulário que ele edita é a mesma classe TsgcHTMLComponent_Form.

A demo

Demos\60.HTML\01.RunTime\34.FormBuilder é o sgc Forms Studio, um servidor na porta 8136 com quatro formulários que também servem de modelos: uma inscrição em evento, uma pesquisa com clientes, uma candidatura a emprego e uma solicitação de suporte de TI. Cada formulário tem uma página pública com validação em tempo real e uma página de respostas com uma grade, um gráfico, uma exportação para Excel e o JSON Schema. As versões design time, Lazarus e .NET o espelham.

Continue explorando

Experimente onlineVeja na demo Construtor de formulários, rodando ao vivo no servidor de demos da eSeGeCe.
Ajuda onlineReferência completa da API e guia de uso para este componente.
Componente FormO formulário que o builder projeta: campos, layouts, regras e vinculação a datasets.
Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 80 componentes.
Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.
PreçosLicenças Single, Team e Site com código-fonte completo.
Melhor custo-benefício: All-AccessTodos os produtos da eSeGeCe, com Suporte Premium incluído, a partir de €1,059/ano.
Ver preços do All-Access

Pronto para Começar?

Baixe a versão de avaliação gratuita e comece a construir UIs web em Delphi, C++ Builder e .NET.