これは、最初のアダプティブフォームを作成するシリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。
ルールを作成して、インタラクティブ機能、ビジネスロジック、スマート検証機能をアダプティブフォームに追加することができます。アダプティブフォームには、ルールエディターが組み込まれています。ルールエディターには、ガイドツアー機能に類似したドラッグアンドドロップ機能が用意されています。このドラッグアンドドロップ機能は、ルールを作成するための最も効率的で簡単な方法です。ルールエディターには、自分のコーディング技術を試してみたいユーザーや、より複雑なコードを作成したいと考えているユーザーのために、コードウィンドウが用意されています。
ルールエディターの詳細については、アダプティブフォームのルールエディタ-を参照してください。
このチュートリアルを終了すると、ルールを作成して以下の操作を実行できるようになります。
このチュートリアルの各セクションの最後にあるインタラクティブな GIF 画像で、作成するフォームの機能をその場で確認することができます。
フォームデータモデルの作成チュートリアルでフォームデータモデルを作成しましたが、ここでは、ルールエディターを使用してそのフォームデータモデルサービスを呼び出し、データを取得してデータベースに情報を追加します。
すべての顧客に一意の顧客 ID 番号が割り当てられているため、特定の顧客に関連する顧客データをデータベース内で特定することができます。以下の手順では、顧客 ID を使用して、データベースから情報を取得します。
アダプティブフォームを編集用に開きます。
http://localhost:4502/editor.html/content/forms/af/change-billing-shipping-address.html
「顧客 ID」フィールドをタップし、「ルールを編集」アイコンをタップします。ルールエディターウィンドウが表示されます。
「+ 作成」アイコンをタップしてルールを追加します。ビジュアルエディターが表示されます。
ビジュアルエディターでは、デフォルトでWHENステートメントが選択されています。 また、ルールエディターを起動したフォームオブジェクト(この場合は顧客ID)は、WHENステートメントで指定されています。
「状態を選択」ドロップダウンをタップし、「変更済み」を選択します。
「THEN」ステートメントの「アクションの選択」ドロップダウンで「サービスの呼び出し」を選択します。
「選択」ドロップダウンで「発送先住所を取得」サービスを選択します。
「フォームオブジェクト」タブの「顧客ID」フィールドを「オブジェクトをドロップするか、[!UICONTROL INPUT]」ボックスの「ここにを選択します。
「フォームオブジェクト」タブの「顧客ID、名前、配送先住所、都道府県、郵便番号」フィールドを、OUTPUTボックスの「オブジェクトをドロップするか、ここを選択」フィールドにドラッグ&ドロップします。
「完了」をタップして、ルールを保存します。ルールエディターウィンドウで、「を閉じる」をタップします。
アダプティブフォームのプレビューを表示します。「顧客 ID」フィールドに ID を入力します。これで、データベース内の顧客情報をフォームに取り込むことができます。
データタベースから顧客情報を取得したら、出荷先住所、都道府県、郵便番号を変更します。ここでは、フォームデータモデルサービスを呼び出し、顧客情報を変更してデータベースに保存する手順について説明します。
「送信」フィールドを選択して「ルールを編集」アイコンをタップします。ルールエディターウィンドウが表示されます。
送信 —ルールをクリックし、編集アイコンをタップします。 送信ルールを編集するためのオプションが表示されます。
「WHEN」オプションでは、「送信」および「はクリック」オプションが既に選択されています。
「THEN」オプションで「+ ステートメントを追加」オプションをタップします。「アクションの選択」ドロップダウンで「サービスの呼び出し」を選択します。
「選択」ドロップダウンで「出荷先住所の更新」を選択します。
「フォームオブジェクト」タブの「配送先住所、州、郵便番号」フィールドをINPUT<a7の「[!UICONTROL Drop object(customerdetails.shippingAddress)」オブジェクトの対応するテーブル名。プロパティ(例えば、「]」フィールド)にドラッグ&ドロップします。/>ボックス。 tablenameが先頭に付くすべてのフィールド(この使用例ではcustomerdetailsなど)は、アップデートサービスの入力データとして機能します。 これらのフィールドで指定された値は、すべてデータソース内で更新されます。
「名前」フィールドと「顧客ID」フィールドを、対応するtablename.property(例えば、customerdetails.name)にドラッグ&ドロップしないでください。 間違って顧客の名前やIDを更新するのを防ぐのに役立ちます。
「フォームオブジェクト」タブの「顧客 ID」フィールドをドラッグし、「入力」ボックスの「id」フィールドにドロップします。先頭にtablenameが付いていないフィールド(この使用例ではcustomerdetailsなど)は、アップデートサービスの検索パラメーターとして機能します。 この使用例のidフィールドは、customerdetailsテーブルのレコードを一意に識別します。
「完了」をタップして、ルールを保存します。ルールエディターウィンドウで、「を閉じる」をタップします。
アダプティブフォームのプレビューを表示します。顧客の詳細情報を取得し、発送先住所を変更してフォームを送信します。同じ顧客の詳細情報をもう一度取得すると、更新された発送先住所が表示されます。
フォームにデータが正しく入力されているかどうかを確認するには、そのフォーム上で検証処理を実行する必要があります。データが正しく入力されていない場合は、エラーメッセージが表示されます。例えば、存在しない顧客 ID がフォームに入力されている場合は、エラーメッセージが表示されます。
アダプティブフォームには、検証機能が組み込まれたコンポーネントがいくつか用意されています(共通のユースケースで使用できる電子メールや数値フィールドなど)。高度なユースケース(データベースからレコードが 1 件も返されなかった場合にエラーメッセージを表示するなど)の場合は、ルールエディターを使用します。
次の手順は、フォームに入力された顧客IDがデータベースに存在しない場合にエラーメッセージを表示するルールを作成する方法を示しています。 また、このルールは、フォーカスを移し、顧客IDフィールドをリセットします。 このルールは、フォームデータモデルサービス](/docs/experience-manager-65/forms/using/invoke-form-data-model-services.html?lang=ja)のdataIntegrationUtils APIを使用して、顧客IDがデータベースに存在するかどうかを確認します。[
「Customer ID」フィールドをタップし、Edit Rules
アイコンをタップします。 「ルールエディター」ウィンドウが開きます。
「+ 作成」アイコンをタップしてルールを追加します。ビジュアルエディターが表示されます。
ビジュアルエディターでは、デフォルトでWHENステートメントが選択されています。 また、ルールエディターを起動したフォームオブジェクト(この場合は顧客ID)は、WHENステートメントで指定されています。
「状態を選択」ドロップダウンをタップし、「変更済み」を選択します。
「THEN」ステートメントの「アクションの選択」ドロップダウンで「サービスの呼び出し」を選択します。
ビジュアルエディターからコードエディターに切り替えます。切り替え用コントロールは、ウィンドウの右側にあります。コードエディターが開き、以下のようなコードが表示されます。
「input」変数セクションのコードを以下のように変更します。
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 を入力して、エラーメッセージが表示されることを確認します。