自定義自適應表單的錯誤消息佈局和定位

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

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

自定義欄位佈局

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

自定義單個欄位的佈局

執行下列步驟將自訂配置套用至單一欄位：

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

2. 在側欄的​表單對象​下，選擇欄位並點選編輯按鈕。

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屬性的值。 例如，將屬性的值變更為「Error On Right」

5. 若要新增樣式和行為，請在/etc節點中建立用戶端程式庫。

   例如，在/etc/af-field-layout-clientlib位置，建立節點client-library。 使用值af.field.errorOnRight和style.less檔案添加categories屬性，其中包含以下代碼：

   .widgetErrorWrapper {
   
    height: 38px;
    margin: 5px;
   
    .guideFieldWidget{
    width: 60%;
    float: left; 
    }
   
    .guideFieldError{
    overflow:hidden;
    width:40%; 
    }
   
   }
   

6. 要增強外觀和行為，請包括在佈局檔案(errorOnRight.jsp)中建立的客戶端庫。

7. 開啟欄位的編輯對話方塊，選取​Styling​標籤。 在​配置欄位佈局​下拉框中，選擇新建的佈局，然後按一下​確定。

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

取得檔案