檢閱元件

自適應表單檢閱元件可讓使用者檢閱並驗證他們在提交表單前輸入的資訊。它作為摘要頁面,以結構化且方便使用的格式提供所有欄位及其值的唯讀視圖。此功能可確保使用者在完成其提交之前,識別並修正任何錯誤或遺漏,從而增強整體表單體驗。透過按一下編輯圖示,即可在提交表單之前修改已輸入的資訊。

TIP
您是否考慮過適用於 AEM 的 Edge Delivery Services?
現有的專案可以繼續使用本文件中所述的方法。然而,針對新專案,Adobe 建議採用 Edge Delivery Services。

範例

檢閱元件 {align="center" width="50%,"}

用途

以下是使用自適應表單檢閱核心元件的原因:

  • 改善資料準確性:檢閱元件可讓使用者檢閱在提交前已輸入的所有資料。有助於降低錯誤或遺漏的可能性,確保提交的資料是準確無誤。
  • 增強使用者體驗:使用者能清晰且有條理地檢視所有已填寫的資訊摘要,讓其在最後提交前確保表單完整且正確,以提升整體體驗。
  • 錯誤偵測與修正:可讓使用者在面板或欄位層級編輯資訊,無需來回切換多個索引標籤即可修正錯誤。按一下面板或欄位旁的​ 編輯 ​圖示,即可輕鬆返回並修正任何問題。
  • 提升使用者信心:使用者可檢閱已輸入的資料,確保即將提交的資訊正確無誤,從而減少提交錯誤,並提升對表單功能的信任度。
  • 預防意外提交:使用者經常在尚未檢閱所有詳細資訊的情況下點選​ 提交檢閱 元件為使用者提供最後機會以確認其資料,減少意外提交的可能性。

技術詳細資訊 technical-details

GitHub 的技術文件中可找到自適應表單檢閱核心元件的最新資訊。如需開發核心元件的更多資訊,請參閱核心元件開發人員文件

設定對話框 configure-dialog

透過「設定對話框」,您可以輕鬆自訂訪客體驗,以提供順暢無礙的使用者體驗。

設定對話框

  • 名稱 - 在表單和規則編輯器中,您可以使用其唯一名稱輕鬆識別表單元件,但該名稱不得包含空格或特殊字元。

  • 標題 - 您可以使用其標題輕鬆識別表單中的元件,預設情況下,標題會顯示在元件上方。若未新增標題,則會顯示該元件的名稱而非標題文字。

  • 隱藏標題 - 選取該選項,以隱藏元件標題。

  • 啟用編輯模式動作 - 啟用編輯模式動作 ​選項允許使用者修改已輸入的資訊。使用者可在欄位層級或面板層級編輯資訊。

    • 當使用者選取​ 欄位 ​選項,他們可以在檢閱期間編輯單一表單欄位。
    • 當使用者選取​ 面板 ​選項,他們可以編輯特定區段 (面板) 內的所有欄位。
    • 當使用者選取​ 欄位和面板 ​選項,他們可以按一下欄位旁邊的編輯圖示以修改特定資訊,或者按一下面板旁的編輯圖示以編輯該面板內的所有欄位。
    • 當使用者選取​ ​選項,他們可以編輯整個表單中的任何欄位或面板。

    預設情況下,已選取​ 面板 ​選項。

  • 連結面板 - 連結面板 ​選項允許使用者選取要檢閱的面板。連結至面板時,使用者可檢閱所選面板的已輸入資訊,並在提交前修改。

使用案例

舉例來說,貸款申請表單 ​由四個索引標籤組成,每個索引標籤都收集使用者的特定相關資訊:

  • 個人詳細資訊:收集使用者的基本個人詳細資訊,例如姓名、出生日期、聯絡資訊和地址。

  • 貸款詳細資訊:收集貸款相關資訊,包括貸款類型、預期金額、還款期間,以及利率與每月 EMI 等自動計算欄位。

  • 其他文件:使用者可上傳必要文件,例如 ID 證明、地址證明和收入證明。同樣包括一個聲明核取方塊,用於確認合約條款。

  • 檢閱並提交表單:具備檢閱元件,用於彙整前面各索引標籤的所有輸入。使用者可以在提交表單前確認和編輯其資料。此索引標籤同樣包含提交申請的​ 提交 ​按鈕。

下方影片示範如何設定​ 檢閱 元件,以提供使用者編輯資訊的靈活性:

另請參閱 see-also

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c