自訂最適化表單的錯誤訊息的版面配置和位置

您可以自訂最適化表單的錯誤訊息的版面配置和位置。 您可以執行下列自訂：

• 自訂欄位標題的位置和版面配置，而不需對對應的CSS屬性做任何變更
• 自訂內嵌錯誤訊息的位置
• 自訂動態說明指標的內容
• 自訂欄位元件（標題、介面工具集、簡短說明、詳細說明和說明指示元件）的位置，而不需對對應的CSS屬性進行任何變更

自訂欄位的版面配置

您可以自訂單一欄位或所有欄位的版面配置，以變更標題和錯誤訊息的位置。 執行下列步驟，將自訂版面套用至欄位：

自訂單一欄位的版面配置

執行下列步驟，將自訂版面套用至單一欄位：

1. 以​Style​模式開啟表單。 若要以樣式模式開啟表單，請在頁面工具列中點選 > Style。

2. 在側欄的​Form Objects​下，選取欄位並點選編輯按鈕。

3. 選取您要自訂的欄位狀態，並指定該狀態的樣式。

   

自訂表單中所有欄位的版面配置

有了AEM Forms，您現在可以建立主題並套用至表單。 主題編輯器可讓您在單一位置指定表單元件的樣式。 當您建立主題時，可在元件層級指定樣式。 如需主題的詳細資訊，請參閱「AEM Forms中的主題」。

使用主題編輯器建立主題，以自訂表單中所有欄位的版面配置。 建立主題後，請執行下列步驟，將其套用至表單：

1. 在編輯模式下開啟表格。
2. 在編輯模式中，選擇元件，然後點選 > 最適化表單容器，然後點選。
3. 在側欄的「最適化表單主題」下，選取您使用主題編輯器建立的主題。

建立自訂欄位配置

1. 開啟CRXDE lite。 預設URL為https://'[server]:[port]'/crx/de。

2. 將欄位版面從/libs/fd/af/layouts/field節點（例如defaultFieldLayout）複製至/apps節點（例如/apps/af-field-layout）。

3. 重新命名複製的節點和defaultFieldLayout.jsp檔案。 例如，errorOnRight.jsp。

4. 更改複製節點的qtip和jcr:description屬性的值。 例如，將屬性的值更改為「右側出現錯誤」

5. 若要新增樣式和行為，請在/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%; 
    }
   
   }
   

6. 若要增強外觀和行為，請將在版面檔案(errorOnRight.jsp)中建立的用戶端程式庫包含在內。

7. 開啟欄位的編輯對話框，選擇​樣式​頁籤。 在​設定欄位配置​下拉式方塊中，選取新建立的配置，然後按一下​確定。

ErrorOnRight.zip套件包含在欄位右側顯示錯誤訊息的程式碼。

取得檔案