ドキュメントAEM as a Cloud Serviceユーザーガイド

AEM Sites ページへのフォームポータルの追加 publish-forms-on-portal

Last update: Wed Feb 07 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

新しいアダプティブフォームを作成する、または AEM Sites ページにアダプティブフォームを追加する際には、最新の拡張可能なデータキャプチャであるコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。

バージョン
記事リンク
AEM 6.5
ここをクリックしてください
AEM as a Cloud Service
この記事

一般的なフォーム中心のポータルのデプロイメントシナリオでは、フォームの開発とポータルの開発が別々に行われます。フォームデザイナーがフォームを設計してリポジトリに保存する一方、web 開発者は web アプリケーションを作成してフォームを一覧表示し、フォームの送信を処理します。フォームリポジトリと web アプリケーション間では通信が行われないため、フォームは web 層にコピーされます。

このようなシナリオでは、管理問題が発生したり生産が遅延したりすることがよくあります。例えば、リポジトリで新しいバージョンのフォームを利用できる場合、web 層でフォームを置換し、web アプリケーションを変更し、公共サイトでフォームを再展開する必要があります。Web アプリケーションの再展開によって、サーバーのダウンタイムが発生する可能性があります。通常、サーバーのダウンタイムは計画的に行われるため、変更を瞬時に公開サイトにプッシュすることはできません。

AEM Forms は管理のオーバーヘッドと実稼働の遅延を低減するポータルコンポーネントを提供します。コンポーネントにより、web 開発者は Adobe Experience Manager（AEM）を使用して作成された web サイト上にフォームポータルを作成してカスタマイズできます。

フォームポータルコンポーネントにより、次の機能が追加されます。

  • カスタマイズしたレイアウトでフォームを一覧表示します。標準搭載で、リスト表示およびカード表示が提供されます。独自のカスタムレイアウトを作成できます。
  • カスタムメタデータとカスタムアクションをリストにしながら表示できます。
  • フォームポータルコンポーネントを使用しているパブリッシュインスタンス上の AEM Forms UI が発行したフォームを一覧表示します。
  • エンドユーザーが HTML 形式および PDF 形式でフォームをレンダリングできるようにします。
  • タイトルと説明に基づいてフォームを検索できるようにします。
  • カスタム CSS を使用してポータルのルックアンドフィールをカスタマイズします。
  • フォームへのリンクを作成します。
  • ユーザーが作成したアダプティブフォームに関連するドラフトおよび送信を一覧表示します。

フォームポータルページのコンポーネント forms-portal-components

AEM Forms は、次のポータルコンポーネントを標準搭載しています。

  • 検索とリスター：このコンポーネントを使用すると、フォームリポジトリ内のフォームをポータルページに一覧表示できます。また、指定した基準に基づいてフォームを一覧表示するための設定オプションが提供されます。

  • ドラフトと送信：「検索とリスター」コンポーネントはフォーム作成者が発行しれたフォームを表示するのに対し、「ドラフトと送信」コンポーネントはドラフトとして保存され、後で完了して送信されるフォームを表示します。このコンポーネントは、ログインしたユーザーに対してパーソナライズされたエクスペリエンスを提供します。

  • リンク：このコンポーネントを使用すると、ページの任意の場所にフォームへのリンクを作成できます。

AEM プロジェクトアーキタイプから 標準搭載のフォームポータルコンポーネントを読み込む ことができます。 読み込んだ後、次の設定を実行します。

フォームポータルコンポーネントの読み込み import-forms-portal-components-aem-archetype

