syncfusion-react-form-renderer

Syncfusion React Form Renderer

ユーザーが Syncfusion Form Renderer コンポーネントを使用して、スキーマ駆動型の React フォームを生成、トラブルシューティング、または拡張する必要がある場合に、このスキルを使用します。Form Renderer は、フィールド定義、レイアウト、検証、動的な動作、送信アクションを宣言する単一の JSON スキーマを中心に構築されています。

このスキルを使用する場面

ユーザーが次のことを行う必要がある場合に、このスキルを使用します。

• 新しい React アプリを作成し、Syncfusion Form Renderer パッケージをインストールする
• properties、layout、settings を使ってフォームを定義する
• 必須、パターン、最小長、最大長、またはカスタム検証ルールを追加する
• 以前の回答に基づいてフィールドを表示または非表示にする
• 依存するドロップダウンまたは連動するオプションリストを構築する
• minMaxRange を使用して、別のフィールドを基準に数値／日付の値を制限する
• expressionValue と外部参照を使用して値を計算する
• 送信、リセット、カスタムボタンのアクションを処理する
• allowMultiple と buttonsGroups を使って、グループ化されたボタンアクションを定義する
• 組み込みウィジェットをカスタム React テンプレートに置き換える

クイックスタート

1. React パッケージをインストールします。

npm install @syncfusion/ej2-react-form-renderer

2. React コンポーネントとスキーマ型をインポートします。

import { FormRendererComponent, type Schema } from '@syncfusion/ej2-react-form-renderer';

3. スキーマを定義し、React コンポーネントでレンダリングします。

import { FormRendererComponent, type Schema } from '@syncfusion/ej2-react-form-renderer';

export default function App() {
  const schema: Schema = {
    version: '0.1.0',
    properties: {
      emailAddress: {
        id: 'textbox_1',
        name: 'emailAddress',
        type: 'string',
        label: 'Email Address',
        textboxType: 'email',
        required: true,
        widget: 'textbox'
      },
      submit: {
        id: 'submit_1',
        name: 'defaultSubmit',
        type: 'button',
        label: 'Submit',
        buttonType: 'submit',
        widget: 'button'
      }
    },
    layout: [
      { type: 'field', propertyId: 'emailAddress' },
      { type: 'field', propertyId: 'submit' }
    ],
    settings: { name: 'Registration Form' }
  };

  const onSubmit = (args: any) => {
    console.log(args.data, args.isValid);
  };

  return <FormRendererComponent schema={schema} submit={onSubmit} />;
}

ドキュメントとナビゲーションガイド

はじめに

references/getting-started.md をお読みください。

• Vite + React プロジェクトのセットアップとパッケージのインストール
• CSS テーマのセットアップ
• 基本的な schema + submit の例
• npm run dev でアプリをローカル実行する方法

フォームスキーマとフィールドモデル

references/form-schema.md をお読みください。

• ルートオブジェクトの構造：version、properties、layout、settings
• サポートされるすべてのフィールドウィジェット、そのデータ型、および提供する UI 操作
• フィールドごとの表示オプションと、ユーザーの好みに合わせたウィジェットの選択
• パネル、テーブル、タブ、カードのレイアウト例と、コンテナの子要素がフィールドを参照する方法
• フィールド ID、名前、ラベル、型、および一般的なメタデータ

検証

references/validations.md をお読みください。

• required、minLength、maxLength、pattern などの組み込みルール
• customValidation と valid = ... を使ったカスタム検証
• 送信時と変更時の検証の実行タイミング

条件付き動作

references/conditions.md をお読みください。

• visibleWhen、hideWhen、requiredWhen、readOnlyWhen、disabledWhen
• ルールスキーマ、ネストされた and / or グループ、すべての演算子の一覧、および各ルールの効果
• サポートまたは無視される条件タイプを示す、コンポーネントごとの対応表
• setValueWhen と choiceBasedField の設定概念

動的な式

references/expressions.md をお読みください。

