コアコンポーネントFormsでの外部 API とビジュアルルールエディターの統合

アダプティブフォームのビジュアルルールエディターでは、サービスの呼び出し 機能がサポートされており、インスタンスに設定されたフォームデータモデル(FDM)を使用して外部 API に接続できます。 フォームフィールドをサービスの入力パラメーターに直接マッピングし、イベントペイロードオプションを使用して出力パラメーターをマッピングできます。 また、ビジュアルルールエディターでは、サービスの応答に基づいて、成功ハンドラーと失敗ハンドラーのルールを定義することもできます。成功した API 呼び出しは成功したハンドラーで処理され、失敗したハンドラーはエラーを管理します。

これにより、フォームから API リクエストを簡単に送信し、API 応答を処理し、返されたデータをフォーム内に動的に表示または使用することができます。 これにより、アダプティブフォームと外部システムまたはデータソースとのシームレスな統合が確実に行われます。

フォームのルールエディターで呼び出しサービスを使用するメリット

アダプティブフォームのルールエディターで「サービスを起動」操作を使用する利点は次のとおりです。

  • 合理化された API 統合:ビジュアルルールエディターを使用すると、外部のサービスや API をアダプティブFormsに簡単に統合できます。 呼び出しサービス を使用すると、複雑なコーディングを行わなくても、様々なデータソースやサービスにフォームを簡単に接続でき、フォーム統合の効率が向上します。

  • 動的応答の処理:サービスの呼び出し の出力応答に基づいて、成功およびエラー応答を管理し、フォームを様々なシナリオに動的に反応させることができます。 これにより、フォームが様々な条件を適切に処理できるようになり、柔軟性と制御性が向上します。

  • ユーザーのインタラクションの強化:ルールエディターで サービスを呼び出し を使用すると、フォーム内でリアルタイムの検証が可能になり、ユーザーエクスペリエンスが向上します。 また、データがサーバーサイドで正確に検証されるので、エラーが減り、フォームの信頼性が向上します。

成功応答と失敗応答のサービスハンドラーを呼び出す

NOTE
サービスの呼び出し 成功および失敗ハンドラーは、コアコンポーネントに基づくフォームに対してのみ使用できます。 基盤コンポーネントに基づくFormsでは、サービスの呼び出し 成功および失敗ハンドラーをサポートしていません。

ビジュアルルールエディターでは、出力応答に基づいて、サービスの呼び出し 操作の成功ハンドラーと失敗ハンドラーのルールを作成できます。 次の画像は、アダプティブフォームのビジュアルルールエディターにある サービスを呼び出す を示しています。

サービスハンドラーの呼び出し

成功ハンドラーと失敗ハンドラーの追加

成功または失敗のハンドラーを追加するには、「成功ハンドラーを追加」または「失敗ハンドラーを追加 をクリックします。

サクセスハンドラーを追加」をクリックすると、サービスサクセスハンドラーを起動 ルールエディターが表示されます。このルールエディターで、操作が成功したときに サービスを起動 出力応答を管理するルールまたはロジックを指定できます。 条件を定義しなくてもルールを指定できます。ただし、「条件を追加」オプションをクリックすると、成功ハンドラーの条件を追加できます。

サービス成功ハンドラーを起動

複数のルールを追加して、サービスを呼び出し 操作の応答の成功を処理できます。

​ 複数のサクセスハンドラー ​ {width="50%,"}

同様に、操作が成功しなかった場合に サービスの呼び出し 出力応答を処理するルールを追加できます。 次の画像は、サービスエラーハンドラーを起動 ルールエディターを示しています。

サービス呼び出しエラーハンドラー

また、複数のルールを追加して、「サービスの呼び出し 操作からの失敗した応答を処理す こともできます。

サーバーのエラー検証を有効にする 機能を使用すると、アダプティブフォームをデザインする際に作成者が追加した検証を、サーバー上でも実行できます。

ルールエディターで呼び出しサービスを使用するための前提条件

ルールエディターで サービスを呼び出し を使用する前に満たす必要がある前提条件を以下に示します。

  • データソースが設定されていることを確認します。 データソースの設定手順については、​ ここをクリック ​ してください。
  • 設定済みのデータソースを使用して、フォームデータモデルを作成します。 フォームデータモデルの作成に関するガイダンスについては ​ ここをクリック ​ してください。
  • お使いの環境でコアコンポーネントが有効になっていることを確認します。 お使いの AEM Cloud Service 環境でアダプティブフォームコアコンポーネントを有効にするには、最新版をインストールします。

