現在表示中:

フォームの基本的な構造は次のとおりです。

  • フォーム開始
  • フォームエレメント
  • フォーム終了

これらはすべて、標準の CQ インストールで利用できるデフォルトの一連のフォームコンポーネントを使用して実現されます。

フォームで使用する新しいコンポーネントを開発するほかに、次のこともできます。

必要に応じて、スクリプトを使用して、機能を拡張できます。

フォーム値のプリロード

フォーム開始コンポーネントには、読み込み元パス(リポジトリ内のノードを指すオプションのパス)を指定するフィールドがあります。

読み込み元パスとは、定義済みの値をフォーム上の複数のフィールドに読み込むために使用するノードプロパティのパスです。

これは、リポジトリ内のノードへのパスを指定するオプションのフィールドです。 このノードに、フィールド名と一致するプロパティがある場合、フォーム上の適切なフィールドがそのプロパティの値が設定された状態でプリロードされます。 一致が存在しない場合、フィールドにはデフォルト値が使用されます。

注意:

フォームアクションで初期値の読み込み元となるリソースを設定することもできます。 設定するには、init.jsp 内で FormsHelper#setFormLoadResource を使用します。

設定されていない場合にのみ、作成者がフォーム開始コンポーネントに設定したパスからフォームに値が読み込まれます。

フォームフィールドへの複数値のプリロード

様々なフォームフィールドには、項目読み込みパス(リポジトリ内のノードを指すオプションのパス)もあります。

項目読み込みパスとは、定義済みの値をフォーム上の特定のフィールド(ドロップダウンリストチェックボックスグループラジオグループなど)に読み込むために使用するノードプロパティのパスです。

例 - ドロップダウンリストへの複数値のプリロード

ドロップダウンリストは、選択肢の値を提供するように設定できます。

項目読み込みパス」を使用すると、リポジトリ内のフォルダーからリストにアクセスし、リストの値をフィールドにプリロードできます。

  1. 新しい sling フォルダー(sling:Folder)を作成します。
    例:/etc/designs/<myDesign>/formlistvalues
  2. ドロップダウンアイテムのリストを格納する複数値文字列(String[])型の新しいプロパティ(myList など)を追加します。コンテンツはスクリプト(JSP スクリプトやシェルスクリプトの curl など)を使用してインポートすることもできます。
  3. 項目読み込みパス」フィールドにフルパスを指定します。
    例:/etc/designs/geometrixx/formlistvalues/myList

String[] 内の値が次のような形式の場合

  • AL=Alabama
  • AK=Alaska
  • etc.

次のリストが生成されます。

  • <option value="AL">Alabama</option>
  • <option value="AK">Alaska</option>

この機能は、多言語設定などに適しています。

独自のフォームアクションの作成

フォームには、アクションが必要です。 アクションでは、ユーザーデータが入力されたフォームが送信されたときに実行する操作を定義します。

標準の CQ インストールに用意されている一連のアクションは、

    /libs/foundation/components/form/actions

およびフォームコンポーネントの「アクションタイプ」リストで確認できます。

この節では、このリストに含める独自のフォームアクションを作成する方法について説明します。