標準搭載のフォームポータルコンポーネントを AEM Forms as a Cloud Service に読み込むには、次の手順を実行します。

  1. ローカル開発インスタンス上に Cloud Manager Git リポジトリーを複製する： Cloud Manager Git リポジトリーには、デフォルトの AEM プロジェクトが含まれています。AEM アーキタイプに基づいています。Cloud Manager UI のセルフサービス Git アカウント管理を使用して Cloud Manager Git リポジトリーを複製し、プロジェクトをローカル開発環境に移行します。リポジトリへのアクセスについて詳しくは、 リポジトリへのアクセス を参照してください。

  2. Experience Manager Forms as a [Cloud Service] プロジェクトの作成： AEM アーキタイプ 27 以降に基づいて Experience Manager Forms as a [Cloud Service] プロジェクトを作成します。このアーキタイプは、開発者が AEM Forms as a Cloud Service の開発を容易に開始するのに役立ちます。また、すぐに使い始めるのに役立つテーマとテンプレートのサンプルも含まれています。

    Experience Manager Forms as a Cloud Service プロジェクトを作成するには、コマンドプロンプトを開き、以下のコマンドを実行します。Forms に特有の設定、テーマおよびテンプレートを含めるには、includeForms=y を設定します。

    code language-shell 
    mvn -B archetype:generate -DarchetypeGroupId=com.adobe.aem -DarchetypeArtifactId=aem-project-archetype -DarchetypeVersion=30 -DaemVersion="cloud" -DappTitle="My Site" -DappId="mysite" -DgroupId="com.mysite" -DincludeForms="y"

    また、上記のコマンドで appTitle、appId、groupId を変更し、環境に反映します。

    プロジェクトが準備完了したら、アーキタイププロジェクトの<core.forms.components.version>x.y.z</core.forms.components.version>最高レベルのプロパティpom.xmlをアップデートし、AEM Archetypeプロジェクトの最新バージョンの core-forms-components を反映させます。

  3. プロジェクトをローカル開発環境にデプロイ： 次のコマンドを使用して、ローカル開発環境にデプロイできます

    mvn -PautoInstallPackage clean install

    コマンドの完全なリストについては、 構築とインストール を参照してください

  4. AEM Forms as a Cloud Service 環境にコードをデプロイします。

アダプティブフォーム用の Azure ストレージの設定 configure-azure-storage-adaptive-forms

Experience Manager Forms データ統合 は、フォームを Azure ストレージサービスと統合するための Azure ストレージ設定を提供します。フォームデータモデルを使用して、Azure サーバーと連携するアダプティブフォームを作成することにより、ビジネスワークフローを使用できるようになります。

Azure ストレージ設定の作成 create-azure-storage-configuration

これらの手順を実行する前に、Azure ストレージアカウントと、Azure ストレージアカウントへのアクセスを許可するためのアクセスキーがあることを確認してください。

  1. ツール／クラウドサービス／Azure ストレージ ​に移動します。
  2. 設定を作成するフォルダーを選択して、「作成」をクリックします。
  3. 「タイトル」フィールドで設定のタイトルを指定します。
  4. 「Azure ストレージアカウント」フィールドで Azure ストレージアカウントの名前を指定します。

フォームポータル用統合ストレージコネクタの設定 configure-usc-forms-portal

AEM ワークフロー用の統合ストレージコネクタを設定するには、次の手順を実行します。

  1. ツール／Forms／統合ストレージコネクタ ​に移動します。
  2. 「フォームポータル」セクションで、「ストレージ」ドロップダウンリストから「Azure」を選択します。
  3. 「ストレージ設定パス」フィールドで、Azure ストレージ設定の設定パスを指定します。
  4. 「公開」を選択してから、「保存」をクリックして設定を保存します。

フォームポータルコンポーネントの有効化 enable-forms-portal-components

Adobe Experience Manager（AEM）サイトで任意のコアコンポーネント（標準のポータルコンポーネントを含む）を使用するには、プロキシコンポーネントを作成して、サイトに対してそれを有効にする必要があります。プロキシコンポーネントの作成とポータルコンポーネントの有効化については、 コアコンポーネントの使用 を参照してください。

ポータルコンポーネントを有効にすると、サイトページのオーサーインスタンスで使用できるようになります。

フォームポータルコンポーネントの追加と設定 configure-forms-portal-components

ポータルコンポーネントを追加して設定すると、AEM を使用して作成した web サイトでフォームポータルを作成してカスタマイズできます。フォームポータルで使用する前に、 コンポーネントが有効になっていること を確認してください。

コンポーネントを追加するには、コンポーネントパネルからページのレイアウトコンテナにコンポーネントをドラッグ＆ドロップするか、レイアウトコンテナ上の追加アイコンを選択して、新規コンポーネントを挿入ダイアログからコンポーネントを追加します。

下書きと送信コンポーネントの設定 configure-drafts-submissions-component

下書きと送信コンポーネントには、後で完成させるために下書きとして保存されているフォームと送信済みのフォームが表示されます。設定するには、コンポーネントを選択してから 設定アイコン を選択します。下書きと送信 ダイアログで、フォームを下書きまたは送信済みのフォームとして示すタイトルを指定します。また、下書きのフォームまたは送信済みのフォームを、カード形式またはリスト形式でコンポーネントが一覧表示するかどうかを選択します。

下書きアイコン

送信アイコン

検索とリスターコンポーネントの設定 configure-search-lister-component

検索とリスターコンポーネントは、ページ上のアダプティブフォームをリスト表示し、リストに表示されたフォームに検索を実装するために使用します。