様々なユースケースを通じたサービスの呼び出しの調査

ビジュアルルールエディターの サービスを呼び出し を使用すると、いくつかの便利な操作を実行できます。 これを使用して、ドロップダウンオプションへの入力、繰り返し可能またはシンプルなパネルの設定、フォームフィールドの検証を行うことができます。これらはすべて、サービスの呼び出し の出力応答に基づいて行われます。 これにより、フォームの柔軟性とインタラクティブ性が向上します。

次の表に、サービスの呼び出し を使用できるいくつかのシナリオを示します。

ユースケース
説明
呼び出しサービスの出力を使用したドロップダウンオプションの入力
呼び出しサービス出力から取得したデータに基づいて、ドロップダウンオプションを動的に入力します。 実装を確認するには、​ ここをクリック ​ します。
呼び出しサービスの出力を使用した繰り返し可能なパネルの設定
サービスの呼び出し出力のデータを使用して繰り返し可能なパネルを設定し、動的パネルを許可します。 実装を確認するには、​ ここをクリック ​ します。
呼び出しサービスの出力を使用したパネルの設定
呼び出しサービス出力の特定の値を使用して、パネルの内容または表示を設定します。 実装を確認するには、​ ここをクリック ​ します。
呼び出しサービスの出力パラメーターを使用して他のフィールドを検証する
呼び出しサービスの特定の出力パラメーターを使用して、フォームフィールドを検証します。 実装を確認するには、​ ここをクリック ​ します。
呼び出しサービスの「移動先」アクションでのイベントペイロードの使用
イベントペイロードを使用して、成功および失敗の応答を処理し、ナビゲーション中にデータを「移動先」アクションに渡します。 実装を確認するには、​ ここをクリック ​ します。

Get Information テキストボックスに入力された入力に基づいて値を取得する Pet ID フォームを作成します。 以下のスクリーンショットは、これらのユースケースで使用されるフォームを示しています。

情報フォームの取得

フォームフィールド

フォームに次のフィールドを追加します。

  • ペット ID を入力:テキストボックス

  • 写真 URL を選択: ドロップダウン

  • タグ:パネル

    • 名前:Textbox
    • ID: テキストボックス
  • カテゴリ:パネル

    • 名前:Textbox
  • 送信:送信ボタン

NOTE
フォームフィールドの プロパティ ダイアログにある バインド参照 フィールドで、 foldersearch_18 を選択し、フォームデータモデル(FDM)に追加したバイナリプロパティに移動してそのプロパティを選択します。

パネルの設定

次の制約を使用して、パネルを繰り返しとして設定します。

  • 最小値:1
  • 最大値:4

繰り返しパネルの値は、要件に合わせて調整できます。

データソース

この例では、Swagger Petstore API を使用してデータソースを設定します。 ​ フォームデータモデル ​getPetById サービス用に設定されており、入力した ID に基づいてペットの詳細を取得します。

Swagger Petstore API の addPet サービスを使用して、次の JSON を投稿します。

{
        "id": 101,
        "category": {
            "id": 1,
            "name": "Labrador"
        },
        "name": "Lisa",
        "photoUrls": [
            "https://example.com/photos/lisa1.jpg",
            "https://example.com/photos/lisa2.jpg"
        ],
        "tags": [
            {
                "id": 1,
                "name": "vaccinated"
            },
            {
                "id": 2,
                "name": "friendly"
            },
            {
                "id": 3,
                "name": "house-trained"
            }
        ],
        "status": "available"
    }

ルールとロジックは、テキストボックスのルールエディターで サービスを呼び出し Pet ID アクションを使用して実装され、前述のユースケースが示されます。

次に、各ユースケースの実装について詳しく見てみましょう。

ユースケース 1:呼び出しサービスの出力を使用したドロップダウン値の入力

このユースケースは、Invoke Service の出力に基づいてドロップダウンオプションを動的に入力する方法を示しています。

実装

それには、「Pet ID」テキストボックスでルールを作成して、getPetById サービスを呼び出します。 ルールで、enum 成功ハンドラーの追加 photo-urlphotoUrls ドロップダウンの プロパティを に設定します。

ドロップダウン値を設定

NOTE
成功ハンドラーと失敗ハンドラーの設定方法については、​ サクセスハンドラーと失敗ハンドラーの追加 ​ の節を参照してください。

出力

101 テキストボックスに Pet ID と入力し、入力した値に基づいてドロップダウンオプションを動的に入力します。

結果

ユースケース 2:呼び出しサービスの出力を使用して繰り返し可能なパネルを設定する

