チュートリアル:アダプティブフォームのフィールドにルールを適用する

06-apply-rules-to-adaptive-form_main

これは、最初のアダプティブフォームを作成するシリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。

このチュートリアルについて

ルールを作成して、インタラクティブ機能、ビジネスロジック、スマート検証機能をアダプティブフォームに追加することができます。アダプティブフォームには、ルールエディターが組み込まれています。ルールエディターには、ガイドツアー機能に類似したドラッグアンドドロップ機能が用意されています。このドラッグアンドドロップ機能は、ルールを作成するための最も効率的で簡単な方法です。ルールエディターには、自分のコーディング技術を試してみたいユーザーや、より複雑なコードを作成したいと考えているユーザーのために、コードウィンドウが用意されています。

ルールエディターの詳細については、アダプティブフォームのルールエディタ-を参照してください。

このチュートリアルを終了すると、ルールを作成して以下の操作を実行できるようになります。

  • フォームデータモデルサービスを呼び出して、データベースからデータを取得する
  • フォームデータモデルサービスを呼び出して、データベースにデータを追加する
  • 検証チェック処理を実行して、エラーメッセージを表示する

このチュートリアルの各セクションの最後にあるインタラクティブな GIF 画像で、作成するフォームの機能をその場で確認することができます。

手順 1:データベースから顧客レコードを取得する

フォームデータモデルの作成チュートリアルでフォームデータモデルを作成しましたが、ここでは、ルールエディターを使用してそのフォームデータモデルサービスを呼び出し、データを取得してデータベースに情報を追加します。

すべての顧客に一意の顧客 ID 番号が割り当てられているため、特定の顧客に関連する顧客データをデータベース内で特定することができます。以下の手順では、顧客 ID を使用して、データベースから情報を取得します。

  1. アダプティブフォームを編集用に開きます。

    http://localhost:4502/editor.html/content/forms/af/change-billing-shipping-address.html

  2. 顧客 ID」フィールドをタップし、「ルールを編集」アイコンをタップします。ルールエディターウィンドウが表示されます。

  3. + 作成」アイコンをタップしてルールを追加します。ビジュアルエディターが表示されます。

    ビジュアルエディターでは、デフォルトで​WHEN​ステートメントが選択されています。 また、ルールエディターを起動したフォームオブジェクト(この場合は​顧客ID)は、WHEN​ステートメントで指定されています。

  4. 状態を選択」ドロップダウンをタップし、「変更済み」を選択します。

    customeridischanged

  5. THEN」ステートメントの「アクションの選択」ドロップダウンで「サービスの呼び出し」を選択します。

  6. 選択」ドロップダウンで「発送先住所を取得」サービスを選択します。

  7. 「フォームオブジェクト」タブの「顧客ID」フィールドを​「オブジェクトをドロップするか、[!UICONTROL INPUT]」ボックスの「ここに​を選択します。

    dropobjectstoinputfield-retrievedata

  8. 「フォームオブジェクト」タブの「顧客ID、名前、配送先住所、都道府県、郵便番号」フィールドを、OUTPUT​ボックスの「オブジェクトをドロップするか、ここを選択」フィールドにドラッグ&ドロップします。

    dropobjectstooutputfield-retrievedata

    完了」をタップして、ルールを保存します。ルールエディターウィンドウで、​を閉じる」をタップします。

  9. アダプティブフォームのプレビューを表示します。「顧客 ID」フィールドに ID を入力します。これで、データベース内の顧客情報をフォームに取り込むことができます。

    retrieve-information

手順 2:更新後の顧客住所をデータベースに追加する

