コアコンポーネントに基づくアダプティブFormsのルールエディターユーザーインターフェイス

コアコンポーネントに基づくアダプティブFormsのルールエディターのユーザーインターフェイスにより、Adobe Experience Manager(AEM)内のフォーム作成プロセスが強化されます。 事前定義済みの条件、ユーザー入力、インタラクションに基づいてアクションのトリガーを決定するルールを記述することで、ビジネスユーザーと開発者の両方が、動的な動作と複雑なロジックをフォームに実装できるようになります。 この機能は、ES10 の機能を含む最新のJavaScript機能をサポートし、ルール作成プロセスを簡素化する直感的なビジュアルエディターを提供します。
ルールエディターは、フォーム入力のエクスペリエンスを効率化し、精度と効率の両方を確保するのに役立ちます。 パネルやフォームの検証やリセット、フォームオブジェクトの値を計算するためのカスタム関数の実行が可能です。 ネストされた条件のサポートとフォームデータモデルサービスの呼び出し機能により、ルールエディターのユーザーインターフェイスは、レスポンシブで使いやすいアダプティブフォームを作成するための中心的なコンポーネントになります。

ルールエディターのユーザーインターフェイスを理解する understanding-the-rule-editor-user-interface

ルールエディターでは、ルールの記述や管理のための、総合的でシンプルなユーザーインタフェイスが用意されています。オーサリングモードのアダプティブフォーム内からルールエディターのユーザーインターフェイスを起動できます。

ルールエディターのユーザーインターフェイスを起動するには:

  1. アダプティブフォームをオーサリングモードで開きます。

  2. ルールを記述するフォームオブジェクトを選択し、コンポーネントツールバーで edit-rules をクリックします。ルールエディターのユーザーインターフェイスが表示されます。

    create-rules

    選択したフォームオブジェクトの既存のルールが、このビューに一覧表示されます。既存ルールの詳細な管理方法については、ルール管理を参照してください。

  3. 作成」を選択して、新しいルールを記述します。ルールエディターの初回起動時は、ルールエディターの UI がビジュアルエディターモード(デフォルト)で表示されます。

    ルールエディターのユーザーインターフェイス

ここからは、ルールエディターのユーザーインターフェイスに含まれる各要素について説明します。

A. コンポーネントルールの表示 a-component-rule-display

ルールエディターを起動したアダプティブフォームオブジェクトのタイトルと、現在選択されているルールタイプを表示します。上記の例では、ルールエディターは「質問 1」と名付けられたアダプティブフォームオブジェクトから起動されており、「When」のルールタイプが選択されています。

B. フォームオブジェクトと関数 b-form-objects-and-functions-br

ルールエディターのユーザーインターフェイスの左側のペインには、「フォームオブジェクト」と「関数」の 2 つのタブがあります。

「フォームオブジェクト」タブには、アダプティブフォームに含まれているオブジェクトがすべて階層表示されます。ここには、オブジェクトのタイトルとタイプが表示されます。ルールの作成時は、フォームオブジェクトをルールエディターまでドラッグ&ドロップすることができます。オブジェクトまたは関数をプレースホルダーにドラッグ&ドロップしてルールの作成や編集を行うと、適切な値の型がプレースホルダーに自動的に取り込まれるます。

1 つ以上の有効なルールが適用されているフォームオブジェクトには、緑のドットが付いています。フォームオブジェクトに適用されているルールのいずれかが無効な場合、フォームオブジェクトには黄色のドットが付きます。

「関数」タブには、「合計」、「最小」、「最大」、「平均」、「回数」や「フォームを検査」などの組み込み関数のセットが含まれています。これらの関数をルールに記述することで、繰り返しパネルや表の行の値を計算し、計算結果をアクションや条件文の中で使用することができます。また、カスタム関数を作成することもできます。

関数のリストの一部を図に示します。

関数タブ

NOTE
「Formsのオブジェクト」タブと「関数」タブでは、オブジェクトや関数の名前およびタイトルに対してテキスト検索を実行できます。

フォームオブジェクトの左側のツリーで、フォームオブジェクトを選択すると、各オブジェクトに適用されるルールが表示されます。様々なフォームオブジェクトのルール間を移動できるだけでなく、フォームオブジェクト間でルールをコピー&ペーストすることもできます。詳しくは、ルールをコピー&ペーストを参照してください。

C. フォームオブジェクトと関数の切り替え c-form-objects-and-functions-toggle-br

切り替えボタンをタップすると、フォームオブジェクトと関数ペインが切り替わります。

D. ルールのビジュアルエディター visual-rule-editor

ルールを記述するビジュアルエディターは、ルールエディターのユーザーインターフェイスをビジュアルエディターモードに切り替えると表示されます。ルールタイプを選択し、それに応じて条件とアクションを定義できます。ルールで条件やアクションを定義する場合、フォームオブジェクトと関数ペインからフォームオブジェクトと関数をドラッグ&ドロップできます。

ルールのビジュアルエディターの詳細については、「 ルールの作成」を参照してください。

E. 「完了」ボタンと「キャンセル」ボタン done-and-cancel-buttons

ルールを保存するには、「完了」ボタンを押します。不完全なルールでも保存できます。ただし、不完全なルールは無効なため、実行されることはありません。フォームオブジェクトに保存されたルールは、同じフォームオブジェクトから次回ルールエディターを起動すると一覧表示されます。このビューでは、既存のルールを管理できます。詳しくは、ルールを管理を参照してください。

キャンセル ボタンをクリックすると、ルールに対する変更が破棄され、ルールエディターが閉じます。

ルールを記述 write-rules

ルールを記述するには、ビジュアルルールエディターの を使用します

まず、ビジュアルエディターを使用してルールを記述する方法を見てみましょう。

+++

