教學課程：建立交互通信

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

設定互動式通訊

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

在您為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

登入AEM製作例項，並導覽至Adobe Experience Manager > Forms > Forms與檔案。
點選Create並選取Interactive Communication。將顯示建立交互通信嚮導。
在Title和Name欄位中指定create_first_ic。選擇「FDM_Create_First_IC」作為「表單資料模型」，然後點選「Next」。
在通道嚮導中：
1. 指定create_first_ic_print_template作為「打印」模板，然後點選選擇。確保未選中使用打印作為Web通道的主版複選框。
2. 指定Create_First_IC_templates資料夾> Create_First_IC_Web_Template作為Web模板，然後點選Select。
3. 點選建立。
將顯示一條確認消息，說明已成功建立互動式通信。
點選編輯以開啟右窗格中的互動式通訊。
前往Assets標籤，並套用篩選器以在左窗格中僅顯示檔案片段。

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

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

create_first_ic_doc_fragments

點選「Charts 」目標區域，然後點選「 + 」以新增「 Chart」元件。
點選圖表元件，然後選取（設定）。圖表屬性顯示在左窗格中：
1. 指定圖表的名稱。
2. 從圖表類型下拉清單中選擇餅圖。
3. 從X軸區段的calls資料模型物件類型中，選取calltype屬性。點選。
4. 從函式下拉清單中選擇頻率。
5. 在Y軸區段中，從calls資料模型物件類型中選取calltype屬性。點選。
6. 點選以儲存圖表屬性。
前往Assets標籤，並套用篩選器以在左窗格中僅顯示版面片段。拖放table_lf版面片段至逐項呼叫目標區域。
選擇Date欄中的「文本欄位」，然後點選(Configure)。
從綁定類型下拉清單中選擇資料模型對象，然後選擇調用 > 調用。點選兩次以儲存屬性。

同樣，為Time、Number、callnumber、callduration和callcharges中的文本欄位建立綁定，分別針對Time、Number、 Duration 和<a14/列。
點選PayNow目標區域，然後點選+以新增Image元件。
點選「影像」元件，然後選取(Configure)。影像屬性會顯示在左窗格中：
1. 在名稱欄位中，將PayNow指定為影像名稱。
2. 點選「Upload」，選取儲存在本機檔案系統上的影像，然後點選「Open」。
3. 點選以儲存影像屬性。
重複步驟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

登入AEM製作例項，並導覽至Adobe Experience Manager > Forms > Forms與檔案。
點選Create並選取Interactive Communication。將顯示建立交互通信嚮導。
在Title和Name欄位中指定create_first_ic。選擇「FDM_Create_First_IC」作為「表單資料模型」，然後點選「Next」。
在通道嚮導中：
1. 指定create_first_ic_print_template作為「打印」模板，然後點選選擇。確保未選中使用打印作為Web通道的主版複選框。
2. 指定Create_First_IC_templates資料夾> Create_First_IC_Web_Template作為Web模板，然後點選Select。
3. 點選建立。
將顯示一條確認消息，說明已成功建立互動式通信。
點選編輯以開啟右窗格中的互動式通訊。
從左窗格點選頻道標籤，然後點選Web。
前往Assets標籤，並套用篩選器以在左窗格中僅顯示檔案片段。

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

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

點選「費用摘要」目標區域，然後點選「+」以新增「Chart」元件。
點選圖表元件，然後選取（設定）。圖表屬性顯示在左窗格中：
1. 指定圖表的名稱。
2. 從圖表類型下拉清單中選擇餅圖。
3. 從X軸區段的calls資料模型物件類型中，選取calltype屬性。點選。
4. 從函式下拉清單中選擇頻率。
5. 在Y軸區段中，從calls資料模型物件類型中選取calltype屬性。點選。
6. 點選以儲存圖表屬性。
從左窗格中選擇Data Sources標籤，並將calls資料模型物件拖放至Itemized Calls目標區域。 calls資料模型對象中的所有屬性在右窗格的Itemized Calls目標區域中顯示為表列。

