Forms の開発(クラシック UI) developing-forms-classic-ui

CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

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

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

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

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

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

NOTE
このドキュメントでは、 基盤コンポーネント (クラシック UI)を参照してください。 Adobeは、 コアコンポーネント および 条件を非表示 タッチ操作対応 UI でのフォーム開発用。

フォーム値のプリロード preloading-form-values

フォーム開始コンポーネントは、 読み込みパス:リポジトリ内のノードを指すオプションのパス。

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

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

NOTE
A フォームアクション また、初期値の読み込み元となるリソースを設定することもできます。 これには、init.jsp 内で FormsHelper#setFormLoadResource を使用します。
設定されていない場合にのみ、作成者がフォームコンポーネントで設定したパスからフォームに入力します。

複数の値を持つフォームフィールドのプリロード preloading-form-fields-with-multiple-values

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

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

例 — 複数の値を含むドロップダウンリストのプリロード example-preloading-a-dropdown-list-with-multiple-values

ドロップダウンリストは、選択する値の範囲で設定できます。

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

  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>

この機能は、例えば、多言語設定で適切に使用できます。

独自のフォームアクションの作成 developing-your-own-form-actions

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

標準のAEMインストールでは、様々なアクションが提供されます。これらは次の場所に表示されます。

/libs/foundation/components/form/actions

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

chlimage_1-226

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

/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 スクリプトが呼び出されます。このスクリプトには、フォームから到着したデータを処理するコードが含まれています 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. <form></form>の内部レンダリング時にaddfields.jsp
    • フォームの処理時(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. 以下を使用: Forms parsys 内のコンポーネント。 この アクションタイプ ドロップダウンに新しいアクションが含まれます。

    note note
    NOTE
    製品に含まれるデフォルトのアクションを表示するには:
    /libs/foundation/components/form/actions

独自のフォーム制約の作成 developing-your-own-form-constraints

制約は次の 2 つのレベルで適用できます。

個々のフィールドの制約 constraints-for-individual-fields

/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

      これは、フォームが送信されると呼び出されます。 この変数は、送信後にサーバー上のフィールドを検証するために使用できます。

NOTE
サンプル制約は、次の場所に表示されます。
/libs/foundation/components/form/constraints

フォームグローバル制約 form-global-constraints

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

apps/myProject/components/form/validation

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

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

フォームコンポーネントの表示と非表示 showing-and-hiding-form-components

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

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

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

showhider

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

  • コンポーネントを非表示にするか表示するかの条件を指定するかどうか。
  • コンポーネントを表示または非表示にするために、条件のいずれかまたはすべてが true である必要があるかどうか。

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

  • テストするフォームフィールドのタイトル。
  • 演算子。
  • フィールド値に対する値が比較されます。

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

showhidecondition

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

((contact == "Yes"))

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

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

  2. 選択 表示/非表示 開く 表示/非表示のルールを編集 ダイアログ:

    • 最初のドロップダウンリストで、次のいずれかを選択します。 表示 または を隠す を使用して、コンポーネントの表示と非表示を条件で指定します。

    • 上部行の末尾にあるドロップダウンリストで、以下を選択します。

      • すべて — コンポーネントを表示または非表示にするすべての条件が true である必要がある場合
      • 任意 - 1 つ以上の条件のみが true に設定されている場合に、コンポーネントを表示または非表示にします
    • 条件行(デフォルトで表示されます)で、コンポーネント、演算子を選択し、値を指定します。

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

    次に例を示します。

    chlimage_1-227

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

  4. 定義を保存した後、 ルールを編集 リンクが 表示/非表示 オプションを使用して、フォームコンポーネントのプロパティに追加します。 このリンクをクリックして、 表示/非表示のルールを編集 変更を加えるダイアログボックス

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

    chlimage_1-228

    note caution
    CAUTION
    表示/非表示の定義の効果は、以下で確認およびテストできます。
    • オーサー環境の​ プレビュー ​モード(最初にプレビューに切り替えるときに、ページをリロードする必要があります)
    • パブリッシュ環境で

壊れたコンポーネント参照の処理 handling-broken-component-references

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

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

Forms で使用するスクリプトの作成 developing-scripts-for-use-with-forms

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

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

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

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

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