/apps に独自のアクションを追加するには、次の手順を実行します。

  1. sling:Folder 型のノードを作成します。実装するアクションを反映した名前を付けることをお勧めします。

    次に例を示します。

        /apps/myProject/components/customFormAction

  2. このノードで、次のプロパティを定義し、「すべて保存」をクリックして、変更を保存します。

    • sling:resourceType - foundation/components/form/action を設定します
    • componentGroup - .hidden として定義します
    • 省略可能:
      • jcr:title - 任意のタイトルを指定します。このタイトルは、ドロップダウン選択リストに表示されます。設定しない場合は、ノード名が表示されます
      • jcr:description - 任意の説明を入力します
  3. フォルダーにダイアログノードを作成します。

    1. アクションを選択したら、作成者がフォームダイアログを編集できるようにフィールドを追加します。
  4. フォルダーに次のどちらかを作成します。

    1. ポストスクリプト。
      スクリプトの名前は post.POST.<extension> にします(例:post.POST.jsp
      ポストスクリプトは、フォームが処理のために送信されたときに呼び出されます。フォームの POST から受け取ったデータを処理するコードを含めます。
    2. フォームが送信されたときに呼び出される転送スクリプトを追加します。
      スクリプトの名前は forward.<extension> にします(例:forward.jsp
      このスクリプトでは、パスを定義できます。 現在の要求が、指定されたパスに転送されます。

    必要な呼び出しは、FormsHelper#setForwardPath(2 つのバリアント)です。 通常は、何らかの検証(ロジック)を実行して、ターゲットパスを見つけ、そのパスに転送し、デフォルトの Sling POST サーブレットで JCR への実際の保存を実行できるようにします。

    また、フォームアクションと forward.jsp が「グルー」コードとしてのみ動作するような場合には、別のサーブレットで実際の処理を実行することもできます。 その例として、/libs/foundation/components/form/actions/mail にあるメールアクションでは、メールサーブレットが配置されている <currentpath>.mail.html に詳細を転送します。

    まとめると、次のようになります。

    • post.POST.jsp は、アクション自体によって完全に実行される小さな操作に便利です。
    • forward.jsp は、委任のみが必要な場合に便利です。

    スクリプトは次の順序で実行されます。

    • フォームのレンダリング時(GET):
      1. init.jsp
      2. すべてのフィールドの制約に対して: clientvalidation.jsp
      3. フォームの validationRT: clientvalidation.jsp
      4. 設定されている場合は、読み込みリソースを介してフォームが読み込まれます
      5. addfields.jsp<form></form> の内部レンダリング時)
    • フォームの処理時(POST):
      1. init.jsp
      2. すべてのフィールドの制約に対して: servervalidation.jsp
      3. フォームの validationRT: servervalidation.jsp
      4. forward.jsp
      5. 転送パスが設定されていた場合(FormsHelper.setForwardPath)、要求を転送し、その後、cleanup.jsp を呼び出します
      6. 転送パスが設定されていなかった場合、post.POST.jsp を呼び出します(ここで終了し、cleanup.jsp は呼び出されません)
  5. 必要に応じて、再びフォルダーに以下を追加します。

    1. フィールドを追加するためのスクリプト。
      スクリプトの名前は addfields.<extension> にします(例:addfields.jsp
      addfields スクリプトは、フォーム開始の HTML が書き込まれた直後に呼び出されます。 これにより、カスタム入力フィールドなどの HTML をフォーム内に追加するアクションを実行できます。
    2. 初期化スクリプト。
      スクリプトの名前は init.<extension> にします(例:init.jsp
      このスクリプトは、フォームのレンダリング時に呼び出されます。 このスクリプトを使用して、アクションの詳細を初期化できます。
    3. クリーンアップスクリプト。
      スクリプトの名前は cleanup.<extension> にします(例:cleanup.jsp
      このスクリプトを使用して、クリーンアップを実行できます。
  6. parsys でこのフォームコンポーネントを使用します。 これで「アクションタイプ」ドロップダウンに新しいアクションが含まれるようになります。

    注意:

    製品に用意されているデフォルトのアクションは、以下で確認できます。

        /libs/foundation/components/form/actions

独自のフォーム制約の作成

制約は、次の 2 つのレベルで課すことができます。

個々のフィールドの制約

/apps に)個々のフィールドの独自の制約を追加するには、次の手順を実行します。

  1. sling:Folder 型のノードを作成します。実装する制約を反映した名前を付けることをお勧めします。

    次に例を示します。

        /apps/myProject/components/customFormConstraint

  2. このノードで、次のプロパティを定義し、「すべて保存」をクリックして、変更を保存します。

    • sling:resourceType - foundation/components/form/constraint に設定します
    • constraintMessage - フォームの送信時に、制約に照らしてフィールドが無効な場合に表示されるカスタマイズされたメッセージ
    • 省略可能:
      • jcr:title - 任意のタイトルを指定します。このタイトルは、選択リストに表示されます。設定しない場合は、ノード名が表示されます
      • hint - ユーザーに向けたフィールドの使用方法に関する追加情報
  3. このフォルダー内には、少なくとも次のどちらかのスクリプトが必要です。

    • クライアント検証スクリプト:
      スクリプトの名前は clientvalidation.<extension> にします(例:clientvalidation.jsp
      このスクリプトは、フォームフィールドのレンダリング時に呼び出されます。 このスクリプトを使用すると、クライアントでフィールドを検証するクライアント JavaScript を作成できます。
    • サーバー検証スクリプト:
      スクリプトの名前は servervalidation.<extension> にします(例:servervalidation.jsp
      このスクリプトは、フォームの送信時に呼び出されます。 このスクリプトを使用すると、フォームの送信後にサーバーでフィールドを検証できます。

注意:

サンプルの制約は、以下で確認できます。

    /libs/foundation/components/form/constraints

フォームグローバル制約

フォームグローバル検証は、開始フォームコンポーネントでリソースタイプを設定することで指定します(validationRT)。 次に例を示します。

    apps/myProject/components/form/validation

その後、以下を定義できます。

  • clientvalidation.jsp - フィールドのクライアント検証スクリプトの後に挿入されます
  • servervalidation.jsp - POST 時の個々のフィールドのサーバー検証後に呼び出されます。

フォームコンポーネントの表示と非表示

フォーム内の他のフィールドの値に応じてフォームコンポーネントの表示と非表示が切り替わるようにフォームを設定できます。

フォームフィールドの表示と非表示の切り替えは、フィールドが特定の条件下でのみ必要な場合に便利です。 例えば、フィードバックフォームで、製品情報を電子メールで受け取りたいかどうかを顧客に質問するとします。 「はい」を選択すると、電子メールアドレスを入力できるテキストフィールドが表示されます。

フォームコンポーネントを表示または非表示にする条件を指定するには、表示 / 非表示のルールを編集ダイアログボックスを使用します。

ダイアログボックスの上部にあるフィールドを使用して、次の情報を指定します。

  • 指定した条件を満たした場合に、コンポーネントを非表示にするのか、表示するのか。
  • コンポーネントの表示と非表示の切り替えは、すべての条件を満たした場合に行うのか、いずれか 1 つでも満たした場合に行うのか。

これらのフィールドの下に 1 つ以上の条件が表示されます。 条件では、(同じフォーム上の)別のフォームコンポーネントの値をある値と比較します。 フィールドの実際の値が条件を満たした場合に、条件が真と評価されます。  条件には以下の情報が含まれます。

  • 検証するフォームフィールドのタイトル。
  • 演算子。
  • フィールド値に対して比較する値。

例えば、「Receive email notifications?」というタイトルのラジオグループコンポーネントには、 Yes」と「No」のラジオボタンが含まれています。 「Email Address」というタイトルのテキストフィールドコンポーネントは、次の条件を使用しているので、「Yes」が選択された場合に表示されます。

JavaScript の場合、条件にはエレメント名プロパティの値を使用して、フィールドを参照します。 前の例では、ラジオグループコンポーネントのエレメント名プロパティは contact です。 次のコードは、前の例と同等の JavaScript コードです。

((contact == "Yes"))

フォームコンポーネントを表示または非表示にするには:

  1. 特定のフォームコンポーネントを編集します。

  2. 表示 / 非表示」を選択して、表示 / 非表示のルールを編集ダイアログを開きます。

    • 最初のドロップダウンリストで、「表示」または「非表示」を選択して、条件に応じてコンポーネントを表示するか、非表示にするかを指定します。
    • 一番上の行の末尾にあるドロップダウンリストで、次のどちらかを選択します。
      • すべて - すべての条件を満たした場合に、コンポーネントが表示または非表示になります
      • いずれか - 1 つでも条件を満たした場合に、コンポーネントが表示または非表示になります
    • 条件行で(デフォルトとして 1 つだけ表示されます)、コンポーネントと演算子を選択し、値を指定します。
    • 必要に応じて、「条件を追加」をクリックして、条件を追加します。

    次に例を示します。

  3. OK」をクリックして、定義を保存します。

  4. 定義を保存すると、フォームコンポーネントプロパティの「表示 / 非表示」オプションの横に「ルールを編集」リンクが表示されます。 そのリンクをクリックすると、表示 / 非表示のルールを編集ダイアログボックスが開いて、変更できます。

    OK」をクリックして、すべての変更を保存します。

    警告:

    表示/非表示の定義の効果は、以下で確認およびテストできます。

    • 作成環境のプレビューモード(最初にプレビューに切り替えるときに、ページをリロードする必要があります)
    • 発行環境

壊れたコンポーネント参照の処理

表示/非表示の条件では、エレメント名プロパティの値を使用して、フォーム内の他のコンポーネントを参照します。  いずれかの条件で、削除されたコンポーネントまたはエレメント名プロパティが変更されたコンポーネントを参照している場合、表示/非表示の設定は無効になります。 その場合は、手動で条件を更新する必要があります。更新しないと、フォームの読み込み時にエラーが発生します。

表示/非表示の設定が無効な場合、その設定は JavaScript コードとしてのみ提供されます。 コードを編集して、問題を修正します。そのコードでは、コンポーネントを参照するために元々使用していたエレメント名プロパティを使用しています。

フォームで使用するスクリプトの作成

スクリプトを記述する際に使用できる API エレメントについて詳しくは、フォームに関連する javadoc を参照してください。

これは、フォームが送信される前にサービスを呼び出し、呼び出しに失敗した場合にサービスをキャンセルするなどのアクションに使用できます。

  • 検証リソースタイプを定義します
  • 検証用のスクリプトを含めます
    • JSP で、Web サービスを呼び出し、エラーメッセージを含む com.day.cq.wcm.foundation.forms.ValidationInfo オブジェクトを作成します。エラーが発生した場合は、フォームデータが送信されません。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー