チュートリアル:アダプティブフォームフィールドへのルールの適用 tutorial-apply-rules-to-adaptive-form-fields
このチュートリアルは、 最初のアダプティブフォームを作成する 系列。 Adobeは、チュートリアルの使用例を理解し、実行し、実際に使用するために、一連の作業を時系列に従うことをお勧めします。
このチュートリアルについて about-the-tutorial
ルールを使用して、アダプティブフォームにインタラクティビティ、ビジネスロジック、スマート検証を追加できます。 アダプティブフォームには、ルールエディターが組み込まれています。 ルールエディターには、ガイド付きツアーと同様のドラッグ&ドロップ機能が用意されています。 ドラッグ&ドロップによる方法は、ルールを作成する最も速く最も簡単な方法です。 また、ルールエディターには、コーディングスキルのテストやルールの次のレベルへの移行に関心のあるユーザー向けのコードウィンドウも用意されています。
ルールエディターについて詳しくは、 アダプティブFormsルールエディター.
このチュートリアルを終了すると、ルールを作成して以下の操作を実行できるようになります。
- フォームデータモデルサービスを呼び出してデータベースからデータを取得する
- フォームデータモデルサービスを呼び出してデータベースにデータを追加する
- 検証チェック処理を実行して、エラーメッセージを表示する
このチュートリアルの各セクションの最後にあるインタラクティブな GIF 画像で、作成するフォームの機能をその場で確認することができます。
手順 1:データベースから顧客レコードを取得する retrieve-customer-record
フォームデータモデルを作成するには、次の手順に従います。 フォームデータモデルを作成 記事。 これで、ルールエディターを使用してForms Data Model サービスを呼び出し、情報を取得してデータベースに追加できます。
すべての顧客に一意の顧客 ID 番号が割り当てられ、データベース内の関連する顧客データを識別するのに役立ちます。 以下の手順では、顧客 ID を使用してデータベースから情報を取得します。
-
アダプティブフォームを編集用に開きます。
http://localhost:4502/editor.html/content/forms/af/change-billing-shipping-address.html
-
「顧客 ID」フィールドをタップし、「ルールを編集」アイコンをタップします。ルールエディターウィンドウが表示されます。
-
次をタップします。 +作成 アイコンをクリックして、ルールを追加します。 Visual Editor が開きます。
ビジュアルエディターでは、「条件」ステートメントがデフォルトで選択されています。また、ルールエディターの起動元となったフォームオブジェクト(この場合は「顧客 ID」)が、「条件」ステートメントで指定されています。
-
「状態の選択」ドロップダウンをタップして「変更済み」を選択します。
-
内 THEN 文、選択 サービスを起動 から アクションを選択 」ドロップダウンリストから選択できます。
-
を選択します。 配送先住所の取得 サービス 選択 」ドロップダウンリストから選択できます。
-
「フォームオブジェクト」タブの「顧客 ID」フィールドをドラッグし、「入力」ボックスの「オブジェクトをドロップまたは次から選択」フィールドにドロップします。
-
「フォームオブジェクト」タブの各フィールド(顧客 ID、名前、発送先住所、都道府県、郵便番号)をドラッグし、「出力」ボックスの「オブジェクトをドロップまたは次から選択」フィールドにドロップします。
「完了」をクリックして、ルールを保存します。ルールエディターウィンドウで「閉じる」をタップします。
-
アダプティブフォームのプレビューを表示します。ID を 顧客 ID フィールドに入力します。 これで、フォームは、データベースから顧客の詳細を取得できるようになります。
手順 2:更新した顧客アドレスをデータベースに追加 updated-customer-address
顧客の詳細がデータベースから取得されたら、配送先住所、都道府県、郵便番号を更新できます。 以下の手順では、フォームデータモデルサービスを呼び出して、顧客情報をデータベースに更新します。
-
「送信」フィールドを選択して「ルールを編集」アイコンをタップします。ルールエディターウィンドウが表示されます。
-
送信 - クリックルールを選択して「編集」アイコンをタップします。送信ルールを編集するためのオプションが表示されます。
「条件」オプションの「送信」オプションと「クリックされた」オプションが既に選択されています。
-
内 THEN オプションを選択し、 +ステートメントを追加 オプション。 選択 サービスを起動 から アクションを選択 」ドロップダウンリストから選択できます。
-
を選択します。 配送先住所の更新 サービス 選択 」ドロップダウンリストから選択できます。
-
「フォームオブジェクト」タブの各フィールド(発送先住所、都道府県、郵便番号)をドラッグして、「入力」ボックスの「オブジェクトをドロップまたは次から選択」フィールドの対応する [テーブル名].[プロパティ](例:customerdetails.shippingAddress)にドロップします。先頭にテーブル名(このユースケースでは customerdetails)が付いたすべてのフィールドは、更新サービスの入力データとして機能します。 これらのフィールドで指定された値は、すべてデータソース内で更新されます。
note note NOTE 「名前」フィールドと「顧客 ID」フィールドは、対応する [テーブル名].[プロパティ] 形式のフィールド(例:customerdetails.name)にドラッグ&ドロップしないでください。顧客名と顧客 ID が誤って変更されるのを避けるためです。 -
「フォームオブジェクト」タブの「顧客 ID」フィールドをドラッグし、「入力」ボックスの「ID」フィールドにドロップします。先頭にテーブル名(このユースケースでは customerdetails)が付いていないフィールドは、更新サービスの検索パラメーターとして機能します。 このユースケースでは、「ID」フィールドにより、顧客詳細テーブルのレコードを一意に特定することができます。
-
「完了」をクリックして、ルールを保存します。ルールエディターウィンドウで「閉じる」をタップします。
-
アダプティブフォームのプレビューを表示します。顧客の詳細を取得し、配送先住所を更新して、フォームを送信します。 同じ顧客の詳細を再度取得すると、更新された配送先住所が表示されます。
手順 3:(ボーナスセクション)コードエディターを使用して、検証を実行し、エラーメッセージを表示します。 step-bonus-section-use-the-code-editor-to-run-validations-and-display-error-messages
フォームの検証を実行して、フォームに入力されたデータが正しいことと、データが正しくない場合はエラーメッセージが表示されることを確認する必要があります。 例えば、存在しない顧客 ID をフォームに入力すると、エラーメッセージが表示されます。
アダプティブフォームには、電子メールフィールドや数値フィールドなど、検証機能が組み込まれたコンポーネントがいくつか用意されています。これらは一般的な使用例で使用できます。 高度なユースケース(データベースからレコードが 1 件も返されなかった場合にエラーメッセージを表示するなど)の場合は、ルールエディターを使用します。
次の手順では、データベース内に存在しない顧客 ID がフォームに入力された場合にエラーメッセージを表示するためのルールを作成する方法を示します。このルールによってフォーカスが「顧客 ID」フィールドに移動し、このフィールドがリセットされます。このルールでは、データモデルサービスの dataIntegrationUtils API を使用して、フォームに入力された顧客 ID がデータベース内に存在するかどうかが確認されます。
-
「顧客 ID」フィールドをタップし、
Edit Rules
アイコンをタップします。ルールエディターウィンドウが表示されます。 -
次をタップします。 +作成 アイコンをクリックして、ルールを追加します。 Visual Editor が開きます。
ビジュアルエディターでは、「条件」ステートメントがデフォルトで選択されています。また、ルールエディターの起動元となったフォームオブジェクト(この場合は「顧客 ID」)が、「条件」ステートメントで指定されています。
-
「状態の選択」ドロップダウンをタップして「変更済み」を選択します。
内 THEN 文、選択 サービスを起動 から アクションを選択 」ドロップダウンリストから選択できます。
-
切り替え元 Visual Editor から コードエディター. スイッチコントロールは、ウィンドウの右側にあります。 コードエディターが開き、次のようなコードが表示されます。
-
「入力変数」セクションのコードを以下のように置換します。
code language-none var inputs = { "id" : this };
-
guidelib.dataIntegrationUtils.executeOperation (operationInfo, inputs, outputs) セクションを次のコードに置き換えます。
code language-none 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 を入力してください。 エラーメッセージが表示されます。