Form Builder

TsgcHTMLComponent_FormBuilder: ブラウザー上で動作するビジュアルなフォームデザイナーで、アプリケーションのユーザーが自分のフォームを設計できます。公開されるのは通常の TsgcHTMLComponent_Form で、検証ルール、入力マスク、条件付きフィールド、リアルタイム検証を備え、Delphi、C++ Builder、.NET で利用できます。

TsgcHTMLComponent_FormBuilder

TsgcHTMLComponent_Form にリンクしてレンダリングします。ユーザーはツールボックスからフィールドを 12 列のキャンバスへドラッグし、インスペクターで設定して 保存 を押します。OnSave は保存用の定義を JSON で渡し、AutoApply を使うとリンクされたフォームに新しいデザインがすぐ反映されます。

コンポーネントクラス

TsgcHTMLComponent_FormBuilder、リンクされた TsgcHTMLComponent_Form の定義を編集します

レンダリング内容

ツールボックス、デザインキャンバス、インスペクター、プレビュー、JSON ビュー。外部ライブラリを使わず、素の JavaScript と CSS だけで構成

ファミリー

フォーム & 入力

言語

Delphi, C++ Builder, .NET

フォームをリンクし、デザインを保存し、公開する

ビルダーはリンクされたフォームの定義を編集します。OnSave が保存する JSON を受け取り、公開ページは LoadFromJSON でそれを専用のフォームに読み込みます。送信時には Validate が送られた値を検証し、GetValuesJSON が型付きの単一の JSON オブジェクトとして返します。

uses
  sgcHTML_Component_Form, sgcHTML_Component_FormBuilder;

// フォーム上に TsgcHTMLComponent_Form (Form1) と
// TsgcHTMLComponent_FormBuilder (FormBuilder1) を置き、Form = Form1 にします

procedure TMainModule.FormBuilder1Save(Sender: TObject; const aJSON: string;
  var aAccept: Boolean; var aErrorMessage: string);
begin
  // aJSON は正規化された定義で、サーバーが検証済みです
  StoreDefinition('contact', aJSON);   // 独自のストア: ファイルやテーブルなど
end;

// 公開ページ: リクエストごとに 1 つのフォームを、保存されたデザインから読み込みます
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;

// 送信時: 検証してから、型付きの値を保持します
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: 1 つのフォームのデザイナー *@
@model FormsModel

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

// ビルダーの OnSave: aJSON は正規化された定義です
public void SaveDefinition(object Sender, string aJSON, ref bool aAccept,
    ref string aErrorMessage)
{
    store.Save("contact", aJSON);
}

// 公開フォーム、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

ユーザーが得られるもの

開発者ではない人のためのデザイナーと、コードで書いたものとまったく同じように動くフォーム。

ツールボックスとキャンバス

ツールボックスはフィールドを「基本」「選択」「詳細」「レイアウト」にグループ化します。フィールドをキャンバスにドラッグするか、Enter キーで選択位置の後ろに追加します。キャンバスは実際のコントロールの見た目を再現する 12 列のグリッドです。幅は 3、4、6、8、9、12 列から選べ、フィールドはドラッグするか Alt+上 と Alt+下 で移動でき、複製や削除もできます。「元に戻す」と「やり直し」は Ctrl+Z と Ctrl+Y で動作します。

インスペクター

「フィールド」タブでは、ラベル、ラベルから生成され一意に保たれる名前、プレースホルダー、ヘルプテキスト、既定値、必須、読み取り専用、1 行に 1 つの選択肢、最小値と最大値、行数、入力マスクを設定します。「フォーム」タブでは、タイトル、説明、縦または横のレイアウト、送信ボタンのテキスト、リセットボタンを設定します。

検証ルール

各フィールドにはルールの一覧を設定できます。長さ、範囲、パターン、メール、カスタムがあり、それぞれ独自のエラーメッセージを持ちます。これらは TsgcHTMLComponent_Form のルールそのものなので、公開されたフォームはブラウザー上で、ユーザーの入力中は LiveValidation で検証され、サーバー上でも Validate で再び検証されます。

条件付きフィールド

前にあるフィールドが、ある値と等しい、等しくない、含む、空である、空でない、ある数値より大きい、または小さい場合にだけ、フィールドを表示します。ブラウザーとサーバーは同じルールを適用します。非表示のフィールドは送信されず、条件で非表示になった必須フィールドが失敗することはなく、非表示のフィールドに依存するフィールドも非表示になります。

18 種類のフィールド

テキスト、メール、パスワード、数値、テキストエリア、セレクト、ラジオ、チェックボックス、スイッチ、日付、時刻、色、範囲、ファイル、非表示に加え、フォームのレイアウトを整える見出し、段落、区切り線があります。FieldTypes で、ツールボックスに表示するものを指定します。

プレビューと JSON

「プレビュー」は、リンクされたフォームと同じ見た目の実際のフォームとしてデザインをサーバー側でレンダリングするので、検証、マスク、条件が動作し、送信しても実際には何も送られません。JSON ビューでは定義を表示、コピー、編集、適用できます。ShowPreview と ShowJSON で、各ビューのオンとオフを切り替えます。

