教學課程：建立互動式通信

使用所有建置區塊建立互動式通訊

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

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

互動式通訊可透過兩個通道提供：印刷與網頁。 您也可以以主版的方式建立互動式的列印通訊管道。 列印為網頁頻道的主選項，可確保網頁頻道的內容、繼承和資料系結是從列印頻道衍生而來。 此外，還可確保在列印頻道中所做的變更在網頁頻道中同步。 不過，「互動式通訊」作者可以中斷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 & Documents」。

2. 點選「建立」並選取「互動式通訊​」。​將顯示​建立互動式通信​嚮導。

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

4. 在​頻道​精靈中：

   1. 指定​create_first_ic_print_template​為「列印」範本，然後點選​Select。 確保未選中​使用打印作為Web Channel​複選框。
   2. 指定​Create_First_IC_templates​資料夾> Create_First_IC_Web_Template​作為Web範本，然後點選​Select。
   3. 點選​Create。

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

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​欄中選擇「文字欄位」，然後點選（設定）。

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

    同樣地，為​Time、Number、中的文本欄位建立與 calltime 、 callnumber 、 callduration 和 callcharges 綁定2/>持續時間​和​電荷​欄。

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

14. 點選影像元件並選取（設定）。 影像屬性會顯示在左窗格中：

    1. 在​名稱​欄位中，指定​PayNow​作為影像名稱。
    2. 點選「上傳」，選取儲存在本機檔案系統上的影像，然後點選「開啟​a3/>」。
    3. 點選以儲存影像屬性。

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

建立適用於網路頻道的互動式通訊

以下是本教學課程中已建立的、在建立網路頻道互動式通訊時需要的資源清單：

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 & Documents」。

2. 點選「建立」並選取「互動式通訊​」。​將顯示​建立互動式通信​嚮導。

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

4. 在​頻道​精靈中：

   1. 指定​create_first_ic_print_template​為「列印」範本，然後點選​Select。 確保未選中​使用打印作為Web Channel​複選框。
   2. 指定​Create_First_IC_templates​資料夾> Create_First_IC_Web_Template​作為Web範本，然後點選​Select。
   3. 點選​Create。

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

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. 點選「Summary of Charges」目標區域，點選「+」以新增​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. 選擇​呼叫日期​表格欄標題，並點選（編輯），將文字重新命名為​呼叫日期。 同樣地，請更名表中的其他列標題。

14. 根據使用案例，在「互動式通訊」中插入​立即付費​按鈕，讓使用者可以按一下按鈕來付款。 執行以下步驟以插入按鈕：

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

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

    

16. 使用下列步驟，將超連結文字設為樣式，以便在互動式通訊中顯示為按鈕：

    1. 點選文字元件並選取（編輯）。
    2. 在​Border​區段中，將​1.5px​指定為​Border Width，選擇​Solid​為​Border Style，並將​46px​指定為​邊框半徑。
    3. 從​Background​部分選擇紅色作為按鈕的背景顏色。
    4. 在「尺寸與位置」部分的「邊界​」欄位中，點選「同時編輯​」圖示，並將「 Right 邊界」設定為 450px 。「頂端」、「底部」和「左側」欄位皆設為空白。

    

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

18. 點選影像元件並選取（設定）。 影像屬性會顯示在左窗格中：

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

19. 根據使用案例，在「互動式通訊」中插入​訂閱​按鈕，讓使用者可以按一下按鈕來訂閱增值服務。

    重複步驟13 - 17，將​Subscribe​按鈕添加到​Value Added Services​目標區域並添加​ValueAddedServicesWeb​映像。

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

您也可以啟用列印和網頁頻道之間的自動同步，以建立互動式通訊。 要啟用自動同步，請在建立交互通信時選擇「打印為主版」選項。 選擇「列印為主版」選項可確保從列印頻道衍生出網頁頻道的內容、繼承和資料系結。 此外，還可確保列印管道中所做的變更反映在網頁管道中。

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

1. 登入AEM作者例項，並導覽至「Adobe Experience Manager > Forms > Forms & Documents」。

2. 點選「建立」並選取「互動式通訊​」。​將顯示​建立互動式通信​嚮導。

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

4. 在​頻道​精靈中：

   1. 指定​create_first_ic_print_template​為「列印」範本，然後點選​Select。
   2. 選中​使用打印作為Web通道的主程式​複選框。
   3. 指定​Create_First_IC_templates​資料夾> Create_First_IC_Web_Template​作為Web範本，然後點選​Select。
   4. 點選​Create。

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

5. 點選「編輯」，在右窗格中開啟「互動式通訊」。

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

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

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

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

   將滑鼠指標暫留在網頁頻道的相關目標區域上，並選取（取消繼承），然後在​Cancel Inheritance​對話方塊中，點選​Yes。

   

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

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

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

    • 「清單詳細資訊」元件至「清單詳細資訊」面板
    • 客戶詳細資訊元件到客戶詳細資訊面板
    • 「清單匯總」元件至「清單匯總」面板
    • 「費用元件匯總」至「費用匯總」面板
    • 「項目化呼叫」面板的版面片段（表格）

    

11. 重複為Web通道建立互動式通信的步驟13 - 18，將​Pay Now​和​Subscribe​超連結插入互動式通信的Web通道中。