ドキュメントAEM 6.5ユーザーガイド

チュートリアル：テンプレートの作成 tutorial-create-templates

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 管理者
  • ユーザー
  • 開発者

07-apply-rules-to-adaptive-form_small

これは、「最初のインタラクティブ通信の作成」シリーズを構成するチュートリアルです。チュートリアルの使用例全体を理解、実行、デモするために、シリーズを時系列に沿って実施することをお勧めします。

インタラクティブ通信を作成するには、AEM サーバーに用意されている印刷チャネルと web チャネル用のテンプレートを入手する必要があります。

印刷チャネルのテンプレートは Adobe Forms Designer で作成されて、AEM サーバーにアップロードされます。これらのテンプレートはインタラクティブ通信を作成する際に使用できるようになります。

Web チャネル用のテンプレートは AEM で作成されます。テンプレートの作成者と管理者は、web テンプレートの作成、編集、有効化を行うことができます。作成して有効化されたテンプレートは、インタラクティブ通信を作成する際に使用できるようになります。

このチュートリアルでは、印刷チャネルと web チャネル用のテンプレートを作成し、インタラクティブ通信の作成時に使用できるようにする手順を説明します。このチュートリアルを完了すると、次の操作を実行できるようになります。

  • Adobe Forms Designer を使用して印刷チャネル用の XDP テンプレートを作成
  • AEM Forms サーバーに XDP テンプレートをアップロード
  • Web チャネル用のテンプレートを作成し有効にする

印刷チャネル用のテンプレートを作成 create-template-for-print-channel

次のタスクを使用して、インタラクティブ通信の印刷チャネル用のテンプレートを作成および管理します。

Forms Designer を使用して XDP テンプレートを作成 create-xdp-template-using-forms-designer

ユースケースおよび分析に基づき、XDP テンプレート内に、次のサブフォームを作成します。

  • 請求明細：ドキュメントフラグメントが含まれます
  • 顧客情報：ドキュメントフラグメントが含まれます
  • 請求内容：ドキュメントフラグメントが含まれます
  • 概要：ドキュメントフラグメント（料金のサブフォーム）とグラフ（グラフのサブフォーム）が含まれます
  • 通話明細：テーブル（レイアウトフラグメント）が含まれます
  • Pay Now：画像が含まれます
  • 付加価値サービス：画像が含まれます

create_print_template

XDP ファイルを Forms サーバーにアップロードすると、これらのサブフォームは印刷テンプレートのターゲット領域として表示されます。インタラクティブ通信の作成時に、ドキュメントフラグメント、グラフ、レイアウトフラグメント、画像などのすべてのエンティティが、ターゲット領域に追加されます。

印刷チャネル用の XDP テンプレートを作成するには、次の手順を実行します。

  1. テンプレート作成用のフォームを表示するには、Forms Designer を開き、ファイル／新規／空白のフォームを使用を選択し、「次へ」、「完了」の順に選択します。

    ウィンドウ ​メニューから「オブジェクトライブラリ」および「オブジェクト」オプションが選択されていることを確認します。

  2. サブフォーム ​コンポーネントを​ オブジェクトライブラリ ​からフォームにドラッグアンドドロップします。

  3. サブフォームを選択すると、右側のペインの​ オブジェクト ​ウィンドウにサブフォームのオプションが表示されます。

  4. 「サブフォーム」タブを選択し、「コンテンツ」ドロップダウンリストから「フローレイアウト」を選択します。長さを調整するには、サブフォームの左側のエンドポイントをドラッグします。

  5. 「連結」タブで、次の手順を実行します。

    1. 「名前」フィールドに、BillDetails と入力します。

    2. 「データ連結」ドロップダウンリストから「データ連結なし」を選択します。

    Designer サブフォーム

  6. 同様に、ルートサブフォームを選択し、「サブフォーム」タブを選択し、「コンテンツ」ドロップダウンリストから「フローレイアウト」を選択します。「連結」タブで、次の手順を実行します。

    1. 「名前」フィールドに TelecaBill と入力します。

    2. 「データ連結」ドロップダウンリストから「データ連結なし」を選択します。

    印刷テンプレートのサブフォーム

  7. 手順 2～5 を繰り返して、以下のサブフォームを作成します。

    • BillDetails

    • CustomerDetails

    • BillSummary

    • 概要 - このサブフォームの「サブフォーム」タブを選択し、「コンテンツ」ドロップダウンリストから「配置済み」を選択します。以下のサブフォームを​ 概要 ​サブフォームに挿入します。

      • 料金
      • グラフ

    • ItemisedCalls

    • PayNow

    • ValueAddedServices

    時間を節約するために、既存のサブフォームをコピー＆ペーストして新しいサブフォームを作成することもできます。

    グラフ ​サブフォームを料金サブフォームの右側にシフトするには、左側のペインから​ グラフ ​サブフォーム、「レイアウト」タブの順に選択し、AnchorX フィールドの値を指定します。指定する値は、料金 ​サブフォームの​ 幅 ​フィールドの値よりも大きい値である必要があります。料金 ​サブフォームを選択し、「レイアウト」タブを選択すると、幅 ​フィールドの値を表示できます。

  8. テキスト ​オブジェクトを、オブジェクトライブラリ ​からフォームにドラッグアンドドロップし、ボックスに Dial XXXX to subscribe とテキストを入力します。

  9. 左側のペインのテキストオブジェクトを右クリックし、「オブジェクト名の変更」を選択し、「登録」として、テキストオブジェクト名を入力します。

    XDP テンプレート

  10. ローカルのファイルシステムにファイルを保存するには、ファイル／名前を付けて保存 ​を選択して、次の手順を実行します。

    1. ファイルを保存できる場所に移動し、名前を create_first_ic_print_template として指定します。

    2. ファイルのタイプ ​ドロップダウンリストから .xdp を選択します。

    3. 「保存」を選択します。

