教學課程:建立互動式通訊 tutorial-create-interactive-communication

09-style-your-adaptive-form-small

此教學課程是建立您的第一個互動式通訊系列中的步驟。 建議您依照序列時間順序來瞭解、執行和示範完整的教學課程使用案例。

一旦您建立了Web版本的所有建置區塊(例如表單資料模型、檔案片段、範本和主題),您就可以開始建立互動式通訊。

互動式通訊可透過兩種通道提供:列印和網路。 您也可以建立以Print channel為主體的互動式通訊。 Web channel的「列印為主版」選項可確保Web channel的內容、繼承和資料繫結衍生自Print channel。 它也能確保在Print channel中所做的變更在Web channel中同步。 不過,互動式通訊作者可在Web channel中中斷特定元件的繼承。

本教學課程將逐步引導您完成為列印和Web管道建立互動式通訊的步驟。 在本教學課程結束時,您將能夠:

  • 為列印管道建立互動式通訊
  • 建立Web channel的互動式通訊
  • 以Print as Master建立列印和Web互動式通訊

建立列印與網頁的互動式通訊,無需同步處理 create-interactive-communications-for-print-and-web-with-no-synchronization

為列印管道建立互動式通訊 create-interactive-communication-for-print-channel

以下是已在本教學課程中建立且在建立Print channel的互動式通訊時所需的資源清單:

列印範本: create_first_ic_print_template

表單資料模型: FDM_Create_First_IC

檔案片段: bill_details_first_ic, customer_details_first_ic, bill_summary_first_ic, summary_charges_first_ic

佈局片段: table_lf

影像: PayNow與ValueAddedServices

  1. 登入AEM作者執行個體並導覽至​ Adobe Experience Manager > Forms > Forms和檔案

  2. 選取​ 建立 ​並選取​ 互動式通訊。 顯示​ 建立互動式通訊 ​精靈。

  3. 在​ Title ​和​ Name ​欄位中指定​ create_first_ic。 選取​ FDM_Create_First_IC ​作為表單資料模型,並選取​ 下一步

  4. 在​ 管道 ​精靈中:

    1. 將​ create_first_ic_print_template ​指定為列印範本,並選取​ 選取。 確保未選取​ Web Channel的[使用列印為主版] ​核取方塊。

    2. 將​ Create_First_IC_templates ​資料夾> Create_First_IC_Web_Template ​指定為Web範本,並選取​ 選取

    3. 選取「建立」。

    系統會顯示確認訊息,指出已成功建立互動式通訊。

  5. 選取​ 編輯 ​以在右窗格中開啟互動式通訊。

  6. 移至​ Assets ​索引標籤並套用篩選,以在左窗格中僅顯示檔案片段。

  7. 將下列檔案片段拖放至互動式通訊中的目標區域:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
    文件片段 目標區域
    bill_details_first_ic 帳單詳細資訊
    customer_details_first_ic 客戶詳細資料
    bill_summary_first_ic 帳單摘要
    summary_charges_first_interactive_communication 費用

    互動式通訊的檔案片段

  8. 選取​ 圖表 ​目標區域,並選取​ + ​以新增​ 圖表 ​元件。

  9. 選取圖表元件,然後選取 configure_icon (設定)。 圖表屬性會顯示在左窗格中:

    1. 指定圖表的名稱。
    2. 從​ 圖表型別 ​下拉式清單中選取​ 圓形圖
    3. 從​ X軸 ​區段中的​ calls ​資料模型物件型別中選取​ calltype ​屬性。 選取 完成圖示
    4. 從​ 函式 ​下拉式清單中選取​ 頻率
    5. 從​ Y軸 ​區段中的​ calls ​資料模型物件型別中選取​ calltype ​屬性。 選取 完成圖示
    6. 選取 done_icon 以儲存圖表屬性。
  10. 前往​ Assets ​索引標籤並套用篩選器,以在左窗格中僅顯示佈局片段。 將​ table_lf ​佈局片段拖放至​ 分項呼叫 ​目標區域。

  11. 選取​ Date ​欄中的[文字欄位]並選取 configure_icon (設定)。

  12. 從​ 繫結型別 ​下拉式清單中選取​ 資料模型物件,然後選取​ 呼叫 > 呼叫日期。 選取 done_icon 兩次,以儲存屬性。

    同樣地,針對​ TimeNumberDuration ​和​ Charges ​欄中的文字欄位,分別建立具有​ calltimecallnumbercallduration ​和​ callcharges ​的繫結。

  13. 選取​ PayNow ​目標區域,並選取​ + ​以新增​ Image ​元件。

  14. 選取影像元件,然後選取 configure_icon (Configure)。 影像屬性會顯示在左窗格中:

    1. 在​ Name ​欄位中指定​ PayNow ​作為影像的名稱。
    2. 選取​ 上傳,選取儲存在本機檔案系統上的影像,然後選取​ 開啟
    3. 選取 done_icon 以儲存影像屬性。
  15. 重複步驟13和14,將​ ValueAddedServices ​影像新增至​ ValueAddedServices ​目標區域。

建立Web channel的互動式通訊 create-interactive-communication-for-web-channel

以下是已在本教學課程中建立且在建立Web channel的互動式通訊時所需的資源清單:

網頁範本: Create_First_IC_Web_Template

表單資料模型: FDM_Create_First_IC

檔案片段: bill_details_first_ic, customer_details_first_ic, bill_summary_first_ic, summary_charges_first_ic

影像: PayNowWeb和ValueAddedServicesWeb

  1. 登入AEM作者執行個體並導覽至​ Adobe Experience Manager > Forms > Forms和檔案

  2. 選取​ 建立 ​並選取​ 互動式通訊。 顯示​ 建立互動式通訊 ​精靈。

  3. 在​ Title ​和​ Name ​欄位中指定​ create_first_ic。 選取​ FDM_Create_First_IC ​作為表單資料模型,並選取​ 下一步

  4. 在​ 管道 ​精靈中:

    1. 將​ create_first_ic_print_template ​指定為列印範本,並選取​ 選取。 確保未選取​ Web Channel的[使用列印為主版] ​核取方塊。

    2. 將​ Create_First_IC_templates ​資料夾> Create_First_IC_Web_Template ​指定為Web範本,並選取​ 選取

    3. 選取「建立」。

    系統會顯示確認訊息,指出已成功建立互動式通訊。

  5. 選取​ 編輯 ​以在右窗格中開啟互動式通訊。

  6. 從左窗格中選取​ 管道 ​標籤,然後選取​ 網頁

  7. 移至​ Assets ​索引標籤並套用篩選,以在左窗格中僅顯示檔案片段。

  8. 將下列檔案片段拖放至互動式通訊中的目標區域:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
    文件片段 目標區域
    bill_details_first_ic 帳單詳細資訊
    customer_details_first_ic 客戶詳細資料
    bill_summary_first_ic 帳單摘要
    summary_charges_first_interactive_communication 費用
  9. 選取​ 費用摘要 ​目標區域,並選取​ + ​以新增​ 圖表 ​元件。

  10. 選取圖表元件,然後選取 configure_icon (設定)。 圖表屬性會顯示在左窗格中:

    1. 指定圖表的名稱。

    2. 從​ 圖表型別 ​下拉式清單中選取​ 圓形圖

    3. 從​ X軸 ​區段中的​ calls ​資料模型物件型別中選取​ calltype ​屬性。 選取 完成圖示

    4. 從​ 函式 ​下拉式清單中選取​ 頻率

    5. 從​ Y軸 ​區段中的​ calls ​資料模型物件型別中選取​ calltype ​屬性。 選取 完成圖示

    6. 選取 done_icon 以儲存圖表屬性。

  11. 從左窗格選取​ 資料來源 ​標籤,並將​ 呼叫 ​資料模型物件拖放至​ 分項呼叫 ​目標區域。 呼叫 ​資料模型物件中的所有屬性都會顯示為右窗格中​ 分項呼叫 ​目標區域中的資料表資料行。

    根據使用案例,您需要在表格中建立「通話日期」、「通話時間」、「通話號碼」、「通話持續時間」和「通話費用」欄。

    互動式通訊的 資料表

  12. 選取​ Mobilenum ​資料表資料行標題,然後選取​ 其他選項 > 刪除資料行。 同樣地,刪除​ Calltype ​資料行。

  13. 選取​ Calldate ​資料表資料行標題並選取 編輯 (編輯)以將文字重新命名為​ 呼叫日期。 同樣地,重新命名表格中的其他欄標題。

  14. 根據使用案例,在互動式通訊中插入​ 立即付款 ​按鈕,使用者可透過按一下按鈕選擇付款。 執行以下步驟來插入按鈕:

    1. 選取​ 立即付款 ​目標區域,並選取​ + ​以新增​ 文字 ​元件。

    2. 選取文字元件並選取 編輯 (編輯)。

    3. 將文字重新命名為​ 立即付款

    4. 選取文字並選取「超連結」圖示。

    5. 在​ 路徑 ​欄位中指定付款URL。

    6. 從​ Target ​下拉式清單中選取​ 新索引標籤

    7. 選取 done_icon 以儲存超連結屬性。

  15. 從​ 預覽 ​選項旁的下拉式清單中選取​ 樣式

    選取互動式通訊的樣式模式

  16. 使用下列步驟,設定超連結文字的樣式,使其在互動式通訊中顯示為按鈕:

    1. 選取文字元件並選取 編輯 (編輯)。

    2. 在​ 邊框 ​區段中,將​ 1.5px ​指定為​ 邊框寬度,選取​ 實線 ​作為​ 邊框樣式,並將​ 46px ​指定為​ 邊框半徑

    3. 從​ 背景 ​區段中選取紅色作為按鈕的背景顏色。

    4. 在​ Dimension與位置 ​區段的​ 邊界 ​欄位中,選取​ 同時編輯 ​圖示,並將​ 右側 ​邊界設定為​ 450px。 「上」、「下」和「左」欄位會設為空白。

    在互動式通訊中插入超連結

  17. 選取​ 立即付款 ​目標區域,並選取​ + ​以新增​ Image ​元件。

  18. 選取影像元件,然後選取 configure_icon (Configure)。 影像屬性會顯示在左窗格中:

    1. 在​ Name ​欄位中指定​ PayNow ​作為影像的名稱。

    2. 選取​ 上傳,選取儲存在本機檔案系統上的​ PayNowWeb ​影像,然後選取​ 開啟

    3. 選取 done_icon 以儲存影像屬性。

  19. 根據使用案例,在互動式通訊中插入​ 訂閱 ​按鈕,使用者可透過按一下按鈕選擇訂閱加值服務。

    重複步驟13至17,將​ 訂閱 ​按鈕新增至​ 加值服務 ​目標區域,並新增​ ValueAddedServicesWeb ​影像。