• 他のフィールドから派生した値を求める expressionValue
• フィールド参照、配列インデックス、グループ化、三項構文、算術／比較／論理演算子
• PI、TRUE、FALSE、NULL、Math などの定数
• 構文と戻り値の型を含む、集計、数学、文字列、日付の各関数と DATEFORMAT

依存ドロップダウン

references/dependent-dropdown.md をお読みください。

• choiceBasedField を使った連動オプション
• primaryFieldId と choiceMapping
• マッピングされていない値に対する showAllWhenNotMapped の動作

他のフィールドに基づく範囲ロジック

references/min-max-range.md をお読みください。

• field 参照オブジェクトを使った minMaxRange
• 他のフィールドを基準にした数値と日付の範囲制約
• 固定の min / max ルールとフィールド間の範囲ルールの使い分け

リモートデータバインディング

references/remote-data-binding-in-components.md をお読みください。

• ドロップダウン、マルチセレクト、チェックボックスグループの各フィールドに対するリモートオプションソース
• URL アダプター、レスポンスの dataPath、リクエストヘッダー、動的な検索／フィルター値
• 検索、並べ替え、フィルター、スキップ、取得件数のクエリ設定

データグリッドの機能

references/data-grid-features.mdを参照してください。

• 静的およびリモートのグリッドデータソース
• 列の編集、検証、カスタム検証、式
• 他のフォームフィールドに応じて決まる条件付きデータソース
• グリッドの検索、並べ替え、フィルター、ページングの設定

フォームアクションとテンプレート

references/form-actions.mdおよびreferences/templates.mdを参照してください。

• buttonType: 'submit'、'reset'、'button'、およびグループ化されたボタンアクション
• submit / buttonClickの動作とカスタムロジック
• submit、change、buttonClick、failure、createdの各イベント（引数とライフサイクルの動作を含む）
• allowMultipleとbuttonsGroupsの項目ラベル、アクション、スタイル、アイコン、無効状態
• ウィジェットタイプ、フィールド名、テンプレートIDごとにReactのcustomWidgetSettingsを使用するカスタムウィジェットテンプレート
• すべてのCustomWidgetSettingModelプロパティとHTMLサニタイザーの動作
• フォーカス可能なコントロール、バインドされた値、setFieldValueによる同期を備えたネイティブテンプレートまたはカスタムコンポーネントテンプレート
• レンダリング時にオートフォーカスを強制せず、現在の入力フォーカスを維持する方法
• カスタムフィールドテンプレートからForm Rendererの状態を更新する方法

一般的なパターン

• nameの値は、ペイロードのキーや式内の参照として使用されるため、安定した値にしてください。
• layoutオブジェクトを使って、フィールドをパネル、テーブル、タブ、カードに整理してください。
• コントロールが別のフィールドに依存する場合、連動するドロップダウンリストにはchoiceBasedFieldを、動的な最小値／最大値の制限にはminMaxRangeを優先してください。
• スキーマを理解しやすい状態に保つため、検証ロジックと条件付きロジックは、それらが適用されるフィールドの近くに記述してください。
• 最終検証にはbuttonType: 'submit'を優先し、カスタムアクションロジックが必要な場合はbuttonType: 'button'を使用してください。

実装チェックリスト

Form Rendererのスキーマを作成または修正する際は、次の点を確認してください。

• すべてのフィールドに一意のnameとidが設定されている
• layoutが有効なpropertyId値を参照している
• サポートされているウィジェットがフィールドタイプと一致している
• 条件付きフィールドが有効なfield参照と演算子を使用している
• 動的な式が{name}構文を使って既存のフィールド名を参照している
• カスタム検証でvalid = trueまたはエラーメッセージ文字列を割り当てている
• フォームの送信が必要な場合に送信ボタンが含まれている

このスキルは、このリポジトリ内のドキュメントをもとに、未対応のスキーマプロパティを捏造することなく、動作するReact Form Rendererフォームを生成できるよう支援することを目的としています。