検索とリスターアイコン

設定するには、コンポーネントを選択してから 設定アイコン をクリックします。検索とリスター ダイアログが開きます。

  1. 「表示」タブで以下を設定します。

    • タイトル で、検索とリスターコンポーネントのタイトルを指定します。特徴的なタイトルを使用すると、ユーザーはフォームのリスト全体ですばやく検索を実行できます。
    • レイアウト リストで、フォームをカード形式またはリスト形式で表すレイアウトを選択します。
    • 「検索を非表示」および「並べ替えを非表示」を選択し、検索機能と並べ替え機能を非表示にします。
    • ツールヒント で、コンポーネントにカーソルを合わせたときに表示されるツールヒントを指定します。

  2. 「アセットフォルダー」タブで、フォームを取得してページに一覧表示する場所を指定します。複数のフォルダーの場所を設定できます。

  3. 「結果」タブで、1 ページに表示するフォームの最大数を設定します。デフォルトでは、1 ページに 8 つのフォームです。

リンクコンポーネントを使用すると、ページ上のアダプティブフォームへのリンクを提供できます。設定するには、コンポーネントを選択してから 設定アイコン をクリックします。リンクコンポーネントを編集 ダイアログが開きます。

  1. リンクで表されたフォームを容易に識別できるように、「表示」タブでリンクのキャプションとツールヒントを指定します。
  2. 「アセット情報」タブで、アセットが保存されているリポジトリパスを指定します。
  3. 「クエリパラメーター」タブで、追加のパラメーターをキーと値のペアの形式で指定します。リンクをクリックすると、これらのその他のパラメーターはフォームと共に渡されます。

Adobe Sign を使用した非同期フォーム送信の設定 configure-asynchronous-form-submission-using-adobe-sign

アダプティブフォームを送信する設定は、すべての受信者が署名行為を完了した場合にのみ行うことができます。Adobe Sign を使用して設定を指定するには、次の手順に従います。

  1. オーサーインスタンスで、アダプティブフォームを編集モードで開きます。
  2. 左側のパネルで「プロパティ」アイコンを選択し、「電子署名」オプションを展開します。
  3. 「Adobe Sign を有効にする」を選択します。様々な設定オプションが表示されます。
  4. 「フォームを送信」セクションで、「すべての受信者が署名行為を完了した後」オプションを選択して、「フォームを送信」アクションを設定します。このアクションでは、最初にすべての受信者にフォームが送信されて署名されます。すべての受信者がフォームに署名したときにのみ、そのフォームが送信されます。

アダプティブフォームを下書きとして保存 save-adaptive-forms-as-drafts

フォームを下書きとして保存し、後で完成させることができます。フォームを下書きとして保存する方法は 2 つあります。

  • フォームコンポーネント（ボタンなど）に「フォームを保存」ルールを作成します。このボタンをクリックすると、ルールトリガーとフォームがドラフトとして保存されます。
  • 自動保存機能を有効にします。これにより、指定されたイベントごとに、または設定された時間間隔の後にフォームが保存されます。

アダプティブフォームをドラフトとして保存するためのルールの作成 rule-to-save-adaptive-form-as-draft

フォームコンポーネント（ボタンなど）に「フォームを保存」ルールを作成するには、次の手順に従います。

  1. オーサーインスタンスで、アダプティブフォームを編集モードで開きます。
  2. 左側のパネルで、 コンポーネントアイコン を選択し、「ボタン」コンポーネントをフォームにドラッグします。
  3. 「ボタン」コンポーネントを選択してから、 設定アイコン をクリックします。
  4. 「ルールを編集」アイコンを選択して、ルールエディターを開きます。
  5. 「作成」を選択し、ルールを設定および作成します。
  6. 「条件」セクションで、「クリック済み」を選択し、「次に」セクションで「フォームを保存」オプションをクリックします。
  7. 「完了」を選択して、ルールを保存します。

自動保存を有効にする enable-auto-save

アダプティブフォームの自動保存機能は、次のように設定することができます。

  1. オーサーインスタンスで、アダプティブフォームを編集モードで開きます。
  2. 左側のパネルで、 プロパティアイコン を選択し、「自動保存」オプションを展開します。
  3. 「有効」 チェックボックスをオンにし、フォームの自動保存を有効にします。次の項目を設定できます。
  • デフォルトでは、アダプティブフォームイベント が「true」に設定されている場合は、イベントのたびにフォームが自動保存されます。
  • トリガー で、イベントの発生に基づいて、または特定の時間間隔の経過後に自動保存をトリガーするように設定します。

関連トピック see-also

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