使用自動同步處理建立列印與Web的互動式通訊 create-interactive-communications-for-print-and-web-with-auto-synchronization

您也可以透過啟用列印和Web通道之間的自動同步來建立互動式通訊。 若要啟用自動同步化,請在建立互動式通訊時選取「列印為主版」選項。 選取「列印為主版」選項,可確保Web channel的內容、繼承和資料繫結衍生自Print channel。 它也能確保在列印管道中所做的變更反映在網頁管道中。

執行以下步驟,衍生使用Print channel的Web channel內容:

  1. 登入AEM作者執行個體並導覽至​ Adobe Experience Manager > Forms > Forms和檔案

  2. 選取​ 建立 ​並選取​ 互動式通訊。 顯示​ 建立互動式通訊 ​精靈。

  3. 在​ Title ​和​ Name ​欄位中指定​ create_first_ic。 選取​ FDM_Create_First_IC ​作為表單資料模型,並選取​ 下一步

  4. 在​ 管道 ​精靈中:

    1. 將​ create_first_ic_print_template ​指定為列印範本,並選取​ 選取

    2. 選取​ 使用Web Channel的[列印為主版] ​核取方塊。

    3. 將​ Create_First_IC_templates ​資料夾> Create_First_IC_Web_Template ​指定為Web範本,並選取​ 選取

    4. 選取「建立」。

    系統會顯示確認訊息,指出已成功建立互動式通訊。

  5. 選取​ 編輯 ​以在右窗格中開啟互動式通訊。

  6. 執行為列印通道區段建立互動式通訊的步驟6至15。

  7. 從左窗格選取​ 管道 ​標籤,並選取​ Web ​以從Print channel自動產生Web channel的內容。

  8. 由於已在步驟4中選取​ 使用Print as Master for Web Channel ​核取方塊,因此內容和繫結會從Print channel自動產生Web channel。

    列印管道內容會插入Web channel範本內容下方。 若要修改已從列印管道自動產生的Web channel內容,您可以取消任何目標區域的繼承。

    將游標停留在Web Channel的相關目標區域上,並選取 取消繼承 (取消繼承),然後在​ 取消繼承 ​對話方塊中,選取​

    取消繼承

    如果您已取消元件的繼承,則可重新啟用它。 若要重新啟用繼承,請將游標停留在相關目標區域(包含元件)的邊界上,然後選取 reenableinheritance

  9. 在左窗格中選取​ Content ​標籤。

  10. 使用內容樹將自動產生的Web channel內容拖放到Web範本中的現有面板。 以下是需要重新排列的元件清單:

    • 「用料表詳細資訊」面板的「用料表詳細資訊」元件
    • 「客戶詳細資料」面板的「客戶詳細資料」元件
    • 「用料表彙總」面板的「用料表彙總」元件
    • 「費用彙總」元件至「費用彙總」面板
    • 將片段(表格)配置到分項呼叫面板

    網頁內容樹狀結構

  11. 重複步驟13 - 18 (共個)建立Web管道的互動式通訊,以將​ 立即付款 ​和​ 訂閱 ​超連結插入互動式通訊的Web管道中。

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