現在表示中:

 

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

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

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

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

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

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

このチュートリアルの各セクションの最後にあるインタラクティブな 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. 状態の選択」ドロップダウンをタップして「変更済み」を選択します。

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

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

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

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

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

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

     

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

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

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

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

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

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

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

     

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

     


    注意:

    名前」フィールドと「顧客 ID」フィールドは、「テーブル名.プロパティ名」形式のフィールド(customerdetails.name など)にドラッグアンドドロップしないでください。これらのフィールドをドラッグアンドドロップすると、顧客名と顧客 ID が誤って変更される場合があります。

  6. 「フォームオブジェクト」タブの「顧客 ID」フィールドをドラッグし、「入力」ボックスの「id」フィールドにドロップします。先頭にテーブル名(このユースケースのテーブル名は、「customerdetails」など)は、更新サービスの検索パラメーターとして機能します。このユースケースの「id」フィールドにより、customerdetailsテーブル内のレコードが一意に識別されます。

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

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

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

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

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

ここでは、データベース内に存在しない顧客 ID がフォームに入力された場合にエラーメッセージを表示するためのルールを作成する手順について説明します。このルールによってフォーカスが移動し、「顧客 ID」フィールドがリセットされます。このルールでは、データモデルサービスの dataIntegrationUtils という API を使用して、フォームに入力された顧客 ID がデータベース内に存在するかどうかが確認されます。

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

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

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

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

    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 を入力して、エラーメッセージが表示されることを確認します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー