アダプティブフォームエディターを使用したヘッドレスアダプティブフォームの作成 create-a-headless-adaptive-form-using-adaptive-forms-editor

AEM Forms as a Cloud Service は、ヘッドレスアダプティブフォームを作成するための使いやすいエディターを提供しています。24 を超えるコアコンポーネントを使用できるので、エディターでコンポーネントをドラッグ&ドロップするだけで、フォームを簡単に作成できます。また、ルールエディターを使用すると、フォームフィールドに検証を追加できます。

NOTE
ヘッドレスアダプティブフォームを初めて使用する場合は、ヘッドレスフォーム用のアダプティブフォームエディターを使用する前に、スターターキットを使用したヘッドレスフォームの作成と公開チュートリアルを実行して基本を学び、ヘッドレスアダプティブフォームを手動で作成することをお勧めします。

アダプティブフォームエディターを使用してヘッドレスアダプティブフォームを作成するには、次の手順を実行します。

事前準備

アダプティブフォームエディターを使用してアダプティブフォームを作成するには、以下が必要です。

AEM 6.5 Forms の場合:

  • AEM 6.5.16.0 以降の Forms オーサーインスタンスへのアクセス

  • アダプティブフォームのコアコンポーネント

  • アダプティブフォームコアコンポーネントのテンプレート

  • コアコンポーネントベースのテンプレート用のアダプティブフォームテーマ

  • forms-users グループへのユーザーの追加。forms-users グループのメンバーには、アダプティブフォームを作成する権限があります。

AEM Forms as a Cloud Service の場合:

  • AEM Forms as a Cloud Service オーサーインスタンスまたはローカル AEM Forms as a Cloud Service SDK 環境へのアクセス

  • アダプティブフォームテンプレート:テンプレートは基本構造を提供し、アダプティブフォームのアピアランス(レイアウトとスタイル)を定義します。これには、特定のプロパティやコンテンツ構造を有するフォーマット済みのコンポーネントが含まれます。また、テーマと送信アクションを定義するオプションも提供されます。 テーマは、ルックアンドフィールと送信アクションを定義し、アダプティブフォームの送信時に実行するアクションを定義します。 例えば、収集したデータをデータソースに送信する場合などです。 クラウドサービスでは、空白という名前の OOTB テンプレートが提供されます。

  • アダプティブフォームのテーマ:テーマには、コンポーネントとパネル向けのスタイル設定の詳細が含まれます。 スタイルには、背景カラー、ステートカラー、透明度、配置、サイズなどのプロパティが含まれます。テーマを適用すると、指定したスタイルが対応するコンポーネントに反映されます。Canvas テンプレートは、すべての新しい AEM Forms as a Cloud Service プログラムに含まれています。

  • 権限:forms-users グループにユーザーを追加します。forms-users グループのメンバーには、アダプティブフォームを作成する権限があります。フォーム専用のユーザーグループの詳細なリストについては、グループと権限を参照してください。

