教學課程：建立交互通信

使用所有構成要素建立互動式通訊

本教學課程是建立第一個互動式通訊系列中的步驟。 建議您依序依序依序執行系列，以了解、執行和示範完整的教學課程使用案例。

在您為Web版本建立了所有構成塊（如表單資料模型、文檔片段、模板和主題）後，您就可以開始建立互動式通信。

互動式通訊可透過兩個通道提供：打印和Web。 您也可以建立以「打印」通道作為主資訊的互動式通信。 Web頻道的打印為主選項可確保從打印頻道派生Web頻道的內容、繼承和資料綁定。 它還確保在打印通道中所做的更改在Web通道中同步。 不過，互動式通訊作者可中斷網路通道中特定元件的繼承。

本教學課程會逐步帶您了解為列印和網頁頻道建立互動式通訊的步驟。 在本教學課程結束時，您將能夠：

• 為打印通道建立互動式通信
• 為Web通道建立互動式通信
• 以Print as Master建立打印和Web交互通信

建立不同步的打印和Web交互通信

建立打印通道的交互通信

以下是本教學課程中已建立且在為列印管道建立互動式通訊時所需的資源清單：

打印模板： 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. 點選​Create​並選取​Interactive Communication。 將顯示​建立交互通信​嚮導。

3. 在​Title​和​Name​欄位中指定​create_first_ic。 選擇「FDM_Create_First_IC」作為「表單資料模型」，然後點選「Next」。

4. 在​通道​嚮導中：

   1. 指定​create_first_ic_print_template​作為「打印」模板，然後點選​選擇。 確保未選中​使用打印作為Web通道的主版​複選框。
   2. 指定​Create_First_IC_templates​資料夾> Create_First_IC_Web_Template​作為Web模板，然後點選​Select。
   3. 點選​建立。

   將顯示一條確認消息，說明已成功建立互動式通信。

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

6. 前往​Assets​標籤，並套用篩選器以在左窗格中僅顯示檔案片段。

7. 在互動式通訊中，將下列檔案片段拖放至其目標區域：

   文件片段	目標區域
   bill_details_first_ic	BillDetails
   customer_details_first_ic	客戶詳細資訊
   bill_summary_first_ic	BillSummary
   summary_charges_first_interactive_communication	費用

   

8. 點選「Charts 」目標區域，然後點選「 + 」以新增「 Chart」元件。

9. 點選圖表元件，然後選取（設定）。 圖表屬性顯示在左窗格中：

   1. 指定圖表的名稱。
   2. 從​圖表類型​下拉清單中選擇​餅圖。
   3. 從​X軸​區段的​calls​資料模型物件類型中，選取​calltype​屬性。 點選。
   4. 從​函式​下拉清單中選擇​頻率。
   5. 在​Y軸​區段中，從​calls​資料模型物件類型中選取​calltype​屬性。 點選。
   6. 點選以儲存圖表屬性。

10. 前往​Assets​標籤，並套用篩選器以在左窗格中僅顯示版面片段。 拖放​table_lf​版面片段至​逐項呼叫​目標區域。

11. 選擇​Date​欄中的「文本欄位」，然後點選(Configure)。

12. 從​綁定類型​下拉清單中選擇​資料模型對象，然後選擇​調用 > 調用。 點選兩次以儲存屬性。

    同樣，為​Time、Number、callnumber、callduration​和​callcharges​中的文本欄位建立綁定，分別針對​Time、Number、 Duration 和<a14/​列。

13. 點選​PayNow​目標區域，然後點選​+​以新增​Image​元件。

14. 點選「影像」元件，然後選取(Configure)。 影像屬性會顯示在左窗格中：

    1. 在​名稱​欄位中，將​PayNow​指定為影像名稱。
    2. 點選「Upload」，選取儲存在本機檔案系統上的影像，然後點選「Open」。
    3. 點選以儲存影像屬性。

15. 重複步驟13和14以將​ValueAddedServices​影像添加到​ValueAddedServices​目標區域。

為Web通道建立互動式通信

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

Web模板： 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. 點選​Create​並選取​Interactive Communication。 將顯示​建立交互通信​嚮導。

3. 在​Title​和​Name​欄位中指定​create_first_ic。 選擇「FDM_Create_First_IC」作為「表單資料模型」，然後點選「Next」。

4. 在​通道​嚮導中：

   1. 指定​create_first_ic_print_template​作為「打印」模板，然後點選​選擇。 確保未選中​使用打印作為Web通道的主版​複選框。
   2. 指定​Create_First_IC_templates​資料夾> Create_First_IC_Web_Template​作為Web模板，然後點選​Select。
   3. 點選​建立。

   將顯示一條確認消息，說明已成功建立互動式通信。

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

6. 從左窗格點選​頻道​標籤，然後點選​Web。

7. 前往​Assets​標籤，並套用篩選器以在左窗格中僅顯示檔案片段。

8. 在互動式通訊中，將下列檔案片段拖放至其目標區域：

   文件片段	目標區域
   bill_details_first_ic	BillDetails
   customer_details_first_ic	客戶詳細資訊
   bill_summary_first_ic	BillSummary
   summary_charges_first_interactive_communication	費用

9. 點選「費用摘要」目標區域，然後點選「+」以新增「Chart」元件。

10. 點選圖表元件，然後選取（設定）。 圖表屬性顯示在左窗格中：

    1. 指定圖表的名稱。
    2. 從​圖表類型​下拉清單中選擇​餅圖。
    3. 從​X軸​區段的​calls​資料模型物件類型中，選取​calltype​屬性。 點選。
    4. 從​函式​下拉清單中選擇​頻率。
    5. 在​Y軸​區段中，從​calls​資料模型物件類型中選取​calltype​屬性。 點選。
    6. 點選以儲存圖表屬性。

