# フォームブロック

## はじめに

フォームブロックは、データ入力や編集インターフェースを構築するための重要なブロックです。高いカスタマイズ性を持ち、データモデルに基づいて必要なフィールドを対応するコンポーネントで表示します。連動ルールなどのイベントフローを通じて、フォームブロックはフィールドを動的に表示できます。さらに、ワークフローと組み合わせることで、自動化されたプロセスのトリガーやデータ処理を実現し、作業効率をさらに向上させたり、ロジックを構築したりできます。

## フォームブロックの追加

- **編集フォーム**：既存のデータを変更するために使用します。
- **新規作成フォーム**：新しいデータエントリを作成するために使用します。

![20251023191139](https://static-docs.nocobase.com/20251023191139.png)

## ブロック設定項目

![20251023191448](https://static-docs.nocobase.com/20251023191448.png)

### ブロック連動ルール

連動ルールを通じて、ブロックの動作（表示の有無やJavaScriptの実行など）を制御します。

![20251023191703](https://static-docs.nocobase.com/20251023191703.png)

詳細については、[ブロック連動ルール](/interface-builder/blocks/block-settings/block-linkage-rule) を参照してください。

### フィールド連動ルール

連動ルールを通じて、フォームフィールドの動作を制御します。

![20251023191849](https://static-docs.nocobase.com/20251023191849.png)

詳細については、[フィールド連動ルール](/interface-builder/blocks/block-settings/field-linkage-rule) を参照してください。

### レイアウト

フォームブロックは2種類のレイアウト方式をサポートしており、`layout` 属性で設定できます。

- **horizontal**（水平レイアウト）：このレイアウトはラベルとコンテンツを1行に表示し、垂直方向のスペースを節約します。シンプルなフォームや情報が少ない場合に適しています。
- **vertical**（垂直レイアウト）（デフォルト）：ラベルがフィールドの上に配置されます。このレイアウトにより、フォームはより読みやすく、入力しやすくなります。特に、複数のフィールドや複雑な入力項目を含むフォームに適しています。

![20251023193638](https://static-docs.nocobase.com/20251023193638.png)

## フィールドの設定

### 本コレクションのフィールド

> **注意**：継承テーブル内のフィールド（つまり親テーブルのフィールド）は、現在のフィールドリストに自動的にマージされて表示されます。

![20240416230739](https://static-docs.nocobase.com/20240416230739.png)

### リレーションシップコレクションのフィールド

> リレーションシップコレクションのフィールドはフォーム内では読み取り専用であり、通常はリレーションシップフィールドと組み合わせて使用され、関連データの複数のフィールド値を表示できます。

![20260212161035](https://static-docs.nocobase.com/20260212161035.png)

- 現在、対一関係（belongsTo / hasOne など）のみをサポートしています。
- 通常、リレーションシップフィールド（関連レコードの選択に使用）と組み合わせて使用されます。リレーションシップフィールドコンポーネントが関連レコードの選択・変更を担当し、リレーションシップコレクションのフィールドがそのレコードの詳細情報（読み取り専用）の表示を担当します。

**例**：「担当者」を選択した後、フォーム内にその担当者の電話番号やメールアドレスなどの情報を表示します。

> 編集フォームでリレーションシップフィールド「担当者」が設定されていない場合でも、対応する関連情報を表示できます。リレーションシップフィールド「担当者」が設定されている場合、担当者を変更すると、対応する関連情報が対応するレコードに更新されます。

![20260212160748](https://static-docs.nocobase.com/20260212160748.gif)

### その他のフィールド

![20251023192559](https://static-docs.nocobase.com/20251023192559.png)

- JavaScriptを記述することで、カスタム表示コンテンツを実現し、複雑な内容を表示できます。

![20251023192935](https://static-docs.nocobase.com/20251023192935.png)

### フィールドテンプレート

フィールドテンプレートは、フォームブロック内でフィールドエリアの設定を再利用するために使用されます。詳細は [フィールドテンプレート](../../ui-templates.md) を参照してください。

![field-template-menu-20251228](https://static-docs.nocobase.com/field-template-menu-20251228.png)

## アクションの設定

![20251023193231](https://static-docs.nocobase.com/20251023193231.png)

- [送信](/interface-builder/actions/types/submit)
- [ワークフローのトリガー](/interface-builder/actions/types/trigger-workflow)
- [JSアクション](/interface-builder/actions/types/js-action)
- [AI従業員](/interface-builder/actions/types/ai-employee)