教學課程:建立互動式通訊

上次更新: 2023-12-04
  • 建立對象:
  • User

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互動式通訊

建立列印與網頁的互動式通訊,無需同步處理

為列印管道建立互動式通訊

以下是已在本教學課程中建立且在建立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. 指定 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. 將下列檔案片段拖放至互動式通訊中的目標區域:

    文件片段 目標區域
    bill_details_first_ic 帳單詳細資訊
    customer_details_first_ic 客戶詳細資料
    bill_summary_first_ic 帳單摘要
    summary_charges_first_interactive_communication 費用

    互動式通訊的檔案片段

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

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

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

  11. 選取中的文字欄位 日期 欄並選取 configure_icon (設定)。

  12. 選取 資料模型物件繫結型別 下拉式清單並選取 呼叫 > calldate. 選取 完成圖示 儲存屬性兩次。

    同樣地,建立繫結與 calltimecallnumcallduration、和 callcharges 中的文字欄位 時間數字持續時間、和 費用 欄之間。

  13. 選取 Paynow 目標區域,然後選取 + 以新增 影像 元件。

  14. 選取影像元件並選取 configure_icon (設定)。 影像屬性會顯示在左窗格中:

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

建立Web channel的互動式通訊

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

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. 選取 建立 並選取 互動式通訊. 此 建立互動式通訊 精靈隨即顯示。

  3. 指定 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. 選取 頻道 標籤,然後選取 Web.

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

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

    文件片段 目標區域
    bill_details_first_ic 帳單詳細資訊
    customer_details_first_ic 客戶詳細資料
    bill_summary_first_ic 帳單摘要
    summary_charges_first_interactive_communication 費用
  9. 選取 費用摘要 目標區域,然後選取 + 以新增 圖表 元件。

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

    1. 指定圖表的名稱。

    2. 選取 圓形圖圖表型別 下拉式清單。

    3. 選取 calltype 屬性來自 呼叫 中的資料模型物件型別 X軸 區段。 選取 完成圖示.

    4. 選取 頻率函式 下拉式清單。

    5. 選取 calltype 屬性來自 呼叫 中的資料模型物件型別 Y軸 區段。 選取 完成圖示.

    6. 選取 完成圖示 以儲存圖表屬性。

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

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

    互動式通訊的表格

  12. 選取 Mobilenum 表格欄標題並選取 更多選項 > 刪除欄. 同樣地,刪除 Calltype 欄。

  13. 選取 Calldate 表格欄標題並選取 編輯 (編輯)將文字重新命名為 通話日期. 同樣地,重新命名表格中的其他欄標題。

  14. 根據使用案例,插入 立即付款 互動式通訊中的按鈕,提供使用者按一下按鈕以進行付款的選項。 執行以下步驟來插入按鈕:

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

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

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

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

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

    6. 選取 新標籤Target 下拉式清單。

    7. 選取 完成圖示 以儲存超連結屬性。

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

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

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

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

    2. 邊框 區段,指定 1.5畫素 作為 邊框寬度,選取 實線 作為 邊框樣式,並指定 46畫素 作為 邊框半徑.

    3. 選取「紅色」作為按鈕的背景顏色,該按鈕位於 背景 區段。

    4. 邊距 欄位 Dimension與位置 區段,選取 同時編輯 圖示,並設定 邊界為 450畫素. 「上」、「下」和「左」欄位會設為空白。

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

  17. 選取 立即付款 目標區域,然後選取 + 以新增 影像 元件。

  18. 選取影像元件並選取 configure_icon (設定)。 影像屬性會顯示在左窗格中:

    1. 指定 Paynow 作為中影像的名稱 名稱 欄位。

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

    3. 選取 完成圖示 以儲存影像屬性。

  19. 根據使用案例,插入 訂閱 互動式通訊中的按鈕,可讓使用者按一下按鈕,以訂閱增值服務。

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

使用自動同步處理建立列印與Web的互動式通訊

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

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

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

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

  3. 指定 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. 作為 針對Web Channel使用「列印為主版」 在步驟4中選取核取方塊,則會從Print channel自動產生Web channel的內容和連結。

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

    將滑鼠懸停在Web Channel中的相關目標區域上,然後選取 取消繼承 (取消繼承),然後在 取消繼承 對話方塊,選取 .

    取消繼承

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

  9. 選取 內容 標籤。

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

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

    Web內容樹狀結構

  11. 重複步驟13 - 18 / 建立Web channel的互動式通訊 以插入 立即付款訂閱 互動式通訊Web channel中的超連結。

此頁面上的