チュートリアル：アダプティブフォームフィールドへのルールの適用 tutorial-apply-rules-to-adaptive-form-fields

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

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

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

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

ビジュアルエディターでは、「条件」ステートメントがデフォルトで選択されています。また、ルールエディターの起動元となったフォームオブジェクト（この場合は「顧客 ID」）が、「条件」ステートメントで指定されています。

状態を選択 ​ドロップダウンを選択して「変更済み」を選択します。

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

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

「フォームオブジェクト」タブの「顧客 ID」フィールドをドラッグし、「入力」ボックスの「オブジェクトをドロップまたは次から選択」フィールドにドロップします。

「フォームオブジェクト」タブの各フィールド（顧客 ID、名前、発送先住所、都道府県、郵便番号）をドラッグし、「出力」ボックスの「オブジェクトをドロップまたは次から選択」フィールドにドロップします。

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

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

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

「送信 - クリック」ルールを選択して「編集」アイコンを選択します。送信ルールを編集するためのオプションが表示されます。

「条件」オプションの「送信」オプションと「クリックされた」オプションが既に選択されています。

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

選択 ​ドロップダウンで「発送先住所を更新」を選択します。

「フォームオブジェクト」タブの各フィールド（発送先住所、都道府県、郵便番号）をドラッグして、「入力」ボックスの「オブジェクトをドロップまたは次から選択」フィールドの対応する [テーブル名].[プロパティ]（例：customerdetails.shippingAddress）にドロップします。先頭にテーブル名（このユースケースでは customerdetails）が付いたすべてのフィールドは、更新サービスの入力データとして機能します。 これらのフィールドで指定された値は、すべてデータソース内で更新されます。

「フォームオブジェクト」タブの「顧客 ID」フィールドをドラッグし、「入力」ボックスの「ID」フィールドにドロップします。先頭にテーブル名（このユースケースでは customerdetails）が付いていないフィールドは、更新サービスの検索パラメーターとして機能します。 このユースケースでは、「ID」フィールドにより、顧客詳細 ​テーブルのレコードを一意に特定することができます。

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

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

「顧客 ID」フィールドを選択し、Edit Rules アイコンを選択します。ルールエディターウィンドウが表示されます。

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

ビジュアルエディターでは、「条件」ステートメントがデフォルトで選択されています。また、ルールエディターの起動元となったフォームオブジェクト（この場合は「顧客 ID」）が、「条件」ステートメントで指定されています。

状態を選択 ​ドロップダウンを選択して「変更済み」を選択します。

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

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

「入力変数」セクションのコードを以下のように置換します。

var inputs = {
    "id" : this
};

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);
    }
  }
});

アダプティブフォームのプレビューを表示します。正しくない顧客 ID を入力します。エラーメッセージが表示されます。