フォームの作成（クラシック UI）

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

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

これらはすべて、標準のAEMインストールで利用可能な一連のデフォルトのフォームコンポーネントで実現されます。

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

• フォームに値をプリロードする
• （特定の）フィールドに複数値をプリロードする
• 新しいアクションを作成する
• 新しい制約を作成する
• 特定のフォームフィールドを表示または非表示にする

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

フォーム値のプリロード

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

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

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

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

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

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

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

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

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

1. 新しいSlingフォルダー(sling:Folder)を作成します

   例：/etc/designs/<myDesign>/formlistvalues

2. 複数値の文字列追加(String[])型の新しいプロパティ（例：myList）。ドロップダウン項目のリストが含まれます。 コンテンツはスクリプト（JSP スクリプトやシェルスクリプトの curl など）を使用してインポートすることもできます。

3. 「項目読み込みパス」フィールドにはフルパスを指定します。

   例：/etc/designs/geometrixx/formlistvalues/myList

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

• AL=Alabama
• AK=Alaska
• 等。

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

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

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

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

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

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

/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. form's validationRT:clientvalidation.jsp
     4. 設定されている場合は、読み込みリソースを介してフォームが読み込まれます
     5. addfields.jsp レンダリング内で <form></form>

   • フォームPOSTを処理する際：

     1. init.jsp
     2. すべてのフィールドの制約の場合：servervalidation.jsp
     3. form's 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

     これは、フォームが送信されると呼び出されます。 このスクリプトを使用すると、フォームの送信後にサーバーでフィールドを検証できます。

フォームグローバル制約

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

apps/myProject/components/form/validation

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

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

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

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

フォームフィールドの表示の変更は、フィールドが特定の条件のみで必要となる場合に便利です。例えば、フィードバックフォームで、顧客に電子メールで製品情報を送信してよいかを尋ねて、顧客が「はい」を選択すると、顧客が電子メールアドレスを入力できるテキストフィールドが表示されるような場合です。

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

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

• コンポーネントの表示または非表示に関する条件を指定するかどうか
• コンポーネントを表示または非表示にするのは、条件のいずれかが満たされた場合か、すべてが満たされた場合か

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

• 評価するフォームフィールドのタイトル。
• 演算子
• フィールドの値と比較する値

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

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

((contact == "Yes"))

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

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

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

   • 最初のドロップダウンリストで、「表示」または「非表示」を選択して、条件に応じてコンポーネントを表示するか、非表示にするかを指定します。

   • 一番上の行の末尾にあるドロップダウンリストで、次のどちらかを選択します。

     • すべて - すべての条件を満たした場合に、コンポーネントが表示または非表示になります。
     • いずれか - 1 つでも条件を満たした場合に、コンポーネントが表示または非表示になります。

   • 条件行で（デフォルトとして 1 つだけ表示されます）、コンポーネントと演算子を選択し、値を指定します。

   • 必要に応じて、「条件を追加」をクリックして、条件を追加します。

   次に例を示します。

   

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

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

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

   

   注意

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

   • 作成環境の​プレビュー​モード（最初にプレビューに切り替えるときに、ページをリロードする必要があります）
   • パブリッシュ環境

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

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

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

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

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

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

• 検証リソースタイプを定義します。

• 検証用のスクリプトを含めます。

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