Show Menu
トピック×

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

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

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

ルールを作成して、インタラクティブ機能、ビジネスロジック、スマート検証機能をアダプティブフォームに追加することができます。アダプティブフォームには、ルールエディターが組み込まれています。ルールエディターには、ガイドツアー機能に類似したドラッグアンドドロップ機能が用意されています。このドラッグアンドドロップ機能は、ルールを作成するための最も効率的で簡単な方法です。ルールエディターには、自分のコーディング技術を試してみたいユーザーや、より複雑なコードを作成したいと考えているユーザーのために、コードウィンドウが用意されています。
ルールエディターの詳細については、 アダプティブフォームのルールエディタ- を参照してください。
このチュートリアルを終了すると、ルールを作成して以下の操作を実行できるようになります。
  • フォームデータモデルサービスを呼び出して、データベースからデータを取得する
  • フォームデータモデルサービスを呼び出して、データベースにデータを追加する
  • 検証チェック処理を実行して、エラーメッセージを表示する
このチュートリアルの各セクションの最後にあるインタラクティブな GIF 画像で、作成するフォームの機能をその場で確認することができます。

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

フォームデータモデルの作成 チュートリアルでフォームデータモデルを作成しましたが、ここでは、ルールエディターを使用してそのフォームデータモデルサービスを呼び出し、データを取得してデータベースに情報を追加します。
すべての顧客に一意の顧客 ID 番号が割り当てられているため、特定の顧客に関連する顧客データをデータベース内で特定することができます。以下の手順では、顧客 ID を使用して、データベースから情報を取得します。
  1. アダプティブフォームを編集用に開きます。
  2. 顧客 ID 」フィールドをタップし、「 ルールを編集 」アイコンをタップします。ルールエディターウィンドウが表示されます。
  3. + 作成 」アイコンをタップしてルールを追加します。ビジュアルエディターが表示されます。
    In the Visual Editor, the WHEN statement is selected by default. Also, the form object (in this case, Customer ID ) from where you launched the rule editor is specified in the WHEN statement.
  4. Tap the Select State drop-down and select is changed .
  5. THEN 」ステートメントの「 アクションの選択 」ドロップダウンで「 サービスの呼び出し 」を選択します。
  6. 選択 」ドロップダウンで「 発送先住所を取得 」サービスを選択します。
  7. Drag-and-drop the Customer ID field from the Form Objects tab to the Drop object or select here field in the INPUT box.
  8. Drag-and-drop the Customer ID, Name, Shipping Address, State, and Zip Code field from the Form Objects tab to the Drop object or select here field in the OUTPUT box.
    完了 」をタップして、ルールを保存します。On the rule editor window, tap Close .
  9. アダプティブフォームのプレビューを表示します。「 顧客 ID 」フィールドに ID を入力します。これで、データベース内の顧客情報をフォームに取り込むことができます。

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

データタベースから顧客情報を取得したら、出荷先住所、都道府県、郵便番号を変更します。ここでは、フォームデータモデルサービスを呼び出し、顧客情報を変更してデータベースに保存する手順について説明します。
  1. 送信 」フィールドを選択して「 ルールを編集 」アイコンをタップします。ルールエディターウィンドウが表示されます。
  2. Select the Submit - Click rule and tap the Edit icon. 送信ルールを編集するためのオプションが表示されます。
    In the WHEN option, the Submit and is clicked options are already selected.
  3. THEN 」オプションで「 + ステートメントを追加 」オプションをタップします。「 アクションの選択 」ドロップダウンで「 サービスの呼び出し 」を選択します。
  4. 選択 」ドロップダウンで「 出荷先住所の更新 」を選択します。
  5. フォームオブジェクト 」タブから、「 配送先住所、州、郵便番号 」フィールドを、Dropオブジェクトの対応するtablenameプロパティ(例えば、customerdetails.shippingAddress)にドラッグ&ドロップするか、「INPUT」ボックスの「 ここ」フィールドを選択し ます。 tablenameが先頭に付くすべてのフィールド(この使用例ではcustomerdetailsなど)は、アップデートサービスの入力データとして機能します。 これらのフィールドで指定された値は、すべてデータソース内で更新されます。
    Do not drag-and-drop the Name and Customer ID fields to the corresponding tablename.property (for example, customerdetails.name). 間違って顧客の名前やIDを更新するのを防ぐのに役立ちます。
  6. 「フォームオブジェクト」タブの「 顧客 ID 」フィールドをドラッグし、「 入力 」ボックスの「id」フィールドにドロップします。先頭にtablenameが付いていないフィールド(この使用例ではcustomerdetailsなど)は、アップデートサービスの検索パラメーターとして機能します。 The id field in this use case uniquely identifies a record in the customerdetails table.
  7. 完了 」をタップして、ルールを保存します。On the rule editor window, tap Close .
  8. アダプティブフォームのプレビューを表示します。顧客の詳細情報を取得し、発送先住所を変更してフォームを送信します。同じ顧客の詳細情報をもう一度取得すると、更新された発送先住所が表示されます。

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

フォームにデータが正しく入力されているかどうかを確認するには、そのフォーム上で検証処理を実行する必要があります。データが正しく入力されていない場合は、エラーメッセージが表示されます。例えば、存在しない顧客 ID がフォームに入力されている場合は、エラーメッセージが表示されます。
アダプティブフォームには、検証機能が組み込まれたコンポーネントがいくつか用意されています(共通のユースケースで使用できる電子メールや数値フィールドなど)。高度なユースケース(データベースからレコードが 1 件も返されなかった場合にエラーメッセージを表示するなど)の場合は、ルールエディターを使用します。
次の手順は、フォームに入力された顧客IDがデータベースに存在しない場合にエラーメッセージを表示するルールを作成する方法を示しています。 The rule also brings the focus to and resets the Customer ID field. The rule uses the dataIntegrationUtils API of the form data model service to check if the Customer ID exists in the database.
  1. Tap the Customer ID field and tap the Edit Rules icon. The Rule Editor window opens.
  2. + 作成 」アイコンをタップしてルールを追加します。ビジュアルエディターが表示されます。
    In the Visual Editor, the WHEN statement is selected by default. Also, the form object (in this case, Customer ID ) from where you launched the rule editor is specified in the WHEN statement.
  3. Tap the Select State drop-down and select is changed .
    THEN 」ステートメントの「 アクションの選択 」ドロップダウンで「 サービスの呼び出し 」を選択します。
  4. ビジュアルエディター ​から​ コードエディター ​に切り替えます。切り替え用コントロールは、ウィンドウの右側にあります。コードエディターが開き、以下のようなコードが表示されます。
  5. 「input」変数セクションのコードを以下のように変更します。
    var inputs = {
        "id" : this
    };
    
    
  6. Replace the guidelib.dataIntegrationUtils.executeOperation (operationInfo, inputs, outputs) section with the following code:
    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 を入力して、エラーメッセージが表示されることを確認します。