データタベースから顧客情報を取得したら、出荷先住所、都道府県、郵便番号を変更します。ここでは、フォームデータモデルサービスを呼び出し、顧客情報を変更してデータベースに保存する手順について説明します。

  1. 送信」フィールドを選択して「ルールを編集」アイコンをタップします。ルールエディターウィンドウが表示されます。

  2. 送信 —​ルールをクリックし、編集​アイコンをタップします。 送信ルールを編集するためのオプションが表示されます。

    送信規則

    「WHEN」オプションでは、「送信」および「はクリック」オプションが既に選択されています。

    submit-is-clicked

  3. THEN」オプションで「+ ステートメントを追加」オプションをタップします。「アクションの選択」ドロップダウンで「サービスの呼び出し」を選択します。

  4. 選択」ドロップダウンで「出荷先住所の更新」を選択します。

    update-shipping-address

    dropobjectstoinputfield-updatedata

  5. 「フォームオブジェクト」タブの「配送先住所、州、郵便番号」フィールドを​INPUT<a7の「[!UICONTROL Drop object(customerdetails.shippingAddress)」オブジェクトの対応するテーブル名。プロパティ(例えば、「]」フィールド)にドラッグ&ドロップします。/>ボックス。 tablenameが先頭に付くすべてのフィールド(この使用例ではcustomerdetailsなど)は、アップデートサービスの入力データとして機能します。 これらのフィールドで指定された値は、すべてデータソース内で更新されます。

    メモ

    名前」フィールドと「顧客ID」フィールドを、対応するtablename.property(例えば、customerdetails.name)にドラッグ&ドロップしないでください。 間違って顧客の名前やIDを更新するのを防ぐのに役立ちます。

  6. 「フォームオブジェクト」タブの「顧客 ID」フィールドをドラッグし、「入力」ボックスの「id」フィールドにドロップします。先頭にtablenameが付いていないフィールド(この使用例ではcustomerdetailsなど)は、アップデートサービスの検索パラメーターとして機能します。 この使用例の​id​フィールドは、customerdetails​テーブルのレコードを一意に識別します。

  7. 完了」をタップして、ルールを保存します。ルールエディターウィンドウで、​を閉じる」をタップします。

  8. アダプティブフォームのプレビューを表示します。顧客の詳細情報を取得し、発送先住所を変更してフォームを送信します。同じ顧客の詳細情報をもう一度取得すると、更新された発送先住所が表示されます。

手順 3:(オプション)コードエディターを使用して検証処理を実行し、エラーメッセージを表示する

フォームにデータが正しく入力されているかどうかを確認するには、そのフォーム上で検証処理を実行する必要があります。データが正しく入力されていない場合は、エラーメッセージが表示されます。例えば、存在しない顧客 ID がフォームに入力されている場合は、エラーメッセージが表示されます。

アダプティブフォームには、検証機能が組み込まれたコンポーネントがいくつか用意されています(共通のユースケースで使用できる電子メールや数値フィールドなど)。高度なユースケース(データベースからレコードが 1 件も返されなかった場合にエラーメッセージを表示するなど)の場合は、ルールエディターを使用します。

次の手順は、フォームに入力された顧客IDがデータベースに存在しない場合にエラーメッセージを表示するルールを作成する方法を示しています。 また、このルールは、フォーカスを移し、顧客ID​フィールドをリセットします。 このルールは、フォームデータモデルサービス](/docs/experience-manager-65/forms/using/invoke-form-data-model-services.html?lang=ja)のdataIntegrationUtils APIを使用して、顧客IDがデータベースに存在するかどうかを確認します。[

  1. 「Customer ID」フィールドをタップし、Edit Rulesアイコンをタップします。 「ルールエディター」ウィンドウが開きます。

  2. + 作成」アイコンをタップしてルールを追加します。ビジュアルエディターが表示されます。

    ビジュアルエディターでは、デフォルトで​WHEN​ステートメントが選択されています。 また、ルールエディターを起動したフォームオブジェクト(この場合は​顧客ID)は、WHEN​ステートメントで指定されています。

  3. 状態を選択」ドロップダウンをタップし、「変更済み」を選択します。

    customeridischanged

    THEN」ステートメントの「アクションの選択」ドロップダウンで「サービスの呼び出し」を選択します。

  4. ビジュアルエディター​から​コードエディター​に切り替えます。切り替え用コントロールは、ウィンドウの右側にあります。コードエディターが開き、以下のようなコードが表示されます。

    コードエディター

  5. 「input」変数セクションのコードを以下のように変更します。

    var inputs = {
        "id" : this
    };
    
  6. guidelib.dataIntegrationUtils.executeOperation (operationInfo, inputs, outputs)セクションを次のコードに置き換えます。

    guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs, function (result) {
      if (result) {
          result = JSON.parse(result);
        customer_Name.value = result.name;
        customer_Shipping_Address = result.shippingAddress;
      } else {
        if(window.confirm("Invalid Customer ID. Provide a valid customer ID")) {
              customer_Name.value = " ";
             guideBridge.setFocus(customer_ID);
        }
      }
    });
    
  7. アダプティブフォームのプレビューを表示します。正しくない顧客 ID を入力して、エラーメッセージが表示されることを確認します。

    display-validation-error

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now