Conditional Fields

フィールド間の依存関係を管理し、コントロールフィールドの値に基づいて依存フィールドの表示、必須、その他の状態を制御できます。

conditional_fields
65,162 sites
172
drupal.org

概要

Conditional Fieldsは、Field APIをサポートするあらゆるエンティティタイプ(Node、User、Taxonomy Term、Media、Paragraphsなど)でフィールド間の依存関係を定義できる強力なモジュールです。フィールドを「依存」として設定すると、「コントロール」(dependee)フィールドの状態が指定された条件に一致する場合にのみ、編集可能になったり表示されたりします。

このモジュールはDrupalのStates APIを活用し、エンティティ編集時にクライアントサイドで依存フィールドを動的に変更します。例えば、「ティーザーあり」チェックボックスがオンの場合にのみ表示されるカスタム「記事ティーザー」フィールドを作成できます。AND、OR、XORロジックを組み合わせた複数の条件を含む複雑な依存関係設定をサポートしています。

Conditional Fieldsは、さまざまなフィールドウィジェットタイプを処理するための柔軟なプラグインシステムを提供し、テキストフィールド、セレクトリスト、チェックボックス、ラジオボタン、日付フィールド、エンティティ参照など、各種フィールドタイプで正確な状態評価を可能にします。また、フィールドの表示/非表示が変わる際のフェードやスライドアニメーションなどの視覚効果もサポートしています。

Features

  • コントロールフィールドの値や状態(入力済み/空、チェック済み/未チェック、タッチ済み/未タッチ、フォーカス中/未フォーカス)に基づくフィールド依存関係の定義
  • 複数のターゲット状態をサポート:表示/非表示、有効/無効、必須/任意、展開/折りたたみ、チェック済み/未チェック、入力済み/空
  • DrupalのStates APIを使用したクライアントサイドの動的フィールド動作
  • 複数の値マッチングモード:ウィジェット値の完全一致、正規表現、AND(すべての値)、OR(いずれかの値)、XOR(いずれか1つの値のみ)、NOT(いずれの値でもない)
  • 表示/非表示変更時の視覚効果:即時表示/非表示、フェードイン/アウト、スライドアップ/ダウン(速度設定可能)
  • 主要なエンティティタイプをサポート:Node、Media、Block Content、Comment、User、Taxonomy Term、Paragraphs
  • Inline Entity Form、Paragraphs、Field Groupなどのcontribモジュールとの統合
  • コンテナフィールド内の子フィールドへ条件を伝播させる継承システム
  • 単一フィールドに複数の依存関係がある場合の依存関係グルーピング設定(AND、OR、XOR)
  • 高度なユースケース向けのカスタムjQueryセレクターサポート
  • 依存関係が発動しない場合に依存フィールドをデフォルト値にリセット
  • カスタムフィールドタイプへのフィールドハンドラーサポートを拡張するプラグインシステム
  • エンティティタイプ設定ページにタブ形式で表示される便利な管理インターフェース

Use Cases

コンテンツタイプ選択に基づく追加フィールドの表示

「記事」「イベント」「製品」などのオプションを持つ「コンテンツタイプ」セレクトフィールドを作成します。Conditional Fieldsを設定して、「イベント」が選択された場合にのみイベント固有のフィールド(日付、場所、登録リンク)を表示し、「製品」が選択された場合にのみ製品固有のフィールド(価格、SKU、在庫)を表示します。

公開状態に基づく必須フィールド

コンテンツが公開される場合にのみ特定のフィールドを必須にします。例えば、「フロントページにプロモート」チェックボックスがオンの場合にのみ「アイキャッチ画像」フィールドを必須にし、公開されるコンテンツには常に適切な画像があることを保証します。

複雑なフォームでの段階的な情報開示

条件付きフィールドを使用してウィザード形式のフォームを作成します。まず基本フィールドを表示し、ユーザーの選択に基づいて追加フィールドを表示します。例えば、ユーザーが有料会員オプションを選択した後にのみ支払いフィールドを表示します。

継承を使用した条件付きフィールドグループ

複数の関連フィールドを含むフィールドグループを、単一のコントロールフィールドに基づいて表示/非表示するように設定します。継承機能を使用して、単一の依存関係設定でグループ内のすべてのフィールドに表示条件を伝播させます。

条件付き必須を使用したマルチステップバリデーション

