チュートリアル:テンプレートの作成

インタラクティブ通信用の印刷テンプレートと Web テンプレートの作成

07-apply-rules-to-adaptive-form_small

このチュートリアルは、最初のインタラクティブ通信シリーズの手順です。 チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。

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

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

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

本チュートリアルは、印刷チャネル用および Web チャネル用のテンプレートの作成方法を順を追って説明します。これにより、作成されたテンプレートは、インタラクティブ通信を作成する際に使用できるようになります。このチュートリアルを完了すると、次の操作を実行できるようになります。

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

印刷チャネル用のテンプレートの作成

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

Forms Designer を使用して XDP テンプレートを作成する

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

  • 請求明細:ドキュメントフラグメントが含まれます
  • 顧客の詳細:ドキュメントフラグメントを含める
  • 請求要約:ドキュメントフラグメントを含める
  • 概要:ドキュメントフラグメント(Chargesサブフォーム)とグラフ(Chartsサブフォーム)が含まれます
  • 通話明細:テーブル(レイアウトフラグメント)を含めます
  • 今すぐ支払う:画像を含む
  • 付加価値サービス:画像を含む

create_print_template

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

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

  1. Forms Designerを開き、ファイル / 新規 / 空白のフォームを使用し、次へ」をタップしてから、「完了」をタップしてテンプレート作成用のフォームを開きます。

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

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

  3. 右側のペインの「オブジェクト」ウィンドウのサブフォームを表示するには、「サブフォーム」を選択します。

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

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

    1. 名前」フィールドに​BillDetails​を指定します。
    2. データ連結」ドロップダウンリストから「データ連結なし」を選択します。

    forms_designer_subform

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

    1. 名前」フィールドに​TelecaBill​を指定します。
    2. データ連結」ドロップダウンリストから「データ連結なし」を選択します。

    root_subform_print_template

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

    • BillDetails

    • CustomerDetails

    • BillSummary

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

      • 料金
      • グラフ
    • ItemisedCalls

    • PayNow

    • ValueAddedServices

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

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

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

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

    print_xdp_template_subform

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

    1. ファイルを保存する場所に移動し、create_first_ic_print_template と名前を指定します。
    2. ファイルの種類」ドロップダウンリストから​.xdp を選択します。
    3. 保存」をタップします。

AEM Forms サーバーに XDP テンプレートをアップロードする

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

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

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

    create_first_ic_print_template​テンプレート(XDP)に移動して選択し、「開く」​をタップして、XDPテンプレートをAEM Formsサーバーに読み込みます。

レイアウトフラグメント用に XDP テンプレートを作成する

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

  1. Forms Designerを開き、ファイル / 新規 / 空白のフォームを使用し、次へ」をタップしてから、「完了」をタップしてテンプレート作成用のフォームを開きます。

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

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

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

    1. 列数を 5 と指定します。
    2. ボディ行数を 1 と指定します。
    3. テーブルにヘッダー行を含む」チェックボックスを選択します。
    4. OK」をタップします。
  4. テーブル 1 の隣の左側のペインで「+」をタップし、Cell1 を右クリックし、「オブジェクト名の変更」を「日付」に選択します。

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

  5. Designer View​のヘッダーテキストフィールドをクリックし、名前を​時間数値期間料金​に変更します。

    layout_fragment_print

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

    layout_fragment_print_repeat

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

    layout_fragment_print_text_field

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

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

    1. ファイルを保存する場所に移動し、名前を​table_lf​に指定します。
    2. ファイルの種類」ドロップダウンリストから​.xdp を選択します。
    3. 保存」をタップします。

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

Web チャネル用テンプレートの作成

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

テンプレート用フォルダーの作成

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

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

  1. ツール ツール / 設定ブラウザー​をタップします。

    • 詳しくは、🔗設定ブラウザーのドキュメントを参照してください。
  2. 設定ブラウザーページで、「作成」をタップします。

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

    create_first_ic_web_template

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

テンプレートの作成

使用例分析に基づいて、Webテンプレートに次のパネルを作成します。

  • 請求明細:ドキュメントフラグメントが含まれます
  • 顧客の詳細:ドキュメントフラグメントを含める
  • 請求要約:ドキュメントフラグメントを含める
  • 料金概要:ドキュメントフラグメントとグラフ(2列レイアウト)を含めます
  • 通話明細:テーブルを含む
  • 今すぐ支払う:「今すぐ支払う」​ボタンと画像が含まれます
  • 付加価値サービス:画像と「購読」ボタンが含まれます。

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

    template_editor_initial_content

  7. ルートパネル​をタップし、+​をタップして、テンプレートに追加できるコンポーネントのリストを表示します。

  8. コンポーネントの一覧から、ルートパネル​の上に追加する「パネル」を選択します。

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

    content_tree_root_panel

  10. パネルを選択し、configure_icon(設定)をタップします。

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

    1. 「名前」フィールドに​billdetails と入力します。
    2. 「タイトル」フィールドに、請求明細​と入力します。
    3. 列数」ドロップダウンリストから、1 を選択します。
    4. done_iconをタップして、プロパティを保存します。

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

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

    名前 タイトル 列数
    customerdetails 顧客情報 1
    billsummary 請求内容 1
    summarycharges 請求概要 2
    itemisedcalls 通話明細 1
    paynow Pay Now 2
    vas 付加価値サービス 1

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

    content_tee_all_panels

テンプレートの有効化

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

Web テンプレートを有効にするには、次の手順を実行します。

  1. ツール ツール / テンプレート​をタップします。

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

  3. 再度「有効」をタップして確認します。

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

インタラクティブ通信でボタンの有効化

ユースケースに基づき、「Pay Now」および「登録」ボタン(アダプティブフォームコンポーネント)をインタラクティブ通信に含める必要があります。インタラクティブ通信でこれらのボタンの仕様を有効にするには、次の手順を実行します。

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

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

    structure_configure_policy

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

    allowed_components_af

  4. done_iconをタップして、プロパティを保存します。

このページ