アダプティブフォームの作成 create-an-adaptive-form-components

  1. Experience Manager Forms オーサーインスタンスにログインします。

  2. Experience Manager のログインページに資格情報を入力します。ログイン後、左上隅の Adobe Experience ManagerFormsフォームとドキュメント ​をタップします。

  3. 作成」をタップして、「アダプティブフォーム」を選択します。ウィザードが開きます。ソースタブで、テンプレートを選択します。

    テンプレート

    テンプレートを選択すると、テンプレートで指定されたテーマと送信アクションが自動的に選択され、作成 ボタンが有効になります。「スタイル」または「送信」タブを使用して、別のテーマや送信アクションを選択することができます。 選択したテンプレートでテーマが指定されていない場合、作成ボタンは無効のままです。「スタイル」タブに進み、テーマを手動で選択することができます。

  4. スタイル」タブで、テーマを選択します。

    • 選択したテンプレートでテーマを指定すると、ウィザードでテーマが自動的に選択されます。 「スタイル」タブから別のテーマを選択することもできます。

    • 選択したテンプレートにテーマが指定されていない場合は、「スタイル」タブを使用してテーマを選択することができます。 この「作成」ボタンは、テーマが選択された後にのみ有効になります。

  5. (オプション)「データ」タブで、データモデルを選択します。

    • フォームデータモデルフォームデータモデルを使用すると、異なるデータソースのエンティティやサービスをアダプティブフォームに統合することができます。 作成するアダプティブフォームで、複数のデータソースに対するデータの取得と書き込みが必要になる場合は、フォームデータモデルを選択します。

    • JSON スキーマJSON スキーマアダプティブフォームは、生成または消費されるデータの構造を表す JSON スキーマを関連付ける機能を提供することで、所属組織のバックエンドシステムとシームレスに統合できます。この関連付けにより、作成者はスキーマの要素を使用して、アダプティブフォームにコンテンツを動的に追加できます。スキーマの要素には、オーサリングプロセス中にコンテンツブラウザーの「データモデルオブジェクト」タブから容易にアクセスでき、新しく作成されたアダプティブフォームにすべてのフィールドが自動的に追加されます。

    デフォルトでは、関連付けられた JSON スキーマのすべてのフィールドが自動的に選択され、対応するアダプティブフォームコンポーネントに変換されるので、オーサリングプロセスを合理化できます。ウィザードでは、チェックボックスを使用してアダプティブフォームに含めるフィールドを選択できる、さらに便利な機能が用意されています。

  6. 送信」タブで、送信アクションを選択します。

    • テンプレートを選択すると、テンプレートで指定された送信アクションが自動選択されます。 「送信」タブから、別の送信アクションを選択することができます。 「送信」タブには、使用可能なすべての送信アクションが表示されます。

    • 選択したテンプレートで送信アクションが指定されていない場合は、「送信」タブを使用して送信アクションを選択することができます

  7. (オプション)「配信」タブで、アダプティブフォームの公開日または非公開日を指定することができます。

  8. 作成」をタップします。アダプティブフォームを保存するためのタイトル、名前および場所を指定するためのダイアログが表示されます。

    • タイトル:フォームの表示名を指定します。タイトルを指定すると、Experience Manager Forms ユーザーインターフェイス内のフォームを特定しやすくなります。
    • 名前: ​フォームの名前を指定します。指定された名前のノードがリポジトリーに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用できます。無効な入力は、すべてハイフンに置き換えられます。
    • パス:アダプティブフォームを保存する場所を指定します。 アダプティブフォームは、/content/dam/formsanddocuments に直接保存することができます。または、/content/dam/formsanddocuments/adaptiveforms などのフォルダーを作成して、アダプティブフォームを保存することができます。フォルダーをパスで使用する前に、必ずフォルダーを作成してください。 「パス」フィールドでは、フォルダーは自動的には作成されません。
  9. 作成」をタップします。アダプティブフォームが作成され、アダプティブフォームエディターで開きます。エディターに、テンプレートで使用可能なコンテンツが表示されます。 アダプティブフォームのタイプに応じて、関連する JSON スキーマまたはフォームデータモデルに存在するフォーム要素が、サイドバーの​ コンテンツブラウザ ​の「データモデルオブジェクト」タブに表示されます。これらの要素もアドラッグ&ドロップしてダプティブフォームを作成できます。

これで、アダプティブフォームコンポーネントをアダプティブフォームのコンテナにドラッグ&ドロップして、フォームをデザインおよび作成できるようになりました。

アダプティブフォームの JSON レンディションの表示 preview-form

アダプティブフォームを選択し、「プレビュー」をタップします。フォームのプレビューが表示されます。フォームのフォーム定義(JSON)を表示するには、URLの .html 拡張子を .model.json に置き換えます。

例:http://[author-server]:[port]/editor.html/content/forms/af/contact-us.model.json

ヘッドレスアダプティブフォームの getForm API を使用してフォーム定義(JSON)を取得し、アプリケーションで使用できます。

フォーム定義(JSON)の表示

recommendation-more-help
ce8b2828-9203-402e-a565-7b758c99b2ba