Show Menu
主題×

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

您可以自訂最適化表單的錯誤訊息的版面配置和位置。 您可以執行下列自訂:
  • 自訂欄位標題的位置和版面配置,而不需對對應的CSS屬性做任何變更
  • 自訂內嵌錯誤訊息的位置
  • 自訂動態說明指標的內容
  • 自訂欄位元件(標題、介面工具集、簡短說明、詳細說明和說明指示元件)的位置,而不需對對應的CSS屬性進行任何變更

自訂欄位版面

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

自訂單一欄位的版面配置

執行下列步驟,將自訂版面套用至單一欄位:
  1. 在樣式模式下 開啟表 格。 若要在樣式模式中開啟表格,請在頁面工具列中點選「畫 >樣 式」
  2. 在側欄的「表單物 件」下 ,選取欄位並點選「編輯」
  3. 選取您要自訂的欄位狀態,並指定該狀態的樣式。

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

有了AEM Forms,您現在可以建立主題並套用至表單。 主題編輯器可讓您在單一位置指定表單元件的樣式。 當您建立主題時,可在元件層級指定樣式。 如需主題的詳細資訊,請參閱「 AEM Forms中的主題」
使用主題編輯器建立主題,以自訂表單中所有欄位的版面配置。 建立主題後,請執行下列步驟,將其套用至表單:
  1. 在編輯模式下開啟表格。
  2. 在編輯模式中,選取元件,然後點選欄 > 最適化表單容器 ,然後點選
  3. 在側欄的「最適化表單主題」下,選取您使用主題編輯器建立的主題。

建立自訂欄位版面

  1. 開啟CRXDE lite。 預設URL為https://' #: #'/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套件包含在欄位右側顯示錯誤訊息的程式碼。