AEM Forms サーバーに XDP テンプレートをアップロード upload-xdp-template-to-the-aem-forms-server

Forms Designer を使用して XDP テンプレートを作成したら、インタラクティブ通信の作成中にテンプレートを使用できるように、作成したテンプレートを AEM Forms サーバーにアップロードする必要があります。

  1. フォーム／フォームとドキュメント ​を選択します。

  2. 作成／ファイルのアップロード ​を選択します。

    create_first_ic_print_template テンプレート（XDP）に移動してこれを選択し、「開く」を選択して、XDP テンプレートを AEM Forms サーバーに読み込みます。

レイアウトフラグメント用に XDP テンプレートを作成 create-xdp-template-for-layout-fragments

インタラクティブ通信の印刷チャネル用のレイアウトフラグメントを作成するには、Forms Designer を使用して XDP を作成し、AEM Forms サーバーにアップロードします。

  1. テンプレート作成用のフォームを表示するには、Forms Designer を開き、ファイル／新規／空白のフォームを使用を選択し、「次へ」、「完了」の順に選択します。

    「オブジェクトライブラリ」および「オブジェクト」オプションが Window メニューから選択されていることを確認します。

  2. テーブル ​コンポーネントを​ オブジェクトライブラリ ​からフォームにドラッグ＆ドロップします。

  3. テーブルの挿入ダイアログで、次の手順を実行します。

    1. 列数を 5 と指定します。
    2. ボディ行数を 1 と指定します。
    3. 「テーブルにヘッダー行を含む」チェックボックスを選択します。
    4. 「OK」をタップします。

  4. テーブル 1 の隣の左側のパネルで「+」を選択し、Cell1 を右クリックし、「オブジェクト名の変更」から「日付」を選択します。

    同様に、Cell2、Cell3、Cell4、および Cell5 の名前をそれぞれ​ 時間、番号、期間、および​ 料金 ​に変更します。

  5. 「Designer View」のヘッダーテキストフィールドをクリックして、それらの名前を​ 時刻、番号、時間 ​および​ 料金 ​に変更します。

    レイアウトフラグメント

  6. 左側のペインから​ Row 1 を選択し、「オブジェクト／連結／各データアイテムについて行を繰り返す」を選択します。

    レイアウトフラグメントのプロパティを繰り返す

  7. テキストフィールド ​コンポーネントを​ オブジェクトライブラリ ​から Designer View にドラッグ＆ドロップします。

    レイアウトフラグメントのテキストフィールド

    同様に、テキストフィールド ​コンポーネントを​ 時刻 ​行、番号 ​行、期間 ​行および​ 料金 ​行にドラッグ＆ドロップします。

  8. ローカルのファイルシステムにファイルを保存するには、ファイル／名前を付けて保存 ​を選択して、次の手順を実行します。

    1. ファイルを保存できる場所に移動し、名前を table_lf と指定します。

    2. ファイルのタイプ ​ドロップダウンリストから .xdp を選択します。

    3. 「保存」を選択します。

    Forms Designer を使用してレイアウトフラグメント用 XDP テンプレートを作成したら、レイアウトフラグメントの作成中に作成したテンプレートを使用できるように、AEM Forms サーバーにこのテンプレートをアップロードする必要があります。

Web チャネル用のテンプレートを作成 create-template-for-web-channel

次のタスクを使用して、インタラクティブ通信の web チャネル用のテンプレートの作成と管理を行います。

テンプレート用フォルダーを作成 create-folder-for-templates

Web チャネルテンプレートを作成するには、作成したテンプレートを保存できるフォルダーを定義します。フォルダー内にテンプレートを作成したら、そのテンプレートを有効にする必要があります。これにより、フォームユーザーがそのテンプレートを使用して、インタラクティブ通信の web チャネルを作成できるようになります。