根據使用案例，您需要表中的「呼叫日期」、「呼叫時間」、「呼叫號碼」、「呼叫持續時間」和「呼叫費用」列。
選擇Mobilenum表列標題，然後選擇更多選項 > 刪除列。同樣地，請刪除Calltype列。
選擇Calldate表列標題，然後點選(Edit)，將文本更名為Call Date。同樣地，更名表中的其他列標題。
根據使用案例，在「交互通信」中插入立即支付按鈕，該按鈕通過按一下按鈕為用戶提供付款選項。執行下列步驟以插入按鈕：
1. 點選立即付費目標區域，然後點選+以新增文字元件。
2. 點選文字元件，然後點選（編輯）。
3. 將文字重新命名為立即支付。
4. 選取文字，然後點選「超連結」圖示。
5. 在Path欄位中指定付款URL。
6. 從Target下拉式清單中選取新增標籤。
7. 點選以儲存超連結屬性。
從預覽選項旁的下拉清單中選擇樣式。
使用以下步驟設定超連結文本的樣式，以將其顯示為「互動式通信」中的按鈕：
1. 點選文字元件並選取（編輯）。
2. 在邊框部分中，將1.5px指定為邊框寬度，選擇Solid為邊框樣式，並將46px指定為邊框半徑。
3. 從Background部分選擇紅色作為按鈕的背景顏色。
4. 在Margin欄位(Dimension與位置)區段中，點選Edit montiwle圖示，並將Right邊界設為450px。頂端、底部和左側欄位設為空白。
點選立即付費目標區域，然後點選+以新增影像元件。
點選「影像」元件，然後選取(Configure)。影像屬性會顯示在左窗格中：
1. 在名稱欄位中，將PayNow指定為影像名稱。
2. 點選「Upload」，選取儲存在本機檔案系統上的「PayNowWeb」影像，然後點選「Open」。
3. 點選以儲存影像屬性。
根據使用案例，在交互通信中插入訂閱按鈕，該按鈕通過按一下按鈕為用戶提供訂購增值服務的選項。

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

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

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

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

登入AEM製作例項，並導覽至Adobe Experience Manager > Forms > Forms與檔案。
點選Create並選取Interactive Communication。將顯示建立交互通信嚮導。
在Title和Name欄位中指定create_first_ic。選擇「FDM_Create_First_IC」作為「表單資料模型」，然後點選「Next」。
在通道嚮導中：
1. 指定create_first_ic_print_template作為「打印」模板，然後點選選擇。
2. 選中使用打印作為Web通道的主框複選框。
3. 指定Create_First_IC_templates資料夾> Create_First_IC_Web_Template作為Web模板，然後點選Select。
4. 點選建立。
將顯示一條確認消息，說明已成功建立互動式通信。
點選編輯以開啟右窗格中的互動式通訊。
執行建立用於打印通道的互動式通信部分的步驟6 - 15。
從左窗格點選頻道標籤，然後點選Web以從列印頻道自動產生Web頻道的內容。
由於在步驟4中選中了使用打印作為Web頻道的主複選框，因此從打印頻道自動為Web頻道生成內容和綁定。

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

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

如果已取消元件的繼承，則可重新啟用它。若要重新啟用繼承，請將滑鼠移至包括元件的相關目標區域的邊界上，然後點選。
在左窗格中選擇Content頁簽。
使用內容樹狀結構，將自動產生的網頁頻道內容拖放至網頁範本中的現有面板。以下是需要重新排列的元件清單：
- 清單詳細資訊元件至清單詳細資訊面板
- 客戶詳細資訊元件至「客戶詳細資訊」面板
- 清單匯總元件至清單匯總面板
- 「費用匯總」元件至「費用匯總」面板
- 配置片段（表格）至「分項呼叫」面板
重複為Web通道建立互動式通信的步驟13 - 18，以在互動式通信的Web通道中插入立即支付和訂閱超連結。