11. 從左窗格中選擇​Data Sources​標籤，並將​calls​資料模型物件拖放至​Itemized Calls​目標區域。 calls​資料模型對象中的所有屬性在右窗格的​Itemized Calls​目標區域中顯示為表列。

    根據使用案例，您需要表中的「呼叫日期」、「呼叫時間」、「呼叫號碼」、「呼叫持續時間」和「呼叫費用」列。

    

12. 選擇​Mobilenum​表列標題，然後選擇​更多選項 > 刪除列。 同樣地，請刪除​Calltype​列。

13. 選擇​Calldate​表列標題，然後點選(Edit)，將文本更名為​Call Date。 同樣地，更名表中的其他列標題。

14. 根據使用案例，在「交互通信」中插入​立即支付​按鈕，該按鈕通過按一下按鈕為用戶提供付款選項。 執行下列步驟以插入按鈕：

    1. 點選​立即付費​目標區域，然後點選​+​以新增​文字​元件。
    2. 點選文字元件，然後點選（編輯）。
    3. 將文字重新命名為​立即支付。
    4. 選取文字，然後點選「超連結」圖示。
    5. 在​Path​欄位中指定付款URL。
    6. 從​Target​下拉式清單中選取​新增標籤。
    7. 點選以儲存超連結屬性。

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

    

16. 使用以下步驟設定超連結文本的樣式，以將其顯示為「互動式通信」中的按鈕：

    1. 點選文字元件並選取（編輯）。
    2. 在​邊框​部分中，將​1.5px​指定為​邊框寬度，選擇​Solid​為​邊框樣式，並將​46px​指定為​邊框半徑。
    3. 從​Background​部分選擇紅色作為按鈕的背景顏色。
    4. 在​Margin​欄位(Dimension與位置)區段中，點選​Edit montiwle​圖示，並將​Right​邊界設為​450px。 頂端、底部和左側欄位設為空白。

    

17. 點選​立即付費​目標區域，然後點選​+​以新增​影像​元件。

18. 點選「影像」元件，然後選取(Configure)。 影像屬性會顯示在左窗格中：

    1. 在​名稱​欄位中，將​PayNow​指定為影像名稱。
    2. 點選「Upload」，選取儲存在本機檔案系統上的「PayNowWeb」影像，然後點選「Open」。
    3. 點選以儲存影像屬性。

19. 根據使用案例，在交互通信中插入​訂閱​按鈕，該按鈕通過按一下按鈕為用戶提供訂購增值服務的選項。

    重複步驟13 - 17，將​訂閱​按鈕添加到​增值服務​目標區域並添加​增值服務Web​影像。

使用自動同步建立用於打印和Web的交互通信

您也可以啟用打印和Web通道之間的自動同步，以建立互動式通信。 要啟用自動同步，請在建立交互通信時選擇打印為主選項。 選擇「打印為主版」選項可確保從打印通道派生Web通道的內容、繼承和資料綁定。 它還可確保在「列印」管道中所做的變更反映在Web管道中。

執行下列步驟以衍生使用列印頻道的網頁頻道內容：

1. 登入AEM製作例項，並導覽至​Adobe Experience Manager > Forms > Forms與檔案。

2. 點選​Create​並選取​Interactive Communication。 將顯示​建立交互通信​嚮導。

3. 在​Title​和​Name​欄位中指定​create_first_ic。 選擇「FDM_Create_First_IC」作為「表單資料模型」，然後點選「Next」。

4. 在​通道​嚮導中：

   1. 指定​create_first_ic_print_template​作為「打印」模板，然後點選​選擇。
   2. 選中​使用打印作為Web通道的主框​複選框。
   3. 指定​Create_First_IC_templates​資料夾> Create_First_IC_Web_Template​作為Web模板，然後點選​Select。
   4. 點選​建立。

   將顯示一條確認消息，說明已成功建立互動式通信。

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

6. 執行建立用於打印通道的互動式通信部分的步驟6 - 15。

7. 從左窗格點選​頻道​標籤，然後點選​Web​以從列印頻道自動產生Web頻道的內容。

8. 由於在步驟4中選中了​使用打印作為Web頻道的主複選框，因此從打印頻道自動為Web頻道生成內容和綁定。

   打印頻道內容插入到Web頻道模板內容的下方。 若要修改已從列印頻道自動產生的網頁頻道內容，您可以取消任何目標區域的繼承。

   暫留在Web通道中的相關目標區域上，選擇（取消繼承），然後在​取消繼承​對話方塊中，點選​是。

   

   如果已取消元件的繼承，則可重新啟用它。 若要重新啟用繼承，請將滑鼠移至包括元件的相關目標區域的邊界上，然後點選。

9. 在左窗格中選擇​Content​頁簽。

10. 使用內容樹狀結構，將自動產生的網頁頻道內容拖放至網頁範本中的現有面板。 以下是需要重新排列的元件清單：

    • 清單詳細資訊元件至清單詳細資訊面板
    • 客戶詳細資訊元件至「客戶詳細資訊」面板
    • 清單匯總元件至清單匯總面板
    • 「費用匯總」元件至「費用匯總」面板
    • 配置片段（表格）至「分項呼叫」面板

    

11. 重複為Web通道建立互動式通信的步驟13 - 18，以在互動式通信的Web通道中插入​立即支付​和​訂閱​超連結。