表單的基本結構是:
所有這些功能都是透過標準AEM安裝中提供的一連串預設Form元件來實現。
除了開發新元件以用於表單外,您也可以:
視需 要使用指令碼擴充功能。
本檔案著重於使用傳統UI中的Foundation Components來開發表格。 Adobe建議在觸控式UI中運用新的核心元件和隱藏條件來開發表單。
表單啟動元件為載入路徑提供一個欄位,該欄位是指向儲存庫中節點的可選路徑。
載入路徑是指向節點屬性的路徑,用於將預定義值載入到表單的多個欄位中。
這是一個可選欄位,它指定到儲存庫中節點的路徑。 當此節點具有與欄位名稱匹配的屬性時,表單上的相應欄位將預先載入這些屬性的值。 如果不存在匹配,則欄位包含預設值。
form action還可以設定從中載入初始值的資源。 這是使用init.jsp
內部的FormsHelper#setFormLoadResource
來完成的。
僅當未設定時,作者才會從start form元件中設定的路徑填充表單。
各種表單欄位還具有項目載入路徑,這又是指向儲存庫中節點的可選路徑。
項目載入路徑是指向節點屬性的路徑,用於將預定義值載入到表單上的特定欄位,例如下拉清單、複選框組或單選按鈕組。
下拉式清單可以設定您的選取值範圍。
項目載入路徑可用於從儲存庫中的資料夾訪問清單,並將這些清單預載入到欄位中:
建立新的sling資料夾(sling:Folder
)
例如,/etc/designs/<myDesign>/formlistvalues
新增多值字串(String[]
)類型的新屬性(例如myList
),以包含下拉式項目清單。 您也可以使用指令碼匯入內容,例如使用JSP指令碼或shell指令碼中的cURL。
使用項目載入路徑欄位中的完整路徑:
例如,/etc/designs/geometrixx/formlistvalues/myList
請注意,如果String[]
中的值的格式如下:
AL=Alabama
AK=Alaska
然後AEM將產生清單為:
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
例如,此功能可在多語言設定中良好使用。
表單需要動作。 操作定義了當表單隨用戶資料提交時執行的操作。
標準AEM安裝提供一系列動作,您可在下列位置看到這些動作:
/libs/foundation/components/form/actions
在Form元件的Action Type清單中:
本節說明如何開發您自己的表格動作以納入此清單。
您可以在/apps
下添加自己的操作,如下所示:
建立類型sling:Folder
的節點。 指定反映要實施之動作的名稱。
例如:
/apps/myProject/components/customFormAction
在此節點上定義以下屬性,然後按一下全部保存保存更改:
sling:resourceType
-設定為 foundation/components/form/action
componentGroup
-定義為 .hidden
(可選):
jcr:title
-指定您選擇的標題,這將顯示在下拉式選取清單中。如果未設定,則顯示節點名稱jcr:description
-輸入您選擇的說明在資料夾中建立對話節點:
在資料夾中建立以下任一項:
貼文指令碼。
指令碼的名稱為post.POST.<extension>
,例如post.POST.jsp
提交表單以處理表單時,會叫用後置指令碼,其中包含處理從POST
表單到達的資料的代碼。
新增在提交表單時叫用的轉發指令碼。
指令碼的名稱為forward.<extension
,例如forward.jsp
此指令碼可以定義路徑。 然後,將當前請求轉發到指定的路徑。
必要的呼叫是FormsHelper#setForwardPath
(2個變體)。 典型的案例是執行一些驗證或邏輯,以尋找目標路徑,然後轉送至該路徑,讓預設Sling POST servlet在JCR中執行實際儲存。
也可能有另一個Servlet會執行實際處理,在這種情況下,表單動作和forward.jsp
只會當做"glue"代碼。 例如,/libs/foundation/components/form/actions/mail
處的郵件操作會將詳細資訊轉發到<currentpath>.mail.html
中郵件servlet所在的位置。
因此:
post.POST.jsp
對於由操作本身完全完成的小操作非常有用forward.jsp
在僅需要委派時很有用。指令碼的執行順序為:
在轉換表單(GET
)時:
init.jsp
clientvalidation.jsp
clientvalidation.jsp
addfields.jsp
在內部演算 <form></form>
處理表單POST
時:
init.jsp
servervalidation.jsp
servervalidation.jsp
forward.jsp
FormsHelper.setForwardPath
),請轉送請求,然後呼叫cleanup.jsp
post.POST.jsp
(此處結束,未調用cleanup.jsp
)在資料夾中再次選擇新增:
用於添加欄位的指令碼。
指令碼的名稱為addfields.<extension>
,例如addfields.jsp
在寫入表單開始的HTML後,會立即調用addfields指令碼。 這可讓動作在表單中新增自訂輸入欄位或其他HTML。
初始化指令碼。
指令碼的名稱為init.<extension>
,例如init.jsp
當轉譯表單時會叫用此指令碼。 它可用於初始化操作細節。 "
清除指令碼。
指令碼的名稱為cleanup.<extension>
,例如cleanup.jsp
此指令碼可用於執行清除。
在parsys中使用Forms元件。 動作類型下拉式清單現在會包含您的新動作。
要查看屬於產品一部分的預設操作:
/libs/foundation/components/form/actions
可在兩個級別施加限制:
您可以為個別欄位(在/apps
下方)新增您自己的限制,如下所示:
建立類型sling:Folder
的節點。 指定反映要實施之約束的名稱。
例如:
/apps/myProject/components/customFormConstraint
在此節點上定義以下屬性,然後按一下全部保存保存更改:
sling:resourceType
-設定為 foundation/components/form/constraint
constraintMessage
-自訂訊息,如果欄位無效,根據限制,在提交表單時顯示
(可選):
jcr:title
-指定您選擇的標題,此標題會顯示在選取清單中。如果未設定,則顯示節點名稱hint
-使用者有關如何使用欄位的其他資訊在此資料夾內,您可以需要以下指令碼:
客戶端驗證指令碼:
指令碼的名稱為clientvalidation.<extension>
,例如clientvalidation.jsp
在轉譯表單欄位時會叫用此功能。 它可用於建立用戶端javascript,以驗證用戶端上的欄位。
伺服器驗證指令碼:
指令碼的名稱為servervalidation.<extension>
,例如servervalidation.jsp
在提交表單時會叫用此功能。 它可用於在提交該欄位後驗證伺服器上的欄位。
範例約束可在以下位置查看:
/libs/foundation/components/form/constraints
通過在啟動表單元件(validationRT
)中配置資源類型來指定form-global驗證。 例如:
apps/myProject/components/form/validation
然後,您可以定義:
clientvalidation.jsp
—— 在欄位的客戶端驗證指令碼後插入servervalidation.jsp
—— 也在對POST
的單個欄位伺服器驗證後調用。您可以設定表單,根據表單中其他欄位的值顯示或隱藏表單元件。
只有在特定條件下才需要表格欄位時,變更表格欄位的可見性很實用。 例如,在意見表中,問題會詢問客戶是否希望以電子郵件將產品資訊傳送給他們。 在選擇「是」時,會出現文字欄位,讓客戶輸入其電子郵件地址。
使用編輯顯示/隱藏規則對話框指定表單元件顯示或隱藏的條件。
使用對話框頂部的欄位指定以下資訊:
這些欄位下方會顯示一或多個條件。 條件會比較另一個表單元件(在相同表單上)的值與值。 如果欄位中的實際值符合條件,則條件會評估為true。 條件包含下列資訊:
例如,標題為Receive email notifications?
* *的單選按鈕組元件包含Yes
和No
單選按鈕。 標題為Email Address
的「文本欄位」元件使用以下條件,以便在選擇Yes
時顯示該元件:
在Javascript中,條件會使用「元素名稱」屬性的值來參考欄位。 在上例中,Radio Group元件的Element Name屬性為contact
。 下列程式碼是該範例的等效Javascript程式碼:
((contact == "Yes"))
要顯示或隱藏表單元件:
編輯特定表單元件。
選擇顯示/隱藏以開啟編輯顯示/隱藏規則對話框:
在第一個下拉式清單中,選取Show或Hide,以指定您的條件決定要顯示或隱藏元件。
在頂端行結尾的下拉式清單中,選取:
在條件行中(一個顯示為預設值),選擇元件、運算子,然後指定值。
視需要按一下「新增條件」,新增更多條件。
例如:
按一下確定保存定義。
保存定義後,在表單元件屬性中的顯示/隱藏選項旁邊將顯示編輯規則連結。 按一下此連結可開啟編輯顯示/隱藏規則對話框進行更改。
按一下OK保存所有更改。
可檢視和測試「顯示/隱藏」定義的效果:
顯示/隱藏條件使用「元素名稱」(Element Name)屬性的值來引用表單中的其他元件。 當任何條件參考已刪除或已變更「元素名稱」屬性的元件時,「顯示/隱藏」配置無效。 發生此情況時,您需要手動更新條件,或在表單載入時發生錯誤。
當「顯示/隱藏」設定無效時,此設定僅會以JavaScript程式碼提供。 編輯代碼以更正問題。代碼使用最初用於引用元件的「元素名稱」屬性。
有關編寫指令碼時可使用的API元素的詳細資訊,請參閱與表單相關的。
您可將此功能用於下列動作:在提交表單之前呼叫服務;如果服務失敗,則取消服務:
定義驗證資源類型
包含要驗證的指令碼:
com.day.cq.wcm.foundation.forms.ValidationInfo
對象。 如果有錯誤,表單資料將不會張貼。