自訂最適化Forms核心元件

自訂最適化Forms核心元件可讓您根據特定需求量身打造現成可用的功能。 本指南會逐步引導您完成自訂這些元件的程式，以建立更個人化的體驗。

先決條件

開始自訂最適化Forms核心元件之前，

• 瞭解 核心元件的架構 然後前往 Adobe Experience Manager核心元件正式檔案. 這些全方位的資源在整個自訂程式中都是您的指南。

• 設定您的開發環境這可確保順利進行工作流程，以變更核心元件。 設定開發環境時，請使用以最新AEM原型專案為基礎的AEM原型專案。 根據您的環境，您可以：

  • 設定Formsas a Cloud Service的本機開發環境.
  • 為AEM 6.5 Forms設定本機開發環境

自訂最適化Forms核心元件

請依照下列步驟，修改最適化Forms核心元件的外觀、行為和功能。

1. 識別並複製核心元件

   在設定開發環境時，您已建立原型型專案。 在AEM原型專案中，識別您要自訂的特定核心元件。 在識別之後，請在基於AEM原型的專案中建立元件的復本。 使其與其他最適化Forms核心元件並行。 此步驟可確保您的自訂工作不會影響原始元件，讓您自由實驗。

2. 自訂複製的元件

   開啟重複的元件，並根據您的需求開始進行必要的修改：

   • 自訂HTML結構：量身打造HTML結構以符合您的設計需求，同時遵循 BEM （區塊要素修正因子） 可維護且可擴充程式碼的樣式作法。
   • 更新標籤：更新元件的標籤，為自訂版本提供清楚的描述性名稱。 請參閱提供的 OOTB （立即可用）標籤範本 以維持一致性。
   • 自訂Widget：調整元件中使用的Widget （下拉選單、核取方塊），以符合您的特定使用案例。 請參閱 實作範例widget 以供參考。
   • 說明文字和工具提示：個人化與元件相關的說明文字或工具提示，為使用者提供內容與指引。 使用 OOTB說明文字範本 作為起點。
   • 資料屬性：在元件的HTML元素中整合所有必要的資料屬性。 這些屬性對於元件在執行階段的正常運作至關重要。 請參閱 檔案 瞭解資料屬性在調適型Forms核心元件中的角色。

3. 實作後端邏輯

   如果您的自訂需要後端邏輯，則可以擴充現有的Sling模型。 請參閱提供的 範例 將所需的功能緊密整合至自訂元件中。

4. 設定元件的對話方塊

   設定與自訂元件關聯的對話方塊。 使用範例 元件對話方塊 確保適當地管理使用者互動和設定。

5. 在本機開發環境中部署及測試元件

   使用 maven來建置和部署元件 本機開發環境上的。 部署元件後，建立最適化表單以測試自訂元件。

6. 在您的生產環境中部署自訂元件

   在本機開發環境中測試元件後，請在生產環境中部署元件。