ビジュアルエディター {#using-visual-editor} の使用

ここでは、次のフォーム例を使って、ビジュアルエディターでルールを作成する方法について説明します。

Create-rule-example

ローン申し込みフォームの例の「ローン要件」セクションでは、配偶者の有無、給与、および配偶者の給与(既婚の場合)を申請者が指定する必要があります。ユーザー入力に基づいて、ルールはローン適格額を計算し、「Loan Eligibility(貸付資格)」フィールドに表示します。次のルールを適用して、シナリオを実装します。

  • 配偶者の「Salary(給与)」フィールドは、婚姻状況に「Married(既婚)」を選んだ場合にのみ表示されます。
  • 融資適格額は、全給与の 50 パーセントとして計算されます。

ルールを記述するには、次のステップを実行します。

  1. まず、「Marital Status (配偶者の有無)」のラジオボタンの選択内容に応じて「Spouse Salary (配偶者の給与)」フィールドの表示・非表示を制御するためのルールを記述します。

    融資申請フォームをオーサリングモードで開きます。「配偶者の有無」コンポーネントを選択し、「 edit-rules 」を選択します。次に、「作成」を選択し、ルールエディターを起動します。

    write-rules-visual-editor-1

    ルールエディターを起動すると、「When」ルールがデフォルトで選択されます。また、ルールエディターを起動したフォームオブジェクト(この場合は「Marital Status(配偶者の有無)」)は、「When」文に入力されています。

    選択したオブジェクトを変更または修正できませんが、以下に示すように、ルールドロップダウンを使用して別のルールタイプを選択できます。別のオブジェクトにルールを作成する場合は、「キャンセル」を選択してルールエディターを終了し、目的のフォームオブジェクトから再度起動します。

  2. 状態の選択」ドロップダウンを選択し、「次の値と等しい」を選択します。「文字列を入力」フィールドが表示されます。

    write-rules-visual-editor-2

  3. ルールの 文字列を入力 フィールドで、ドロップダウンメニューから 既婚 を選択します。

    write-rules-visual-editor-4

    条件をWhen Marital Status is equal to Marriedと定義しました。次に、この条件が True の場合に実行するアクションを定義します。

  4. Then ステートメントで、アクションを選択 ​ドロップダウンリストから「表示」を選択します。

    write-rules-visual-editor-5

  5. オブジェクトをドロップするか、または次から選択」フィールドの「フォームオブジェクト」タブから「Spouse Salary (配偶者の給与)」フィールドをドラッグ・ドロップします。目的のフォームオブジェクトから再度起動します。あるいは、「オブジェクトをドロップするか、または次から選択」フィールドを選択し、ポップアップメニューから「配偶者の給与」フィールドを選択します。この中には、フォーム内のすべてのフォームオブジェクトが一覧表示されます。

    write-rules-visual-editor-6

    次に、この条件が False の場合に実行するアクションを定義します。

  6. 「Marital Status (配偶者の有無)」を「Single (独身) として選択した場合に、「 Spouse Salary (配偶者の給与) 」フィールドに別の条件を追加するには、「Add Else Section (その他のセクションを追加)」をクリックします

    when-else

  7. Else ステートメントで、「アクションを選択」ドロップダウンから 非表示 を選択します。
    when-else

  8. オブジェクトをドロップするか、または次から選択」フィールドの「フォームオブジェクト」タブから「Spouse Salary (配偶者の給与)」フィールドをドラッグ・ドロップします。目的のフォームオブジェクトから再度起動します。あるいは、「オブジェクトをドロップするか、または次から選択」フィールドを選択し、ポップアップメニューから「配偶者の給与」フィールドを選択します。この中には、フォーム内のすべてのフォームオブジェクトが一覧表示されます。
    when-else

    ルールエディターでは、ルールが次のように表示されます。

    write-rules-visual-editor-7

  9. 完了」を選択し、ルールを保存します。

note note
NOTE
また、同じ動作を実装する場合は、「Marital Status (配偶者の有無)」フィールドに「When」ルールを記述する代わりに、「Spouse Salary (配偶者の給与)」フィールドに「Show」ルールを記述することもできます。

write-rules-visual-editor-9

  1. 次に、融資適格金額を算出するためのルールを記述します。ここでは、総給与の 50% として計算され、「Loan Eligibility(貸付資格)」フィールドに表示されます。この結果を得るには、「Loan Eligibility (貸付資格)」フィールド上に 値を設定 ルールを作成します。

    「オーサリングモードで「Loan Eligibility(貸付資格)」フィールドを選択し、「 edit-rules 」を選択します。次に、「作成」を選択し、ルールエディターを起動します。

  2. ルールのドロップダウンから「指定値」ルールを選択します。

    write-rules-visual-editor-10

  3. オプションの選択」を選択し、「数式」を選択します。数式記述用のフィールドが表示されます。

    write-rules-visual-editor-11

  4. 数式記述用のフィールドでは、次のように行います。

    • 最初の「オブジェクトをドロップまたは次から選択」の「フォームオブジェクト」タブから「Salary(給与)」フィールドを選択するかドラッグ&ドロップします。

    • 演算子を選択」フィールドから「プラス」を選択します。

    • 「フォームオブジェクト」タブから、他の​ ドロップオブジェクトの「 ​​ Spouse Salary (配偶者の給与)​ 」フィールドを選択またはドラッグ&ドロップするか、「ここ」 ​フィールドを選択します。

    write-rules-visual-editor-12

  5. 次に、式フィールドの周りのハイライト表示された領域を選択し、「拡張式」を選択します。

    write-rules-visual-editor-13

    拡張式フィールドでは、「演算子を選択」フィールドから「÷」を選択し、「オプションを選択」フィールドから「数字」を選択します。次に、数字フィールドに「2」を入力します。

    write-rules-visual-editor-14

    note note
    NOTE
    「オプションを選択」フィールドから、コンポーネント、関数、数式、およびプロパティの各値を使用することで、複雑な式を作成することもできます。

    次に、True が返された場合に式を実行する条件を作成します。

  6. 条件の追加」を選択し、「When」文を追加します。

    write-rules-visual-editor-15

    When ステートメント内で、以下の操作を行います。

    • 最初の「オブジェクトをドロップまたは次から選択」フィールドの「配偶者の有無」フィールドで、「フォームオブジェクト」タブから選択またはドラッグ&ドロップします。

    • 演算子の選択」フィールドから「is equal to (に等しい)」を選択します。

    • 他の「オブジェクトをドロップまたは次から選択」フィールドから「文字列」を選択し、「文字列を入力」フィールドに「Married (既婚)」を入力します。

    ルールは、ルールエディターで最終的には次のように表示されます。 write-rules-visual-editor-16

  7. 完了」を選択します。ルールが保存されます。

  8. ステップ 7~14 を繰り返し、配偶者の有無が「Single(独身)」であれば融資適格額を計算する別のルールを定義します。ルールエディターでは、ルールが次のように表示されます。

    write-rules-visual-editor-17

代わりに、「When」ルール内で貸付資格を計算するために「Set Value Of」ルールを使用することもできます。このルールは、「Spouse Salary(配偶者の給与)」フィールドの表示/非表示を切り替えるために作成したものです。「Marital Status (配偶者の有無)」が「Single (独身)」の場合、ルールエディターでは組み合わせルールが次のように表示されます。

write-rules-visual-editor-18

「Spouse Salary (配偶者の給与)」フィールドの表示・非表示を切り替えるための組み合わせルールを作成し、「Else (その他)」条件を使用して「Marital Status (配偶者の有無)」が「Married (既婚)」の場合に融資適格性を計算することができます。

write-rules-visual-editor-19

ルールエディターでのカスタム関数 custom-functions

関数出力 の下にリストされている 合計 のような既存の関数に加え、ルールエディターでカスタム関数を使用することもできます。 ルールエディターでは、スクリプトおよびカスタム関数のJavaScript ECMAScript 2019 構文がサポートされています。 カスタム関数の作成手順について詳しくは、アダプティブフォームのカスタム関数の記事を参照してください。

ルール管理 manage-rules

フォームオブジェクトを選択し、続けて¥ edit-rules1 」を選択すると、オブジェクト上に既存のルールが一覧表示されます。タイトルを表示し、ルール概要をプレビューできます。さらに、UI を使用すると、ルールの概要の展開および表示、ルールの順序変更、ルールの編集、ルールの削除を行えます。

リストルール

ルールに対して次のアクションを実行できます。

  • 展開/折りたたみ:ルールリスト内の「コンテンツ」の列には、ルールの内容が表示されます。デフォルトビューにルール内容の全体が表示されていない場合は、「 expand-rule-content 」を選択してビューを展開します。

  • 並べ替え:新しく作成したルールはすべて、ルールリストの一番下に追加されます。ルールは上から下に順に実行されます。一番上のルールが最初に実行され、続けて同じタイプの他のルールが実行されます。例えば、「When」、「Show」、「Enable」、および「When」の各ルールが、リストの 1~4 番目にある場合、一番上にある「When」ルールが最初に実行され、次に 4 番目の「When」ルールが実行されます。 そして、「Show」ルールおよび「Enable」ルールが実行されます。ルールの順序を変更するには、 sort-rules をタップするか、リスト内の目的の位置にドラッグアンドドロップします。

  • 編集:ルールを編集するには、ルールタイトルの横にあるチェックボックスを選択します。ルールを編集・削除するためのオプションが表示されます。「編集」を選択して、選択したルールをルールエディターで開きます。

  • 削除:ルールを削除するには、ルールを選択してから「削除」をクリックします。

  • 有効/無効:ルールの使用を一時的に停止する必要がある場合、1 つ以上のルールを選択し、アクションツールバーの「無効」を選択して無効にすることができます。ルールが無効化されている場合は、ランタイムには実行されません。無効になっているルールを有効にするには、そのルールを選択して、アクションツールバーの「有効にする」を選択します。ルールの「ステータス」列には、ルールが有効か無効かが表示されます。

ルールを無効にする

ルールのコピー&ペースト copy-paste-rules

ルールを 1 つのフィールドから他の類似したフィールドにコピー&ペーストすると、時間を節約できます。

ルールをコピー&ペーストするには、次の手順を実行します。

  1. ルールをコピーするフォームオブジェクトを選択し、コンポーネントツールバーから「 ルールを編集 」をクリックします。フォームオブジェクトが選択された状態でルールエディターのユーザーインタフェイスが表示され、既存のルールが表示されます。

    ルールのコピー

    既存ルールの詳細な管理方法については、ルール管理を参照してください。

  2. ルールタイトルの横にあるチェックボックスを選択すると、ルールを管理するオプションが表示されます。「コピー」を選択します。

    copyrule2

  3. ルールをペーストする別のフォームオブジェクトを選択し、「ペースト」を選択します。さらに、ルールを編集して、変更を加えることができます。

    note note
    NOTE
    ルールを別のフォームオブジェクトに貼り付けることができるのは、そのフォームオブジェクトがコピーしたルールのイベントをサポートしている場合に限られます。例えば、ボタンはクリックイベントをサポートします。クリックイベントを含むルールをボタンに貼り付けることはできますが、チェックボックスに貼り付けることはできません。
  4. 完了」を選択し、ルールを保存します。

次の手順

アダプティブフォームのルールエディターでの様々な演算子のタイプとイベントについては、 アダプティブフォームのルールエディターで使用できる演算子のタイプとイベントを参照してください。

関連トピック

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab