Form Builder

TsgcHTMLComponent_FormBuilder: wizualny projektant formularzy działający w przeglądarce, dzięki któremu użytkownicy Twojej aplikacji projektują własne formularze. To, co publikują, jest zwykłym TsgcHTMLComponent_Form, z regułami walidacji, maskami wprowadzania, polami warunkowymi i walidacją na żywo, w Delphi, C++ Builder i .NET.

TsgcHTMLComponent_FormBuilder

Połącz go z TsgcHTMLComponent_Form i wyrenderuj. Użytkownicy przeciągają pola z przybornika na kanwę o 12 kolumnach, konfigurują je w inspektorze i klikają Zapisz. OnSave przekazuje Ci definicję jako JSON do zapisania, a dzięki AutoApply powiązany formularz od razu pokazuje nowy projekt.

Klasa komponentu

TsgcHTMLComponent_FormBuilder, który edytuje definicję powiązanego TsgcHTMLComponent_Form

Renderuje

Przybornik, kanwa projektowa, inspektor, podgląd i widok JSON, w czystym JavaScript i CSS bez zewnętrznej biblioteki

Języki

Delphi, C++ Builder, .NET

Połącz formularz, zapisz projekt, opublikuj go

Builder edytuje definicję powiązanego formularza. OnSave otrzymuje JSON do zapisania, a strona publiczna wczytuje go do własnego formularza przez LoadFromJSON. Przy wysyłce Validate sprawdza przesłane wartości, a GetValuesJSON zwraca je jako jeden otypowany obiekt JSON.

uses
  sgcHTML_Component_Form, sgcHTML_Component_FormBuilder;

// Na formularzu: TsgcHTMLComponent_Form (Form1) i
// TsgcHTMLComponent_FormBuilder (FormBuilder1) z Form = Form1

procedure TMainModule.FormBuilder1Save(Sender: TObject; const aJSON: string;
  var aAccept: Boolean; var aErrorMessage: string);
begin
  // aJSON to znormalizowana definicja, już sprawdzona przez serwer
  StoreDefinition('contact', aJSON);   // własny magazyn: plik, tabela
end;

// Strona publiczna: formularz na żądanie, wczytany z zapisanego projektu
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;

// Przy wysyłce: zwalidować, a następnie zachować otypowane wartości
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: projektant jednego formularza *@
@model FormsModel

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

// OnSave buildera: aJSON to znormalizowana definicja
public void SaveDefinition(object Sender, string aJSON, ref bool aAccept,
    ref string aErrorMessage)
{
    store.Save("contact", aJSON);
}

// Formularz publiczny, 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 danych

Co dostają Twoi użytkownicy

Projektant dla osób, które nie są programistami, i formularz, który zachowuje się dokładnie tak jak ten napisany w kodzie.

Przybornik i kanwa

Przybornik grupuje pola w Podstawowe, Wybór, Zaawansowane i Układ. Przeciągnij pole na kanwę albo naciśnij Enter, aby dodać je po zaznaczeniu. Kanwa to siatka o 12 kolumnach z wyglądem rzeczywistych kontrolek: ustaw szerokość 3, 4, 6, 8, 9 lub 12 kolumn, przesuń pole przeciągając je lub klawiszami Alt+Góra i Alt+Dół, powiel je lub usuń. Cofnij i Ponów działają z Ctrl+Z i Ctrl+Y.

Inspektor

Karta Pole ustawia etykietę, nazwę generowaną z etykiety i utrzymywaną jako unikalna, tekst zastępczy, tekst pomocy, wartość domyślną, wymagane, tylko do odczytu, opcje po jednej w wierszu, min i max, wiersze oraz maskę wprowadzania. Karta Formularz ustawia tytuł, opis, układ pionowy lub poziomy, tekst przycisku wysyłania i przycisk resetowania.

Reguły walidacji

Każde pole przyjmuje listę reguł: długość, zakres, wzorzec, e-mail i własną, każdą z osobnym komunikatem błędu. Są to reguły TsgcHTMLComponent_Form, więc opublikowany formularz waliduje w przeglądarce, z LiveValidation podczas pisania, i ponownie na serwerze przez Validate.

Pola warunkowe

Pokaż pole tylko wtedy, gdy wcześniejsze pole jest równe wartości, nie jest jej równe, zawiera ją, jest puste lub niepuste albo jest większe lub mniejsze od liczby. Przeglądarka i serwer stosują te same reguły: ukryte pole nie jest wysyłane, wymagane pole ukryte przez swój warunek nigdy nie zawodzi, a pole zależne od ukrytego pola również jest ukryte.

18 typów pól

Tekst, e-mail, hasło, liczba, textarea, select, radio, checkbox, switch, data, godzina, kolor, zakres, plik i ukryte, a także nagłówek, akapit i separator do układu formularza. FieldTypes określa, które z nich oferuje przybornik.

Podgląd i JSON

Podgląd renderuje projekt na serwerze jako prawdziwy formularz o wyglądzie powiązanego, więc działają jego walidacja, maski i warunki, a wysłanie niczego nie przesyła. Widok JSON pokazuje definicję do obejrzenia, skopiowania, edycji i zastosowania. ShowPreview i ShowJSON włączają lub wyłączają widoki.