テンプレート

テンプレート にはテンプレートごとに Caption=JSON の 1 行を記述し、ツールバーから新しいフォームの出発点として選べます。「新規フォーム」は、未保存の変更を破棄する前に確認し、未保存の変更があるままページを離れる場合にも警告します。

アクセシビリティ

すべての操作をキーボードで行えます。ツールボックスとキャンバスは WAI-ARIA のリストボックスで、ポライトなライブリージョンがフィールドの追加、削除、移動、保存とエラーを通知します。ビルダーはページのテーマ (data-bs-theme) に従い、dir="rtl" では左右反転し、動きの軽減設定を尊重します。

主なプロパティ、メソッド、イベント

最もよく使うメンバーです。

Form と AutoApply

Form は設計対象の TsgcHTMLComponent_Form です。AutoApply (既定でオン) を使うと、保存時に Form.Lock の中で新しい定義がそれに読み込まれるため、同時にそのフォームをレンダリングしているページが中途半端なデザインを目にすることはありません。ReadOnly はデザインを表示し、「保存」を拒否します。

OnSave

OnSave(Sender, aJSON, aAccept, aErrorMessage) は正規化された定義を受け取ります。送信された JSON を一時的なフォームに読み込んで書き戻したものです。データを保管している場所に保存してください。aAccept を False にすると拒否でき、aErrorMessage に独自のメッセージを設定できます。

ユーザーごとのデザイン

OnGetForm(Sender, aForm) は、リクエストを送ったユーザーのフォームを返します。レンダリング時とすべてのリクエストで呼ばれ、ビルダーが返されたフォームを解放することはありません。ビルダーはリクエスト間で状態を保持しないため、1 つのコンポーネントがすべてのユーザーに対応します。

セキュリティ

ブラウザーは送信前に名前と上限をチェックし、サーバーは送信されたすべての定義を再度チェックします。サイズは MaxSize (既定は 256 KB)、フィールド数は MaxFields (既定は 100)、フィールドの種類、有効で一意な名前、列幅、ルール、条件が対象です。チェックに通らない定義は、OnSave が実行される前に理由とともに拒否されます。

定義の JSON

フォームの SaveToJSON と LoadFromJSON が定義を書き出して読み込みます。タイトル、説明、レイアウト、ボタン、フィールドとそのルールおよび条件が対象です。Delphi と .NET はバイト単位で同一に書き出すため、一方で保存したデザインをもう一方で読み込めます。LoadFromJSON は LoadFieldsFromJSON のフィールド配列も読み込みます。

JSON Schema と型付きの値

GetJSONSchema は、送信されたデータの JSON Schema 2020-12 を、型、フォーマット、選択肢、制限、必須フィールドとともに出力します。GetValuesJSON(aParams) は、送信された値をフィールド順の単一の JSON オブジェクトとして返します。数値は数値、チェックボックスとスイッチは true または false になり、条件で非表示になったフィールドは含まれません。

サーバーイベントなしの場合

ビルダーは、HTMX エンジンのコンポーネントイベントのエンドポイント、または ActionURL に送信します。どちらもない場合でもデザインはでき、「保存」は DOM イベント sgc-form-builder-save をビルダー上で発行し、その detail に JSON を含めます。URL がある場合は、保存に成功した後にもこのイベントが続きます。

ASP.NET Core

Razor ビューでは、<sgc-form-builder> Tag Helper がビルダーをレンダリングし、その保存とプレビューのリクエストには UseSgcHtml の sgcHTML ミドルウェアが応答します。イベントは C# のハンドラーで、編集対象のフォームも同じ TsgcHTMLComponent_Form クラスです。

デモ

Demos\60.HTML\01.RunTime\34.FormBuilder は sgc Forms Studio で、ポート 8136 で動作するサーバーです。イベント登録、顧客アンケート、求人応募、IT サポート依頼の 4 つのフォームを備え、これらはテンプレートも兼ねています。各フォームには、リアルタイム検証付きの公開ページと、グリッド、グラフ、Excel エクスポート、JSON Schema を備えた回答ページがあります。デザイン時、Lazarus、.NET の各バージョンも同じ内容です。

さらに詳しく

オンラインで試すeSeGeCe デモサーバーでライブ動作する フォームビルダー デモをご覧ください。
オンラインヘルプこのコンポーネントの完全な API リファレンスと使い方ガイドです。
Form コンポーネントビルダーが設計するフォームです。フィールド、レイアウト、ルール、データセットバインディングを備えています。
すべての sgcHTML コンポーネント80 以上のコンポーネントの機能マトリックスをすべてご覧いただけます。
無料体験版のダウンロード30 日間の体験版には 60.HTML のデモプロジェクトが含まれます。
価格完全なソースコード付きの Single、Team、Site ライセンス。
最もお得な選択: All-AccesseSeGeCe の全製品にプレミアムサポートが付いて、年間 €1,059 からご利用いただけます。
All-Access の価格を見る

始める準備はできましたか?

無料体験版をダウンロードして、Delphi、C++ Builder、.NET で Web UI の構築を始めましょう。