您可以自訂最適化表單的錯誤訊息的版面配置和位置。 您可以執行下列自訂:
您可以自訂單一欄位或所有欄位的版面配置,以變更標題和錯誤訊息的位置。 執行下列步驟,將自訂版面套用至欄位:
執行下列步驟,將自訂版面套用至單一欄位:
以Style模式開啟表單。 若要以樣式模式開啟表單,請在頁面工具列中點選 > Style。
在側欄的Form Objects下,選取欄位並點選編輯按鈕。
選取您要自訂的欄位狀態,並指定該狀態的樣式。
有了AEM Forms,您現在可以建立主題並套用至表單。 主題編輯器可讓您在單一位置指定表單元件的樣式。 當您建立主題時,可在元件層級指定樣式。 如需主題的詳細資訊,請參閱「AEM Forms中的主題」。
使用主題編輯器建立主題,以自訂表單中所有欄位的版面配置。 建立主題後,請執行下列步驟,將其套用至表單:
開啟CRXDE lite。 預設URL為https://'[server]:[port]'/crx/de。
將欄位版面從/libs/fd/af/layouts/field節點(例如defaultFieldLayout)複製至/apps節點(例如/apps/af-field-layout)。
重新命名複製的節點和defaultFieldLayout.jsp檔案。 例如,errorOnRight.jsp。
更改複製節點的qtip和jcr:description屬性的值。 例如,將屬性的值更改為「右側出現錯誤」
若要新增樣式和行為,請在/etc節點中建立用戶端程式庫。
例如,在/etc/af-field-layout-clientlib位置,建立節點client-library。 新增包含值af.field.errorOnRight和style.less檔案的類別屬性,並包含下列程式碼:
.widgetErrorWrapper {
height: 38px;
margin: 5px;
.guideFieldWidget{
width: 60%;
float: left;
}
.guideFieldError{
overflow:hidden;
width:40%;
}
}
若要增強外觀和行為,請將在版面檔案(errorOnRight.jsp)中建立的用戶端程式庫包含在內。
開啟欄位的編輯對話框,選擇樣式頁籤。 在設定欄位配置下拉式方塊中,選取新建立的配置,然後按一下確定。
ErrorOnRight.zip套件包含在欄位右側顯示錯誤訊息的程式碼。