Szablony

Szablony zawiera jedną linię Caption=JSON na szablon, a pasek narzędzi oferuje je jako punkt wyjścia nowego formularza. Nowy formularz pyta o potwierdzenie przed odrzuceniem niezapisanych zmian, a opuszczenie strony z niezapisanymi zmianami również wyświetla ostrzeżenie.

Dostępność

Każda czynność działa z klawiatury. Przybornik i kanwa to listboxy WAI-ARIA, a uprzejmy region live ogłasza dodane, usunięte, przesunięte i zapisane pola oraz błędy. Builder podąża za motywem strony (data-bs-theme), odbija się lustrzanie pod dir="rtl" i respektuje ograniczenie ruchu.

Kluczowe właściwości, metody i zdarzenia

Składowe, po które sięgasz najczęściej.

Form i AutoApply

Form to projektowany TsgcHTMLComponent_Form. Przy AutoApply (domyślnie włączonym) zapis ładuje do niego nową definicję wewnątrz Form.Lock, więc strona renderująca formularz w tym samym czasie nigdy nie widzi połowy projektu. ReadOnly pokazuje projekt i odrzuca Zapisz.

OnSave

OnSave(Sender, aJSON, aAccept, aErrorMessage) otrzymuje znormalizowaną definicję: przesłany JSON wczytany do tymczasowego formularza i zapisany z powrotem. Zapisz ją tam, gdzie przechowujesz dane. Ustaw aAccept na False, aby ją odrzucić, z własnym tekstem w aErrorMessage.

Projekty dla każdego użytkownika

OnGetForm(Sender, aForm) zwraca formularz użytkownika stojącego za żądaniem. Jest wywoływane podczas renderowania i przy każdym żądaniu, a builder nigdy nie zwalnia zwróconego przez Ciebie formularza. Builder nie przechowuje stanu między żądaniami, więc jeden komponent obsługuje wszystkich użytkowników.

Bezpieczeństwo

Przeglądarka sprawdza nazwy i limity przed wysłaniem, a serwer ponownie sprawdza każdą przesłaną definicję: jej rozmiar względem MaxSize (domyślnie 256 KB), liczbę pól względem MaxFields (domyślnie 100), typy pól, poprawne i unikalne nazwy, szerokości kolumn, reguły i warunki. Definicja, która nie przejdzie, zostaje odrzucona wraz z powodem, zanim uruchomi się OnSave.

JSON definicji

SaveToJSON i LoadFromJSON formularza zapisują i odczytują definicję: tytuł, opis, układ, przyciski i pola, wraz z ich regułami i warunkami. Delphi i .NET zapisują ją bajt w bajt tak samo, więc projekt zapisany przez jedno wczytuje się w drugim. LoadFromJSON odczytuje także tablicę pól z LoadFieldsFromJSON.

JSON Schema i wartości otypowane

GetJSONSchema eksportuje JSON Schema 2020-12 przesłanych danych, z typami, formatami, opcjami, limitami i polami wymaganymi. GetValuesJSON(aParams) zwraca przesłane wartości jako jeden obiekt JSON w kolejności pól: liczby jako liczby, checkbox i switch jako true lub false, a pola ukryte przez swój warunek są pomijane.

Bez zdarzenia serwera

Builder wysyła dane do endpointu zdarzeń komponentów silnika HTMX lub do ActionURL. Bez żadnego z nich nadal projektuje, a Zapisz wysyła zdarzenie DOM sgc-form-builder-save na builderze z JSON w jego detail. Z adresem URL zdarzenie następuje także po udanym zapisie.

ASP.NET Core

W widoku Razor Tag Helper <sgc-form-builder> renderuje builder, a jego żądania zapisu i podglądu obsługuje middleware sgcHTML z UseSgcHtml. Zdarzenia to procedury obsługi w C#, a edytowany formularz to ta sama klasa TsgcHTMLComponent_Form.

Demo

Demos\60.HTML\01.RunTime\34.FormBuilder to sgc Forms Studio, serwer na porcie 8136 z czterema formularzami, które służą też jako szablony: rejestracją na wydarzenie, ankietą klientów, podaniem o pracę i zgłoszeniem do wsparcia IT. Każdy formularz ma stronę publiczną z walidacją na żywo oraz stronę odpowiedzi z siatką, wykresem, eksportem do Excela i JSON Schema. Wersje design time, Lazarus i .NET są jego odpowiednikami.

Odkrywaj dalej

Wypróbuj onlineZobacz to w demie Kreator formularzy, działającym na żywo na serwerze demo eSeGeCe.
Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu.
Komponent FormFormularz projektowany przez builder: pola, układy, reguły i powiązanie z zestawami danych.
Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 80+ komponentów.
Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.
CennikLicencje Single, Team i Site z pełnym kodem źródłowym.
Najkorzystniejsza oferta: All-AccessWszystkie produkty eSeGeCe, ze wsparciem Premium w cenie, już od €1,059 rocznie.
Zobacz cennik All-Access

Gotowy, aby zacząć?

Pobierz bezpłatną wersję próbną i zacznij budować interfejsy webowe w Delphi, C++ Builder i .NET.