このユースケースは、サービスの呼び出し の出力に基づいて繰り返し可能なパネルを動的に入力する方法を示しています。

考慮事項

  • 繰り返し可能なパネルの名前が、パネルを設定する 呼び出しサービス のパラメーターと一致することを確認します。
  • このパネルは、対応する サービスの呼び出し フィールドから返される値の数だけ繰り返されます。

実装

Pet ID」テキストボックスに、getPetById サービスを呼び出すルールを作成します。 サクセスハンドラーを追加 で、別のサクセスハンドラー応答を追加します。 ルール内で tags パネルの値を tags に設定します。

繰り返し可能なパネル用のルールの作成

NOTE
成功ハンドラーと失敗ハンドラーの設定方法については、​ サクセスハンドラーと失敗ハンドラーの追加 ​ の節を参照してください。

出力

101 テキストボックスに Pet ID と入力し、入力値に基づいて繰り返し可能なパネルを動的に入力します。

出力

ユースケース 3:呼び出しサービスの出力を使用したパネルの設定

このユースケースは、サービスの呼び出し の出力に基づいてパネルの値を動的に設定する方法を示しています。

考慮事項

  • パネルの名前が、パネルを設定する 呼び出しサービス のパラメーターと一致することを確認します。
  • このパネルは、対応する呼び出しサービス フィールドが返す値の数だけ繰り返されます。

実装

Pet ID」テキストボックスに、getPetById サービスを呼び出すルールを作成します。 サクセスハンドラーを追加 で、別のサクセスハンドラー応答を追加します。 ルール内で「categoryname」テキストボックスの値を「category.name」に設定します。

NOTE
成功ハンドラーと失敗ハンドラーの設定方法については、​ サクセスハンドラーと失敗ハンドラーの追加 ​ の節を参照してください。

繰り返し可能なパネル用のルールの作成

出力

101 テキストボックスに Pet ID と入力し、入力値に基づいてパネルに動的に入力します。

出力

ユースケース 4:呼び出しサービスの出力パラメーターを使用して他のフィールドを検証

このユースケースは、サービスの呼び出し の出力を使用して他のフォームフィールドを動的に検証する方法を示しています。

実装

Pet ID」テキストボックスに、getPetById サービスを呼び出すルールを作成します。 エラーハンドラーを追加 で、エラーハンドラー応答を追加します。 間違った を入力した場合は 送信 Pet ID ボタンを非表示にします。

エラーハンドラー

出力

102 テキストボックスに「Pet ID」と入力すると、「送信」ボタンが非表示になります。

出力

ユースケース 5:呼び出しサービスの「移動」アクションでのイベントペイロードの使用

このユースケースでは、呼び出しサービス を呼び出し、次に 移動先 アクションを使用してユーザーを別のページにリダイレクトするルールを 送信 ボタンに設定する方法を示しています。

実装

API サービスを呼び出すためのルールを 送信 redirect-api ボタンに作成します。 このサービスは、ユーザーを お問い合わせ フォームにリダイレクトする責任があります。

以下に提供される JSON データを使用して、API を redirect-api API サービスとしてルールエディターに直接統合できます。

{
  "id": "1",
  "path": "/content/dam/formsanddocuments/contact-detail/jcr:content?wcmmode=disabled"
}
NOTE
定義済みのフォームデータモデルを使用せずに、ルールエディターインターフェイスで API を直接統合する方法については、​ ここをクリック ​ を参照してください。

サクセスハンドラーを追加 で、パラメーターを使用してユーザーを お問い合わせ ページにリダイレクトするように 移動先 Event Payload アクションを設定します。 ここで、ユーザーは自分の連絡先の詳細を送信できます。

イベントペイロード

オプションで、サービス呼び出しが失敗した場合にエラーメッセージを表示する失敗ハンドラーを設定します。

出力

送信」ボタンがクリックされると、redirect-api API サービスが呼び出されます。 成功すると、ユーザーは お問い合わせ ページにリダイレクトされます。

イベントペイロード出力

よくある質問

Q:呼び出しサービスを使用してルールを作成し、コアコンポーネントの最新バージョンにアップグレードするとどうなりますか?

A: コアコンポーネントの最新バージョンにアップグレードすると、サービスを呼び出し ルールが自動的に最新のユーザーインターフェイスに更新されます。これは下位互換性があるからです。

Q:サービスを起動操作に対する成功または失敗の応答を処理するために、複数のルールを追加できますか?

A: はい。サービスの呼び出し 操作の成功または失敗の応答を処理する複数のルールを追加できます。

関連記事

その他のリソース

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab