自訂最適化Forms核心元件

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

先決條件

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

自訂最適化Forms核心元件

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

  1. 識別並複製核心元件

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

  2. 自訂複製的元件

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

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

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

  4. 設定元件的對話方塊

    設定與自訂元件關聯的對話方塊。 使用檔案中提供的範例元件對話方塊,確保使用者互動和設定受到適當的管理。

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

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

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

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

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