編集可能なテンプレート用のフォルダーを作成するには、次の手順を実行します。

  1. ツール hammer-icon ／設定ブラウザー ​を選択します。

  2. 設定ブラウザーページで、「作成」を選択します。

  3. 設定を作成 ​ダイアログで、フォルダー用タイトルとして Create_First_IC_templates を指定し、「編集可能テンプレート」を指定し、「作成」を選択します。

    Web テンプレートの設定

    Create_First_IC_templates フォルダーが作成され、設定ブラウザー ​ページに表示されます。

テンプレートの作成 create-the-template

ユースケースおよび分析に基づき、web テンプレート内に、次のパネルを作成します。

  • 請求明細：ドキュメントフラグメントが含まれます
  • 顧客情報：ドキュメントフラグメントが含まれます
  • 請求内容：ドキュメントフラグメントが含まれます
  • 請求概要：ドキュメントフラグメントとグラフ（2 列のレイアウト）が含まれます
  • 通話明細：テーブルが含まれます
  • Pay Now：「Pay Now」ボタンと画像が含まれます
  • 付加価値サービス：画像と「登録」ボタンが含まれます。

create_web_template

ドキュメントフラグメント、グラフ、テーブル、画像、ボタンなどのすべてのエンティティが、インタラクティブ通信を作成する際に追加されます。

Create_First_IC_templates フォルダーで web チャネル用のテンプレートを作成するには、次の手順を実行します。

  1. ツール／テンプレート／Create_First_IC_templates フォルダーを選択して、適切なテンプレートフォルダーに移動します。

  2. 「作成」を選択します。

  3. 「テンプレートタイプを選択」設定ウィザードで、「インタラクティブ通信 - web チャネル」を選択し、「次へ」を選択します。

  4. 「テンプレート詳細」設定ウィザードで、テンプレートタイトルとして Create_First_IC_Web_Template を指定します。オプション内容を指定し、「作成」を選択します。

    Create_First_IC_Web_Template という確認メッセージが表示されます。

  5. 「開く」を選択して、テンプレートエディターでテンプレートを開きます。

  6. 「プレビュー」オプションの隣にあるドロップダウンリストから「初期コンテンツ」を選択します。

    テンプレートエディター

  7. テンプレートに追加できるコンポーネントの一覧を表示するには、ルートパネル／+ を選択します。

  8. ルートパネル ​の上にパネルを追加するには、リストから「パネル」を選択します。

  9. 左側のウィンドウで「コンテンツ」タブを選択します。手順 8 で追加された新しいパネルは、コンテンツツリーの​ ルートパネル ​の下に表示されます。

    コンテンツツリー

  10. パネルを選択し、 configure_icon （設定）を選択します。

  11. プロパティウィンドウで、次の手順を実行します。

    1. 名前フィールドに、BillDetails と入力します。

    2. タイトルフィールドに、請求明細 ​と入力します。

    3. 列数 ​ドロップダウンリストから、1 を選択します。

    4. プロパティを保存するには、「 保存 」を選択します。

    コンテンツツリーで、請求明細 ​にパネル名が更新されます。

  12. 手順 7～11 を繰り返し、次のプロパティを含むパネルをテンプレートに追加します。

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3
    名前 タイトル 列数
    customerdetails 顧客詳細 1
    billsummary 請求概要 1
    summarycharges 請求概要 2
    itemisedcalls 通話明細 1
    paynow 今すぐ払う 2
    vas 付加価値サービス 1

    次の画像は、すべてのパネルがテンプレートに追加された後のコンテンツツリーを示しています。

    すべてのパネルのコンテンツツリー

テンプレートの有効化 enable-the-template

Web テンプレートの作成が終わったら、インタラクティブ通信を作成する際に、そのテンプレートを有効にする必要があります。

AEM が画像を解決できるようにするには、次の操作を行います。

  1. ツール hammer-icon ／テンプレート ​を選択します。

  2. Create_First_IC_Web_Template テンプレートに移動して選択し、「有効」を選択します。

  3. 再度「有効にする」を選択して確認します。

    これでテンプレートが有効になり、テンプレートのステータスとして「有効」が表示されます。このテンプレートは、web チャネル用のインタラクティブ通信を作成する際に使用できます。

インタラクティブ通信でボタンの有効化 enabling-buttons-in-interactive-communications

ユースケースに基づき、「今すぐ払う」および「購入する」ボタン（アダプティブフォームコンポーネント）をインタラクティブ通信に含める必要があります。インタラクティブ通信でこれらのボタンの使用を有効にするには、次の手順を実行します。

  1. 「プレビュー」オプションの隣にあるドロップダウンリストから、「構造」を選択します。

  2. コンテンツツリーを使用して、ドキュメントコンテナ ​ルートパネルを選択し、「ポリシー」を選択して、インタラクティブ通信で使用が許可されているコンポーネントを選択します。

    ポリシーを設定

  3. プロパティ ​セクションの「許可されているコンポーネント」タブで、アダプティブフォーム ​コンポーネントから「ボタン」を選択します。

    許可されたコンポーネント

  4. プロパティを保存するには、「 保存 」を選択します。

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2