ドキュメント AEM AEM チュートリアル AEM Forms のチュートリアル

カスケードドロップダウンリスト

Last update: Wed May 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
アダプティブフォーム

作成対象：

中級
開発者

カスケードドロップダウンリストは、1 つの DropDownList コントロールが親または以前の DropDownList コントロールに依存する、一連の依存 DropDownList コントロールです。 DropDownList コントロールの項目は、別の DropDownList コントロールからユーザーが選択した項目に基づいて設定されます。

ユースケースのデモ

https://video.tv.adobe.com/v/340344?quality=12&learn=on

このチュートリアルでは、Geonames REST API を使用して、この機能を試すことができます。
この種のサービスを提供する組織は多数あり、REST API が詳細に文書化されている限り、データ統合機能を使用して AEM Forms と簡単に統合できます

次の手順に従って、AEM Forms にカスケードドロップダウンリストを実装しました

開発者アカウントの作成

地域名で開発者アカウントを作成します。ユーザー名をメモします。このユーザー名は、geonames.org の REST API を呼び出すために必要です。

Swagger／OpenAPI ファイルの作成

OpenAPI Specification（旧称 Swagger Specification）は、REST API の API 記述形式です。 OpenAPI ファイルを使用すると、次のような API 全体を記述できます。

使用可能なエンドポイント（/users）および各エンドポイントでの操作（GET/users、POST/users）
操作パラメーター各操作の入出力
認証方法
連絡先情報、ライセンス、利用条件、その他の情報。
API の仕様は、YAML または JSON で記述できます。形式は、学習が容易で、人と機械の両方が読み取り可能です。

最初の swagger／OpenAPI ファイルを作成するには、OpenAPI ドキュメントに従ってください。

NOTE

AEM Forms は、OpenAPI Specification version 2.0（旧 Swagger）をサポートしています。

Swagger Editor を使用して swagger ファイルを作成し、国または州のすべての国と子要素を取得する操作を記述します。 Swagger ファイルは、JSON 形式または YAML 形式で作成できます。

データソースの作成

AEM／AEM Forms をサードパーティのアプリケーションと統合するには、クラウドサービス設定でデータソースを作成する必要があります。 Swagger ファイルを使用してデータソースを作成します。 2 つのデータソースを作成する必要があります（1 つはすべての国を取得するためのデータソースで、もう 1 つは子要素を取得するためのデータソース）

フォームデータモデルの作成

AEM Forms のデータ統合機能には、フォームデータモデルを作成して使用するための直感的なユーザーインターフェイスが付属しています。前の手順で作成したデータソースに基づいて、フォームデータモデルを作成します。 2 つのデータソースを持つフォームデータモデル

FDM

アダプティブフォームの作成

フォームデータモデルの GET 呼び出しをアダプティブフォームと統合して、ドロップダウンリストに入力します。
2 つのドロップダウンリストを持つアダプティブフォームを作成します。 1 つは国をリストするためのもので、もう 1 つは選択した国に応じて州や都道府県をリストするものです。

「国」ドロップダウンリストへの入力

国リストは、フォームが最初に初期化されたときに入力されます。次のスクリーンショットは、「国」ドロップダウンリストのオプションを入力するように設定されたルールエディターを示しています。この機能を使用するためには、ユーザー名に geonames アカウントを指定する必要があります。
get-countries