他の選択に基づいてフィールドを条件付きで必須にします。例えば、「連絡方法」が「メール」に設定されている場合はメールフィールドを必須にし、「電話」に設定されている場合は電話番号フィールドを必須にします。

エンティティ参照フィールドでの該当しないオプションの非表示

条件付きフィールドを使用して、エンティティ参照の選択に基づいてフォームのセクション全体を表示/非表示します。例えば、Taxonomy参照で特定のカテゴリを選択すると、そのカテゴリに関連するフィールドのみを表示します。

Paragraphベースの条件付きコンテンツ

Paragraphタイプ内で、Paragraphの設定に基づいて異なるオプションを表示する条件付きフィールドを作成します。例えば、「メディア」Paragraphタイプで、「動画」が選択された場合は動画URLフィールドを表示し、「画像」が選択された場合は画像アップロードフィールドを表示します。

Tips

  • 可能な場合は「ウィジェットから値を入力」オプションを使用してください。実際のフィールドウィジェットを入力に使用することで、最も正確な値マッチングが提供されます。
  • 同じフィールドに複数の依存関係を設定する場合は、グルーピング(AND/OR/XOR)を慎重に検討して、目的のロジックを実現してください。
  • 複雑なフォームでは、すべてのシナリオが期待通りに動作することを確認するために、さまざまな値の組み合わせで依存関係を徹底的にテストしてください。
  • 依存関係が期待通りに動作しない場合は、ブラウザの開発者ツールを使用して生成された#states配列を検査してください。
  • 条件付きフィールドはフォーム表示にのみ影響することを覚えておいてください。サーバーサイドのバリデーションとフィールドストレージは別途処理されます。
  • Paragraphタイプの場合は、常に親エンティティタイプからではなく、Paragraphタイプの編集フォームで依存関係を設定してください。
  • フィールドグループには継承機能を使用して、設定する必要がある個別の依存関係の数を減らしてください。
  • 正規表現を使用する場合は、構文がわずかに異なる可能性があるため、PHPとJavaScriptの両方の環境でテストしてください。
  • 依存関係がトリガーされなくなったときにクリアする必要があるフィールドには、「デフォルト値にリセット」オプションの使用を検討してください。
  • モジュールはDrupalのパーミッションシステムを尊重します。ユーザーがConditional Fieldsを表示および管理するための適切なパーミッションを持っていることを確認してください。

Technical Details

Admin Pages 10
Conditional Fields /admin/structure/conditional_fields

Conditional Fieldsをサポートするすべてのエンティティタイプを一覧表示するメイン管理ページです。エンティティタイプをクリックして、そのバンドルを表示しフィールド依存関係を設定します。

バンドル一覧 /admin/structure/conditional_fields/{entity_type}

選択したエンティティタイプのすべてのバンドル(コンテンツタイプ、メディアタイプなど)を一覧表示します。バンドルをクリックしてフィールド依存関係を設定します。

依存関係の管理 /admin/structure/conditional_fields/{entity_type}/{bundle}

特定のエンティティバンドルの条件付きフィールド依存関係を設定します。既存の依存関係を表示し、新しい依存関係を追加します。各依存関係は、指定された条件に基づいてコントロールフィールド(dependee)に反応するターゲットフィールド(dependent)を定義します。

依存関係の編集 /admin/structure/conditional_fields/{entity_type}/{bundle}/{field_name}/{uuid}/edit

特定のフィールド依存関係の詳細設定フォームです。正確な条件値、視覚効果、詳細オプションを設定します。

依存関係の管理(コンテンツタイプタブ) /admin/structure/types/manage/{node_type}/conditionals

このコンテンツタイプの条件付きフィールド依存関係を管理するためのNodeタイプ編集ページのタブ。

依存関係の管理(メディアタイプタブ) /admin/structure/media/manage/{media_type}/conditionals

このメディアタイプの条件付きフィールド依存関係を管理するためのメディアタイプ編集ページのタブ。

依存関係の管理(ブロックタイプタブ) /admin/structure/block/manage/block-content/{block_content_type}/conditionals

このブロックタイプの条件付きフィールド依存関係を管理するためのカスタムブロックタイプ編集ページのタブ。

依存関係の管理(コメントタイプタブ) /admin/structure/comment/manage/{comment_type}/conditionals

このコメントタイプの条件付きフィールド依存関係を管理するためのコメントタイプ編集ページのタブ。

依存関係の管理(ユーザータブ) /admin/config/people/accounts/conditionals

ユーザープロフィールの条件付きフィールド依存関係を管理するためのユーザーアカウント設定ページのタブ。

依存関係の管理(Paragraphタイプタブ) /admin/structure/paragraphs_type/{paragraphs_type}/conditionals

このParagraphタイプの条件付きフィールド依存関係を管理するためのParagraphタイプ編集ページのタブ。Paragraphsモジュールが必要です。

権限 3
Conditional Fieldsの表示

ユーザーがConditional Fieldsの設定ページを表示し、既存の依存関係を確認できるようにします。

Conditional Fieldsの編集

ユーザーが条件付きフィールドの依存関係を作成および変更できるようにします。

Conditional Fieldsの削除

ユーザーが条件付きフィールドの依存関係を削除できるようにします。

Hooks 8
hook_conditional_fields

条件付きフィールド設定で利用可能なフィールドのリストを構築します。モジュールが標準のField APIフィールドではない疑似フィールド(Field Groupなど)を登録できるようにします。

hook_conditional_fields_alter

条件付きフィールド設定で利用可能なフィールドのリストを変更します。フィールドリストの変更、ソート、フィルタリングに使用します。

hook_conditional_fields_children

指定された親フィールド内に含まれるフィールドのリストを返します。コンテナフィールドを提供するモジュール(Field Group、Paragraphsなど)が条件設定の継承を有効にするために使用します。

hook_conditional_fields_children_alter

親フィールド内に含まれるフィールドのリストを変更します。継承目的で子フィールドリストを変更できます。

hook_conditionalFieldsStates_alter

依存フィールドに適用できる利用可能な状態のリストを変更します。

hook_conditionalFieldsConditions_alter

依存関係を評価するための利用可能な条件のリストを変更します。

hook_conditionalFieldsEffects_alter

状態変更時の利用可能な視覚効果のリストを変更します。

hook_conditional_fields_priority_field_alter

依存関係処理で優先されるフィールドタイプのリストを変更します。特別な処理が必要なdatelistのようなフィールドに使用されます。

Troubleshooting 6
AJAX読み込みフォームで条件付きフィールドが動作しない

AJAX呼び出し後にフォームが適切に再構築されていることを確認してください。conditional_fieldsライブラリがフォームにアタッチされている必要があります。Drupalのビヘイビアが AJAXコンテンツで適切にトリガーされているか確認してください。カスタムAJAXを使用している場合は、drupalSettings.conditionalFieldsが更新されていることを確認してください。

非表示フィールドでの必須フィールドバリデーションエラー

モジュールは非表示フィールドから必須バリデーションを自動的に削除します。それでもエラーが表示される場合は、フィールドが表示状態で適切に設定されているか確認してください。また、フォームの#after_build順序を確認して、フォームバリデーション前に依存関係が評価されていることを確認してください。

ネストされたParagraphフィールドに状態が適用されない

依存関係が親エンティティではなく、Paragraphタイプ自体で設定されていることを確認してください。Paragraphsの場合は、特定のParagraphタイプの「依存関係の管理」タブに移動してください。また、Paragraphウィジェットのフォームモードが依存関係が設定されている場所と一致していることを確認してください。

カスタムjQueryセレクターが動作しない

セレクター構文が有効なjQueryであることを確認してください。まずブラウザコンソールでセレクターをテストしてください。翻訳可能なフィールドには%langプレースホルダーを、複数値フィールドコンポーネントには%keyを使用することを忘れないでください。セレクターはラッパーではなく、実際のフォーム入力をターゲットにする必要があります。

視覚効果(フェード/スライド)がアニメーションしない

conditional_fields/conditional_fieldsライブラリが読み込まれているか確認してください。コンソールにJavaScriptエラーがないか確認してください。効果はvisible/!visible状態でのみ動作します。効果の速度がミリ秒単位の有効な数値であることを確認してください。

依存関係が一方向では動作するが逆方向では動作しない

条件設定を確認してください。「チェック時に表示」のような状態の場合、逆の「未チェック時に非表示」は自動的に動作するはずです。値条件を使用している場合は、ロジックですべての可能な値が考慮されていることを確認してください。